print.css Issues

Question

I was just recently asked to add a print stylesheet to a site I've coded out and am baffled as to why Firefox is mangling the output. A print preview of the following page reveals what I'm referring to:

http://webreviewportal.com/ethicalmovers/newsite/aaem-customer-testimonials.php

When you try to print that page in Firefox, you get the logo on one page, part of the testimonials on the second (they get cut off), and another blank third page. I've tested this with moderate success in IE and Safari with no such issues. Thoughts?

Also, why does the text get cut off (as opposed to wrapping) when you scale the page to anything above 150%? Thanks in advance!

Answer 1

I've not really experimented with print stylesheets yet, having not had the necessity nor curiosity enough. However, looking at the W3C's page on paged media, reveals that page breaks may have to be explicitly stated or allowed:

This section describes page breaks in CSS 2.1. Five properties indicate where the user agent may or should break pages...

Taken from: http://www.w3.org/TR/CSS2/page.html#page-break-props, 2009-07-27, 18:13

So it may be worth adding in the page breaks, or disallowing the page-break between the testimonials and the logo, by adding:

#leftcol {

page-break-inside: auto; /* although this may be the default value, anyway */

}

I think I remember Eric Meyer having issues with this sort of thing because of the 'float' property; but since you've already stated float: none!important; I guess you've dealt with that.

Answer 2

If you add "overflow: visible" to #content in print.css, it prints correctly in Firefox. Your overflow is set to hidden in style.css, which is why the text is getting cut off on one page.