Suggest/Override the Browser from Printing Headers/Footers

Probably nothing now, but maybe an un-yet supported standard?

[Jeremy_H]

I'm pretty sure I know the answer to my question, I just hope I'm wrong.

When setting a printing style, is there a way to set the paper's margin, headers or footers -- or, at least make a suggestion to the browser.

When a press release is viewed on my page, I want it to use my site's template. However, if this document is printed, I want the press release to have the same format as a standard press release.

I'm almost there, it's just by default the browser puts a header and footer on the page. I know I and the users can change this by hand, but I was hoping there might be some browsers or a CSS standard that supports suggestions by the content creators.

Right now, I'm also offering a PDF version of the file, which I plan to continue to, but it would be nice to have to avoid a second step for site visitors.

[Setek]

I'm pretty sure the

@page

selector covers the page's margins, however, I'm pretty sure hardly any browsers really support

@page

for print right this second :)

As for a header and/or footer, which is a really cool idea, this seems almost impossible - barring having your entire content inside a table that has

thead

and

tfoot

defined (if a table spills over a page when printed, it will reprint

thead

and

tfoot

at the top and bottom respectively.) While a possible hack-solution, it is a fairly icky one.

So, I don't think I have any good news for you...

Does anybody else perchance have some?

[londrum]

yeah, @page would be really good... if it worked. so i set the margins for @page to zero, and then just add padding to the body tag
body { padding: 3em 2em; }

you are supposed to be able to set a header on every page by just doing one header, and giving it

position:fixed; top:0;

it is then supposed to appear on every page you print off.
it seems to work on firefox alright, but doesn't work on IE6.0. you might want to give it a go though. ...seems like microsoft are doing their best to force everyone into upgrading to IE7 now, so i wouldn't image it will be a major problem for too long.

[cmarshall]

Printing has been somewhat of a compatibility nightmare for me. The browsers go all wobbly on support.

For example, If I hide headers and whatnot, then set the content to start at position:absolute 0, only one page of a multi-page printout gets printed.

I need to study up on it a bit more before declaring it a mess. I may very well be doing something wrong.

Here [webmasterworld.com] is a question I had asked in a similar vein.

[londrum]

are you using firefox? that has a known bug with regards to absolute positioning when in print mode.
just get rid of anything that has position:absolute, and it will work okay. change it to position:relative instead.

that might be easier said than done, of course...

[cmarshall]

Yeah, it's that problem. The issue is that I need to do it in order to make sure there isn't half a page of blankness before the first page prints.

[londrum]

you could try putting a negative top-margin on it instead, to move it up maybe

[cmarshall]

you could try putting a negative top-margin on it instead, to move it up maybe

I'll give it a go, and see what happens. I seem to remember some browser having a fit over negative margins (maybe IE?). In any case, I'll know soon.

Thanks.

[SuzyUK]

cmarshall, what's causing the half page blankness? Try applying your print stylesheet to the screen and see if you can tell what's causing the blank space

if you hidden some divs header, sidebars etc for print.. you should use display: none, rather than visibility: hidden; and you shouldn't need to position the content you do want printed at all, just let it flow

Try setting

position:static;

on elements to set the correct default.
Position: relative will also leave space at times, position absolute is the wrong thing to use in print and the reason FF only prints one page is I believe correct, an absolutely positioned element is out of the flow therefore the document does not know it exists (the viewport might, but the canvas doesn't) and the canvas in a print medium is the paper.

what some do is serve their screen stylesheet only to the screen media this makes it easier to write a print stylesheet, you're starting from a blank canvas with no positioning to override, only some divs to hide usually and a bit of font resizing/coloring

HTH
Suzy

[cmarshall]

Yeah, I do display:none.

I just need to spend more quality time with my CSS before I can definitively say what's up.

CSS is a major pain. I just made another post about the Webstandards Acid Test [webstandards.org].

[HelenDev]

CSS is a major pain

No it's not, CSS is great! :)

[cmarshall]

CSS is a major pain

No it's not, CSS is great!

I wouldn't be using it if I din't think it was.

CSS isn't the problem. As the acid test [webstandards.org] shows, the problem is with browser incompatibilities.

In a perfect world, CSS would be quite easy. In the real world; not so.

I have written million-line programs in C++, Pascal, Assembly, etc. I've written async device drivers and debugged protocol streams with protocol analyzers and other tools.

Reliable, cross-browser CSS presents as much of a challenge as any of these.

Nevertheless, I do agree with you that it is great, but way too many designers neglect to test it on multiple browsers.

If you really want to see some kewl CSS stuff, check here [cssplay.co.uk].