cssinternet-explorerwebkitprintinggecko

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


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): Webkit's Print Rendering
(source: skitch.com)

Gecko's Print Rendering
(source: skitch.com)


Solution

  • 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 ;-)