...

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum