Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Page-Break Not Working in all Browsers

Tags:

css

page-break

I'm having trouble getting this working in most browsers, except for IE (it even works correctly in IE6) and Opera.

Firefox separates the divs correctly but only prints the first page.

Chrome and Safari only applies the page break to the last div.

How can I get this working across all browsers correctly?

The HTML:

<div id="leftNav">   <ul>     <!--links etc-->   </ul> </div> <div id="mainBody">  <div id="container">   <div class="pageBreak">    <!--content-->   </div>   <div class="pageBreak">    <!--content-->   </div>   <div class="pageBreak">    <!--content-->   </div>  </div> </div> 

The divs with the IDs #leftNav and #mainBody are are set to float:left, so they display nicely.

I only want to print the .pageBreak classes, hiding the #leftNav and the rest of the #mainBody with CSS.

The CSS:

@media print {  #leftNav  {   display:none;  }  #mainBody  {   border:none;   margin:none;   padding:none;  } } 
like image 739
Richard Parnaby-King Avatar asked Feb 03 '11 09:02

Richard Parnaby-King


2 Answers

Parent elements can not have float on them.

Setting float:none on all parent elements makes page-break-before:always work correctly.

Other things that can break page-break are:

  • using page-break inside tables
  • floating elements
  • inline-block elements
  • block elements with borders
like image 112
Richard Parnaby-King Avatar answered Sep 29 '22 01:09

Richard Parnaby-King


For the sake of completion, and for the benefit of others who are having the same problem, I just want to add that I also had to add overflow: visible to the body tag in order for FireFox to obey the page breaks and even to print more than just the first page.

like image 30
Vincent Avatar answered Sep 29 '22 02:09

Vincent