CSS print style gives unexpected results

[jhatter]

Hi,

I am creating a print style sheet (for the first time) but the css & html is not giving the result I require.

When I print to my HP C3100, the colour backgrounds in the individual cells don't print, although it looks fine on screen.

Any ideas how I can get it to print with the colour backgrounds?

For the HTML please visit (too many characters to copy & paste below):

http://www.johnhathway.co.uk/maplesv2/test_calendar.html


table { margin-left: 25px; margin-bottom: 15px; border-collapse: collapse; font-size: 12px; text-align: center; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal; color: #ffffff;}
td, th {
padding: .3em .4em;
border: 1px #00107f solid;
}
thead { background: #00107f; color: #ffffff; }
tbody { background: #ffffff; color: #00107f; }
#calendarcolumn { float: left; width: 700px; margin-bottom: 35px; margin-left: 25px; }

.ns { background-color: #e4e4d3; }
.ns1 { background-color: #e4e4d3; color: #e4e4d3;}
.hol { background-color: #1e52fc; color: #ffffff;}
.halfday { background-color: #00107f; color: #ffffff;}

.titleholder { margin-left: 25px; margin-bottom: 15px; color: #000000; font-size: 13px; }

[jscheuer1]

I don't think you can. Not without changing some settings for the browser and/or the printer. Skipping background color is one way to save on ink and often improve legibility. I think most browsers have printing of background colors turned off by default, printers generally don't, but at least some can. Depending upon how you have your printer setup, there's a dialogue box with each print job. If this is how your's is setup, somewhere in there may be the option for printing background colors. If not, in control panel you can usually access the printer setup. With the browser, the option is usually on the print preview (page setup, may be represented by an icon, click that, and there's usually a checkbox for background colors), and/or in the browser's options/settings/preferences somewhere.

From my experience, it's probably the browser. But it can be in the printer's settings, or both.

I tried with your page, and in print preview the background colors were not there. I set it to print them, and then they were there.

This is something the user has control of. I don't think you can override it. You could try using the !important keyword, ex:


thead { background: #00107f!important; color: #ffffff; }

But I don't think that will override the user's browser's settings. I just tried, and it does not work. And as I say, the default in browsers is usually not to print backgrounds. So you might just want to put a note about it on the page. Or offer the content in PDF form, which I imagine might be difficult with this type of thing.

BTW - That's not a print stylesheet anyway. But in the absence of one, it acts as one.

[jhatter]

Hi,

Thanks for your reply and suggestions/comments, which I will have a look at.

I realise that this isn't a print style sheet, just the styles that have been used in the print style sheet (if that makes sense).

I agree the PDF route might be the best - I might try importing into InDesign.