White Text in Footer turns Gray when Printing

[cpradio]

I have a weird issue and no matter what I did to the CSS, it wasn't fixing it. So I am reaching out to the CSS gurus here (because I am not one).
http://cpradio.no-ip.info:12710/clie...sitepoint.html

If you visit the above (in chrome at a minimum) everything should look pretty good. You will see a footer on each page that is white text. Now Print the page and that footer text turns gray (happens in Safari too). The question is why! Why on earth does it turn gray? I am stumped.

If you are able to resolve this, please please let me know how. As I've tried everything (I can think of) without any success.

Thanks

[cpradio]

So it seems this is a common issue and can be resolved using --webkit-print-color-adjust: exact;

[ralph.m]

Hm, that will only work in webkit browsers (like Chrome and Safari). It's plack in Firefox, for example. It's strange that setting the color in the print style sheet isn't working. I'll look further.

[Paul O'B]

HI,

In Firefox you would need to go into "Page Setup" and turn on print background colours and images. Otherwise backgrounds won't get printed and white text on a white background would be invisible so the browser changes it to a colour that will show when printed. the browsers doesn;t really know that you have shimmed a coloured image under the text and indeed would not know what colour that image was.

That means it will be up to the user to do this as it is their paper and ink that you will be using. Any colour from black to white will be treated as black in Firefox (other browsers will probably have their own defaults) but will adhere to other colours such as yellow, green blue etc.

[ralph.m]

That's interesting, Paul. Often I test this by choosing Save as PDF and getting a print preview. In FF, this kept the blue background but turned the text black.

[cpradio]

Yeah, I read about FF and IE you have to change a page setting (not a problem for my client, they use Safari and Chrome), but I should have mentioned those browsers too. I am a bit disturbed by a browser trying to dictate what font color my text should be when I state it should be white, but then again, it is what it is.

[Stevie D]

To be honest, browser support for print stylesheets is so flaky that anything that requires exact rendering or background images is usually better done as a PDF to ensure that it comes out right for everyone.

In Opera, I don't get the blue bar across the bottom, and I get black text.

You might be able to fool browsers by setting the text color to #fefefe, which is so near to white as makes no odds, but might just be enough that they don't switch it to black. Of course, that doesn't help when browsers aren't printing the blue bar

[Paul O'B]

That's interesting, Paul. Often I test this by choosing Save as PDF and getting a print preview. In FF, this kept the blue background but turned the text black.

Ralph the blue background is a foreground image which is why it gets printed because most browsers print foreground images by default (apart from opera I believe which you may have to set up). The text turns black because there is no background colour for the text and the fact that an image has been shimmed underneath is neither here nor there to the brower so the text gets changed to black.

If this didn't happen automatically then all print outs would have masses of missing text because background colours and background images are not printed by default in most cases.

I am a bit disturbed by a browser trying to dictate what font color my text should be when I state it should be white, but then again, it is what it is

Yes it can be a problem when you have to second guess something but I guess for most people the automatic behaviour is more desirable. Its better to have text in the wrong colour that is readable but not desirable to have white text on white backgrounds when printed.

I think we just have to accept that printing has its own rules and do the best we can.

[cpradio]

@Paul O'B, yes, I do agree with your statement that the most desirable is how it works, just wish it were better documented I'm going to try setting the background-color of the text to see if that helps webkit browsers without using the --webkit-print-color-adjust property