CSS not used when printing

[markontour]

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]

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]

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]

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]

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.