Fix page-break-before behavior difference between IE9 and Firefox (3.6)

Question

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:

1. Is there a workaround for FireFox?
2. If not, how would I have to structure my html to be able to use page-break-before (or really any page breaking).

Answer 1

The problem is likely due to having your page-break-before class on a tr element. Try changing to this:

<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>
</table>
<div  class="page-break"></div>
<table>
    <tr><td>50</td><td>x</td><td>(Su) Tricpes</td></tr>
    <tr></tr>
</table>

divs are more reliable for this sort of thing.