print.css troubles

[RogueDogg]

Hey all, what I'm trying to accomplish here is making a "printer friendly" version of an invoice. So I've started off small with a simple example but I'm stuck.

Here is my test.php code:

<table>
<tr>
<td><div id="table1">blah blah</div></td>
</tr>
</table>
<table>
<tr>
<td><div id="table2">yada yada</div></td>
</tr>
</table>
<table id="table3">
<tr>
<td width="500" height="50"><div align="right">yayeah</div></td>
</tr>
</table>

Here is my style.css for normal online viewing:

body {
font-family: Arial, Helvetica, sans-serif;
background-color: #CCCCCC;
}
div#table1 {
background-color: #CC9900;
}
div#table2 {
background-color:#FF9933;
}
table#table3 {
background-image: url("http://www.URL.com/images/logoa.jpg")
}

Here is my print.css for printer friendly viewing:

body {
font-family: Arial, Helvetica, sans-serif;
background-color: none;
}
div#table1 {
display: none;
}
table#table3 {
list-style-image: url("http://www.cashflowdirect.com/images/logoa.jpg");
list-style-position: inside;
}

Now what's happening is the blah blah table is being left out like it should, but the table3 background is not showing up (in the print.css version ONLY) or if I try to add color to the backgrounds for the printer friendly version no colors show up. Where am I going wrong here?

ANY and ALL help is greatly appreicated. I've found 2 decent online tutorials on this matter and that's how I came up with what I have now but they're not quite written for css noobs if you will. :(

[edited by: RogueDogg at 10:04 pm (utc) on Aug. 25, 2006]

[Robin_reala]

Background graphics and colours are generally turned off by default for printing in browsers to save ink. I'm don't think there's any way to force them on for your users, so you're probably better off adjusting stuff like font styles and borders to convey separate sections.

[4css]

Not sure if it will work but you can always try this:

table#table3 {
list-style-image: url("http://www.cashflowdirect.com/images/logoa.jpg")!important;
list-style-position: inside;
}

[RogueDogg]

no unfortunatly that didn't work. I'm stumped...everything I read so far says I'm doing this the right way.

argh...frustrated, is there anyway of "viewing" the source of someone elses site to see how they did it? I guess there wouldn't be would there, I'd have to see the css file...hmmmm

anyone else have an idea?

[Setek]

Sorry, that won't work.

Browsers, by default, have background colours -and- background images turned off by default.

It saves ink.

The only way you can get a webpage to print background colours/images is to change a setting in the print setup to tell it to do so. This is not accessible via any code command, so for any other user of your webpage, you will not be able to print it out this way unless they also have this setting turned on.

In the subtractive colour system (print), it is most easily readable if it is black text on white background.

And that's the way it's meant to be.