I am using a separate print css on our website. It's been requested that we have our logo at the top of printed pages. This is the code I'm using for print.css:
body:before {
content: url(../images/logo.gif);
}
This works on Firefox, Chrome, Safari and Opera ... and of course you know what's coming next.
It doesn't work in Internet Explorer 8 which apparently supports before as a pseudo-class: http://www.quirksmode.org/css/beforeafter_content.html
In print preview there is a blank space the same size as the logo but our logo doesn't print. If I change the code to:
content: "Test Text" url(../images/logo.gif);
The "Test Text" shows, but still not the logo.
Does anyone have any ideas? It's made very difficult that I can't debug off "print preview" and simply changing the media type on the CSS links renders something completely different in the browser screen.
Cheers Tama