I have a page on which I put 3 frames that show the other 3 pages. Everything is wrapped in a large DIV element, and each iframe is wrapped in its own DIV element. Between each DIV, I add another DIV element with the following CSS code:
@media print { .page-break {display:block; page-break-before:always;} }
In Firefox (version 12 in this case, but I assume that this is not a problem with the version), everything is as it should be when printing the whole page, but in IE8 it seems that CSS page break does not work and all pages get corrupted when print. A.
I found here the answer that this page break does not work with positioned elements, but in my case the elements with this CSS code are DIVs between them, as I describe here, and the positioning of the contents of the printed pages (relative / absolute, float) is performed only in the source of the pages contained inside the frames, and not on the main page, so I'm not sure if this is the reason for the situation that I am encountering here.
What do I need to do to make this page work correctly on IE8 as well?
This is the code for the main page:
<style>
@media print { .page-break {display:block; page-break-before:always;} }
</style>
<div align="left">
<div id="frame_gop" align="left" style="width:759px;height:980px;">
<iframe src="page1.html" width="759" height="980" frameborder="0" align="left"></iframe>
</div>
<div class="page_break"></div>
<div id="frame_report" align="left" style="width:759px;height:980px;">
<iframe src="page2.html" width="759" height="980" frameborder="0" align="left"></iframe>
</div>
<div class="page_break"></div>
<div id="frame_release" align="left" style="width:759px;height:980px;">
<iframe src="page3.html" width="759" height="980" frameborder="0" align="left"></iframe>
</div>
</div>
source
share