Print Stylesheet - Printed Page width Different in Webkit vs. Gecko/IE

Question

When printing the page below in Safari/Chrome, the content (everything on the page, basically) is squished into the left side of the page, at about 60% of the page's width.

However, in FireFox and IE 7, the printed page shows the content as the full width (and looks quite nice, imo). I resized all the layout elements to 100% width (using !important to make sure they're applying), and Safari/Chrome still won't print out the full width.

Here's the page I'm referencing: http://archstl.org/commoffice/press-release/2010/local-catholic-principal-honored-fi

And here's an image of the difference between Webkit (first) vs. Gecko (second):
_{(source: skitch.com)}

_{(source: skitch.com)}

Answer 1

sorry not really an answer but a comment(i can't comment yet) but, have you tried printing the sheet already? if not, just try it.

Also, I checked your print.css and although I'm not too sure, maybe you can check your font-sizes. Try using pixels first instead of em. Since em is relative to your base font size, it may vary in browsers. You can rectify this by adding a fixed font size in your body style like so:

body { font-size: 13px; }

then continue using em for the others.

Answer 2

I've decided to give up on trying to improve the print stylesheets anymore, and instead just accept the odd spacing issues in different browsers.

I would recommend, to anyone else trying to style your pages for print, to consider using @screen instead of @all for your main site stylesheets, though—this makes styling things for print easier on some more complex layouts.

Anyways, we should just move into the 21st century and forget about printing ;-)