Print preview showing blank pages

Hi guys,

I’m just styling up my print style sheet for a site I’m working on.

The problem I’m having is one of the pages has alot of content and so when I try and print it, the container holding all the copy is larger than the page. This is making the content jump to the second page keeping the header on the 1st page. I realise this is because the content is being parsed in as one large container which is not using page breaks.

I did a quick search for page breaks on css and found this resource: http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml

I have applied this still with no luck… Does anyone know how I woudl go about getting the page to break correctly?

The page in question is: http://bit.ly/hdtLdq

I notice you’ve set everything to float: left and width: 100%.

Firefox is notorious for not breaking floats. It’s generally advised to remove all but the smallest of floats from the print stylesheet for this reason (maybe FF isn’t the only browser with this bug but it’s like a decade-old bug Mozilla will likely never fix).

I just leave all blocks at their default display: block and let them go from there.

If you have any printable pages with forms in them you’ll see also that FF similarly doesn’t like to break fieldsets.

And, browser support for page breaking is bleh. Try to use it but know many will ignore it. Removing the floats should help.

Most modern browsers will recognise page-break-before : always provided that it appears in a style attribute within the tag you want to have start a new page. It is when you try to make it less obtrusive that it will not always work. Very few support any of the other options for controlling page breaks though.

Stephen, you mean
<div style=“page-break-before: always”>this div starts a new page</div>
???
eeeeew.

Yes. From what I have been able to determine that is the only variant of the print controls that all the browsers in common use over the last five or six years actually support. Moving it out of the HTML in the body of the page stops it working in some browsers and the CSS for avoiding page breaks in content (which effectively creates a break at that point if the enclosed content will not fit the current page) will not work across all browsers even if you do place it in the actual HTML like that.

As you said “browser support for page breaking is bleh” since using that one option that does always work means cluttering your HTML with CSS and also doesn’t necessarily help with reducing wasted space when printing as depending on how the printer is configured there may be very little on the previous page (eg. if they are using a different paper size to what you expected).