I'm formatting one of my webpages for printing, and in doing so am adding a pagebreak using this CSS Style.
@media print
{
.page-break { display:block; page-break-before:always; }
.print-hidden { display:none; }
}
In my initial testing (printing using XPS Document Writer), I've noticed that when printing from IE9 the page breaks appear and in Firefox they do not.
A sample page output would look like :
<table>
<tr class="print-hidden"><th colspan=3>Balance</th></tr>
<tr><td>10</td><td>x</td><td>(St) Legs Together: Head Turn</td></tr>
<tr><td>5</td><td>x</td><td>(St) One Leg: </td></tr>
<tr></tr>
<tr class="print-hidden"><th colspan=3>UE Strengthening</th></tr>
<tr><td>100</td><td>x</td><td>(Su) Biceps</td></tr>
<tr class="page-break"></tr>
<tr><td>50</td><td>x</td><td>(Su) Tricpes</td></tr>
<tr></tr>
</table>
Apparently on the w3schools page for page-break-before it says
Note: Use the page-breaking properties as few times as possible and avoid page-breaking properties inside tables, floating elements, and block elements with borders.
So, I guess my question(s) would be:
Here is what I ended up with (tested on IE9 and FF 3.6). It behaves as I expected.
<ul>
<li><reps>10</reps> x <exercisename>(St) Legs Together: Head Turn</exercisename></li>
<li><reps>5</reps> x <exercisename>(St) One Leg: </exercisename></li>
<li><reps>100</reps> x <exercisename>(Su) Biceps</exercisename></li>
<li class="page-break"><reps>50</reps> x <exercisename>(Su) Tricpes</exercisename></li>
</ul>