HTML header/footer print capabilities


I'm trying hard to give full HTML header/footer printing capabilities to our Mediboard project.

Long term, I know that CSS3 Page Media module will fulfill my needs, but that's two or three years away at least.

So I tried to make it work with CSS2 capabilities, and it almost works as you can see on this printable document. Yet, I still have a limitation on the footer where the content prints under the footer (see pages 3-4 with Print Preview).

Though I'm pretty sure the padding-bottom of the div.body used to make it work in Firefox 2.

Anyway, does someone have a tricky clue to help me on that problem?

To give more details, we currently have headers and footers by using elements positioned with position: fixed, with top:0 or bottom:0 depending if it is a header or a footer. This works well, and when printing, these elements are repeated on each page at the right position (see the "printable document" example). The only problem is when a page break occurs, the text is drawn behind these elements (see page 3/4)

EDIT2: Updated the document's URL

Best Solution

It looks like CSS2 has a @page rule in which you can define your page size and a margin:

@page { size:8.5in 11in; margin: 6em 1em 2em }


@page { size:auto; margin: 6em 1em 2em }

Unfortunately I don't have time to test it, but I would love to know if it works. I could use that.

I like what you're planning with the header/footer. Good work :)