HTML header/footer print capabilities

Question

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?

EDIT: 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

Answer 1

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 }

-or-

@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 :)

Answer 2

From my experience, page-break doesn't work within an element. If an element such as [p][/p] spans two printed pages, the HTML code isn't aware where the break happens between the pages. This is because the user may sets their own printer margins be they 1 or 1.75 inches or some other value. Actual printer margins cannot be set via CSS. CSS can only set the margins and padding to the HTML page -- to the "printer's" defined margins. No information about printer settings, such as margins, is sent to browser. This explains why content is being underwritten under the header since the browser has no idea when the page feed happened. The easiest solution is just to have the header information on the first page but, that's not what you want. The brute force approach is to insert page breaks [br style="page-break-before: always;" /] within the paragraph at the appropriate place but, this isn't practical for a large number of documents. Also, subtle differences between printers including those from the same manufacturer differ subtlely - for exanmple, one print may print the content just fitting on one page, the next printer may have the last line on the next page even though both printers have the same margin settings. However, for tabular information ([table][/table]) assigning such CSS becomes easy to keep tables together. I'm speculating that one could count characters on a page and dynamically insert page breaks via javascript (easy, if you used JQuery) to approximate the brute force approach.