I've got a completed (well, not completed, but it's in production) site that's had a print stylesheet set up for certain pages. That's worked so far in IE7 & 8, Firefox, Chrome 4 and 5, and Safari 4. However, the working stylesheet absolutely doesn't work with Safari 5 from either Windows or OS X. The problem is not subtle: text is printed in a ridiculously small font size, all jammed together into a single very narrow column towards the right side of the page. That layout is (as you might guess) absolutely nothing like what is intended (and what works for Safari 4); basically the print layout just puts things down on the pages in a mostly straightforward boring way (since print CSS is so lame in general).
I've tried some random (literally, random) changes to see if I can find some particular part of the stylesheet that's at fault, but nothing seems to make a difference. What I'm wondering is whether something in particular has changed with Safari 5 about how it handles printing.
The solution is to comment out the @page rules.
The reason is that Safari 5 is treating them as if they were "*" rules. That is, the margin is being applied to everything on the page, and every block-level element. Way to go Safari 5!
Note that other browsers currently ignore these @page rules so you lose little by commenting them out.
Finally, I learned all this at http://whatsthepointy.blogspot.com/2010/06/safari-5-has-some-printing-problems.html
+1 (775) 329-0180 Voice
+1 (775) 329-0190 Fax
Skype ID lifeboathq
Well so far I've found the
If you visit that site in Safari 5 and try to print the page, you'll get something that's obviously wrong. The page text will be jammed over in a narrow box towards the right side of the page. (The print stylesheet puts the bordered box around the text, so that part's OK, but the box should be bigger.) If you save the page and comment out the
@page rules, it prints fine.