Cross Browser Printing is Annoying

My current task at my current place of employment is to get a certain web page to print to a single piece of paper without heavily modifying a pre-existing print stylesheet and getting it to work on both Firefox and IE. Not all the browsers have to be the same, they really just need to print to 1 page.

The first problem that we come across is that margins and padding are way different in each browser. After a quick web search, the culprit appears to be the use of px and pt. When printing apparently the em element is a better choice as it is more consistent unit of measurement and px and pt are arbitrarily handled by printers and browsers alike.

The second problem the @page CSS directive and page margins. It seems that each browser wants to handle things differently, which is not new and not entirely wrong according to the W3C which as an article about that here. But that does not help our problem which is to disregard how the browsers want to display things and make sure that things come out the way we want.

For once, IE is behaving the most sensible for our purposes. It takes the @page margins and sets the printed page margins to what we want. Firefox, however, makes things difficult by taking the @page margins and adding them to the browsers default printer settings. Why, I have no idea, but we have to deal with it.

The goal is to keep the whole website on 1 stylesheet and also not to have any browser specific hacks or browser sniffing. Unfortunately, if we want similar behavior between the 2 browsers in this case, the best way that I have come across so far is to add a directive to our print CSS that is Firefox specific. The @-moz-document directive is used so that we can set the @page variable inside it to trim the margins back for just Firefox. Other browsers will ignore this directive as it really doesn’t tell them to do anything.