0

I have to print a diagram in IE7 (customers infrastructure), that consists of many div's one under another, with position: static. That divs have class 'partialDiv'.

.

enter image description here

But only the tops of that DIV's are being printed. The bottoms of them are being lost (see picture). Does someone know, what can be the reason and what to do do repair it? (except 'upgrade to newer browser', because this cannot be done).

Thanks for support!

Mateusz

Mateusz Moroz
  • 312
  • 2
  • 6
  • 19
  • 1
    It's an overflowing div problem related to the broken CSS implementation in IE7. Add a print-only CSS file to your layout and start fiddling with `display: block/inline;` and `overflow` on your layout. I found this question helpful when dealing with the same issue: http://stackoverflow.com/questions/1710835/strange-ie7-printing-bug – Sergiu Paraschiv Jan 07 '14 at 09:53
  • @Sergiu, I did dozens of fiddling, like you said, but nothing helped. Please take a look at the document [attachment](https://drive.google.com/file/d/0BxUIiJNt7Z17eElDZmpyTlRCX2c/edit?usp=sharing) The borders of the table cells are being printed, but the content doesn't. Please help! PS. Yes, I moved the layout to the table. Yes, that's ugly. But I hoped it will help. – Mateusz Moroz Jan 07 '14 at 18:07
  • We need HTML and CSS to be of any help. – Sergiu Paraschiv Jan 08 '14 at 09:13
  • Hey, I just did z-index "misching" one more time and it helped. I added the z-index property even to the elements out of all partial tables. And it works! I don't know, which element covered the "next site" parts, but now it is being printed smoothly. Thanks for help Sergiu! – Mateusz Moroz Jan 08 '14 at 10:56
  • I must confess, that the previous comment is wrong. The printout repaired itself, because accidetially the mode in my browser changed from "compatibility view" to "IE10". When I changed again to "compatibility" or just "IE7", effect is the same. One more time: [PDF document](https://drive.google.com/file/d/0BxUIiJNt7Z17eElDZmpyTlRCX2c/edit?usp=sharing) and [html+css source code](https://drive.google.com/file/d/0BxUIiJNt7Z17NWotN0w0UVZfZ28/edit?usp=sharing). Just press F12 in IE10, changed the mode to "IE7", and click "Print preview". Everthing in table after page break is hidden. – Mateusz Moroz Jan 08 '14 at 18:12
  • I'm afraid your HTML and CSS is broken to such a degree that it would be easier to just start from scratch. I don't think you'll be able to get a decent print out of that on _any_ browser. – Sergiu Paraschiv Jan 09 '14 at 09:03
  • Well, that html is copied from IE. The original looks much better like, but I can't post it, nor the scripts, as it is the property of the customer. What I posted is the result of F12 and "Copy outer html" from IE10. It does the same effect as the original, but looks 10x times more ugly. Sorry, I can't post the original code and scripts. – Mateusz Moroz Jan 09 '14 at 09:15
  • You are using tables for layout and a ton of absolute positioning. Those won't work for print. – Sergiu Paraschiv Jan 09 '14 at 09:47
  • The absolute positioned div's are not important here. Without them the printout also doesn't work. More important thing is, that the divs positioned "relative", like 'contentPrintWindowDiv', or 'labelsScroller' are not visible on the next pages. Absolutly positioned divs are nested in that div's and are printed correctly if only the overflowing (parent) div IS printed. Besides, as I wrote, I moved the layout to the table, because I hoped, that it will help. Without the table was the result the same. – Mateusz Moroz Jan 09 '14 at 09:55
  • You've got `div`s with inline `height: 1600px` on them, inside tables that have absolute positioned headers. I'm surprised _any_ browser handles that. IE10 prints a totally broken layout. IE7 prints the same broken layout but with parts missing. Chrome prints a total disaster. Also, IE7 mode on IE10 is not the same as IE7 run on a Windows XP machine. – Sergiu Paraschiv Jan 09 '14 at 10:07
  • Hi, Sergiu. What you write is true. I tried to handle compatibility with other browsers as long as it was possible. But now only IE7 is important. I created a minified html (size < 6 KB), that have just divs with borders and nothing more. [Can be downloaded from here](https://drive.google.com/file/d/0BxUIiJNt7Z17Q2dlR2ZjeFh5RVE/edit?usp=sharing) :) Just run your IE, press F12, set mode "IE7". After clicking print preview is the effect the same. That html should be much easier to read. Best regards – Mateusz Moroz Jan 09 '14 at 10:15
  • For me the "clear IE7" prints the same output as IE10 in compatibility mode. No important difference between them in that concrete case. Relative positioned table cells are also effect of my desperate attempts. That styling can be also removed. No problem. – Mateusz Moroz Jan 09 '14 at 10:27
  • You'll never be able to print that huge table exactly the same. There are simply too many differences between IE7 and IE10. Why not go safe and use a HTML to PDF conversion library and serve that up for printing? – Sergiu Paraschiv Jan 09 '14 at 10:39
  • I wish I could use such library, but there is no http server available to do that. That was our first idea. But since the page is rendered dynamically through Javascript from SAP (embedded IE7 frame), no usage of such server side library is possible. To obtain a PDF, a PDF printer is being used (like CutePDF Writer or smth). Also no one is interested in printing this the same way for all browsers. When the customer moves from IE7 to IE10, the printout will be adjusted to IE10. There is no need to handle the compatility. – Mateusz Moroz Jan 09 '14 at 10:57

0 Answers0