headers in print css

[Peter Johnson]

Is there a way to print a header or line on every page using css? I don't mean to override the header that the browser uses, I mean a line that would simply appear at the top of each printed page.

I tried this, but it didn't work in either FF or IE.



<style type="text/css" media="print">
@page {
@top-left{
content: "Content on each page";
}
}
</style>

Thanks.

[Peter Johnson]

It would seem that css should be able to do this, but I've tried googling and nothing reallyturned up-

All i want is to have something - a line of text or a logo - appear on each page when the document prints. I can put that at the top or bottom of the entire article, but in an article that's multi-pages, I'd like to have this on EACH page that prints.

I went to w3.org and on http://www.w3.org/TR/2003/WD-css-print-20030813/#s.8.4 section 8.43 Running Headers and Footers they indicate it can be done and have the code, but it's like what I tried. (see first post - didn't work)

Anybody????

[boogyman]

Is there a way to print a header or line on every page using css? I don't mean to override the header that the browser uses, I mean a line that would simply appear at the top of each printed page.

I tried this, but it didn't work in either FF or IE.



<style type="text/css" media="print">
@page {
@top-left{
content: "Content on each page";
}
}
</style>

Thanks.


CSS - Cascading Style Sheets. It cannot write anything up there by itself. You would need to write something in html, then write a seperate print style sheet that activates the style you created.

[Peter Johnson]

Yes I know that.

I have an html document. This document has a style sheet for the screen and one for print.

I am trying to see if there is a way to put either a div on the html document or some type of header that would be seen only on print, AND be seen at the top of each page. I know how to put a div on the html document that will be seen only in print. What I am looking for is a way to have something display on every page.

I am not trying to replace the headers and footers that printers put on their own. The code that I tried using came from the w3 as a way to put a header on each page. But it did not work when I tried it in my html document.

[Veronica]

I believe the w3 code you refer to is from a draft document that is still under review.

The only way to get the effect I think you're looking for would be if you had data in tables, and you used thead and/or tfoot. You could put the content in thead or tfoot in a div that would be viewed on print only. But even then, it doesn't work in all browsers. In IE 6, you would simply get the thead content at the top of the first page, and the tfoot content at the end of the last page.

[mwinter]

CSS - Cascading Style Sheets. It cannot write anything up there by itself.

That's not entirely accurate. CSS can insert content in a limited fashion, though support is far from complete across browsers.

Unfortunately, paged media features in existing CSS Recommendations aren't implemented that thoroughly (I think Opera has the best support), let alone proposals for CSS 3. I don't think you'll find a satisfactory solution (though I'd happily be wrong).

[Peter Johnson]

Thank you Veronica. Putting the content in a table and using thead works, at least in IE7 and FF. I've explained the issues to the client and its up to them to decide now.