PDA

View Full Version : CSS not used when printing



markontour
08-06-2012, 01:24 AM
I have a simple (ish) report that i produce in HTML and CSS.
It looks just fine in the browser but when I print all of the CSS formatting is lost. I have media = all on the tag, and I have tried media="print" as well.

<style type="text/css" media="all">

I have tried an external style sheet (it didn't work) but, for portability reasons, it really needs to be embedded css.

To be clear, I don't (at this point) need different CSS for print/screen.

Hopefully i have missed something really simple - what is it?

I'm a real CSS noob so be gentle ;-)

Thanks in advance

Mark

AndrewGSW
08-06-2012, 01:37 AM
I haven't attempted this myself, but a quick Google indicates that, for internal stylesheets the media attribute will be ignored. You need to specifically qualify the css rules as follows:


<style type="text/css">
@media print {
body{ background-color:#FFFFFF; }
#heading{ font-size:28px; }
}
</style>

The media attribute is intended for external style sheets:


<link rel="stylesheet" type="text/css" media="print" href="print.css">

tracknut
08-06-2012, 01:38 AM
Looks to me like your CSS is working fine for printing. What you're missing is that background-color does not print - it's not supposed to. There may be some workarounds to this, I'm not sure, but I figure at least now you know what the real issue is :)

Dave

AndrewGSW
08-06-2012, 01:41 AM
As you want to use the css for both screen and print then perhaps..


<style type="text/css">
@media all {
body{ background-color:#FFFFFF; }
#heading{ font-size:28px; }
}
</style>

or


<style type="text/css">
@media screen, print {
body{ background-color:#FFFFFF; }
#heading{ font-size:28px; }
}
</style>

markontour
08-06-2012, 06:44 AM
Thanks guys. Both of you helped.
As tracknut said the print was accepting the css - just not displaying the background (and the width of the page made the rest look really bad which fooled me to thinking it wasn't).
I used @media print as suggested by AndrewGSW to chnage the rendering in print mode to make up for lack of background.