print stylesheet, one page prints and cuts off remaining text

Question

Anybody know more about print stylesheets than I do.

I'm working on a printable list of events, the printer prints one page fine, but cuts off some of the text on the bottom, then it print a second blank page

I've tried everything I know but am at a loss.

here's the link

Answer 1

Are you already using the print value for the media attribute for your stylesheet like

<link rel="stylesheet" href="print.css" media="print" />

You might also want to use page-break-before attributes for elements that you don't want to break.

Answer 2

If any of the containers you're trying to print are floated, they'll get cut-off like you're seeing.

In your print.css, make sure you turn off all the floating that you can without destroying your layout. It's a pain, but browser support for printing is weak at best.

Answer 3

In print.css, set "overflow: visible" instead of "overflow: auto" on div#content. That fixed it for me in Firefox at least. The definition of overflow auto is: "If overflow is clipped, a scroll-bar should be added to see the rest of the content" -- but scroll bars don't exist on printed pages.

I'm guessing that since the content div should span across multiple pages, the browser thinks "you're flowing outside your container and must be clipped with a scroll bar". The container in that case is the first page the content div appears on.

Answer 4

I just resolved this problem in ie7. This was in a Sharepoint project, which had various table cells and/or divs set to height:100%. When printed, it would print long forms, the first page or 2 would print as usual, then blank pages instead of the rest.

In my print stylesheet, I set those tables & divs to height: auto, and now it prints fine.

I'm having a different problem in IE8 now. UGH!