Cross Browser HTML Printing

There’s a big difference between making a website look good on screen and for print. With a screen you can be save in using pixels for your fonts and more absolute measures. In print this is not done. First there are different paper-size, a4, letter, a3, etc… Than every printer has it’s own margins too. Next to that a printer most of times works in 300 dpi (dots per inch) while a screen is only 72 dpi.
So when ur marking a page up for print be sure not to use any absolute measures like pixels, but only to use relative ones like em, %, pt, etc…

Another screw up for print is using floats, they display different with every browser. As I just now discovered. FF (FireFox) displayed a div through another div, while IE displayed them below each other, as intended. I guess that’s what you get for using inline styles.
If you’re like me are using 2 stylesheets, one for screen, one for print. You have to take care not to overlook any !important statements in your CSS for screen. This can majorly screw up your print size. I had a width: 1003px !important defined, while FF printed the page just fine, IE(6) would let the page overflow and not print what ran off the page.

A nice article about printing HTML can be found here:

Leave a Reply

Your email address will not be published. Required fields are marked *