Search code examples
htmlcssfirefoxpage-break

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


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).

Solution

  • 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>