Cross-Browser CSS Footers for HTML Print Media

If you are reading this, you are probably creating an HTML web page that needs to be sent to a printer. If so, you may have already discovered (to your horror) that while you can aspire toward using CSS to make your pages render on the SCREEN virtually identically in almost all browsers, you are simply NOT going to be able to ensure uniform output when the user selects "Print" on their browser.

Let's get that part over with. You just CAN NOT do it. Certain things (like local browser print margins, headers, footers, default font size, and local printer driver defaults like media type/size) are out of your control via HTML and always will be. The only way to absolutely control printing from a browser (today) is to make your output a PDF file. You could also reinvent the wheel by building a Java applet or Dot Net equivalent that runs on the user's local machine and interacts with their printer driver, but WHY? That's what the ubiquitous Adobe Acrobat plug-in does, so just using the PDF is simpler and more sensible.

But what if you, like me, have been given a mandate by your boss: "No PDF for this page". My assignment was to create a page that would print "reasonably" uniformly on all major browsers. I finally did it, but thought I was going to go insane working out the last sticking point: putting a footer at the bottom of every PRINT page. It's easy to do in Internet Explorer and Firefox. However, there is a TRICK to making it work in Safari, Opera, and Google Chrome. Below you will find my solution, which is the result of beating my head against the screen (and my desk) for almost a week before I tried something that should not have worked, but it did.

First, you need to understand that you can have different CSS settings for different media types, including "screen" and "print" the default is "all" media types if you don't specify.

See www.w3.org/TR/CSS21/media.html for the basic list.

You may embed media directives on your page, in the style spec for individual elements, or in style sheet files. My personal preference is to put the "all" defaults in one style sheet and the "print" overrides in a second separate sheet. Therefore in my pages you may see something like this in the header:

<link href="/css/styles_all.css" rel="stylesheet" type="text/css" />
<link href="/css/styles_print.css" rel="stylesheet" type="text/css" media="print" />

The focus of this article is on forcing footers to the bottom of each printable page, so it is beyond the scope to cover details such as setting font sizes and units differently for screen and print, but you will have to learn those differences as well.

Rule 1: Use an XHTML Strict DocType declaration at the top of your HTML page to ensure that all browsers follow a similar set of rendering rules. If you leave out the DocType, browsers are free to default to quirks mode and will make assumptions about interpreting your HTML. Just forget about cross-browser compatibility. Really.

Here's a footer that SHOULD print at the bottom of every PRINT page, and indeed it will do so on Internet Explorer and Firefox:

#css for media="print"
.print_footer
{
position: fixed;
bottom: 1.5em;
text-align: center;"
}

#html
<div class="print_footer">
<hr><p>Our company is an equal opportunity employer</p>
</div>

Hurray! Until you test Print in Google Chrome or Safari and find your footer stuck up inside the middle of your page text. I don't know precisely why this happens, but experimentation suggests that Chrome and Safari pass along to the printer the page size spec of the screen viewport by default, UNLESS you find a way to force those browsers to use the actual print output media height. (Note: if that is true, its also going to apply to media types like "handheld".)

Here's the fix. Just add this to your print CSS file:

#css for media="print"
html, body
{
height: 98%;
}

Before you ask me why not use 100%, all I can say is that for strange arcane reasons known only to a couple of mountain top gurus (and they aint talkin') if you use 100% you will mess up Internet Explorer and Firefox, both of which will push the footer off to the next printable page (on most HP printers anyway). 98% preserves the same output look on IE and FF, while making the other browsers work too.