’m working on a project that allows users to design forms in a web editor. Some of that content is growing/variable in nature (we run a process against it and add/replace various HTML tags).
The end requirement is that this form be printable and look super fantastic.
In order to make this printable, I need to insert page breaks appropriately to ensure the content breaks where we want it to and not in some arbitrary location. For the most part this works, but under certan scenerios, it’s not happening.
Below is a simplified piece of HTML that is causing problems. The real content is much more complex, but this demonstrates the problem. It seems that the first is being ignored by IE8.
If you open this up, and select print-preview, you will see “This is page 1” and “This is page 2” both on page 1.
Any ideas why this isn’t working? I've been fiddling with it all day trying to figure out whats wrong.
<body>
<div style="width: 8.5in; height: 100%; position: relative; ">
<div style="left: 0.5in; width: 7.5in; top: 2.8in; position: absolute; overflow: visible; " id="editor4">
<div style="position: relative; overflow: hidden; " id="MsgBlock9">
This is page 1.
</div>
<div style="page-break-after:always"></div>
<div style="position: relative; overflow: hidden; " id="MsgBlock15">
This is page 2
</div>
</div>
</div>
<div style="page-break-after:always"></div>
<div style="width: 8.5in; height: 100%; position: relative; overflow: hidden;" >
<div style="left: 0.7in; top: 0.25in; width: 7.5in; height: 100%; position: absolute; overflow: hidden; " id="editor9">
This is page 3
</div>
</div>
</body>