text changes its color on printing

Hello, folks!

I have a page with the white text and an image in the background. When I print the page (screenshot_browser.jpg), the text all of a sudden changes its color from white to something else (screenshot_print.jpg). I'm totally lost on that one and have no idea why it happens. Attached is my HTML/CSS code (which is just a few lines of). If anyone could take a minute and look into it, I would be very grateful!

Thanks in advance!
Anton

 

For some reason I'm not quite sure about myself, even with a print.css stylesheet, you can't change the colour of texts.

What I'd do if you want a custom colour is:

1. create a file called print.css
2. set the colour you want to color: white;

If that fails, just save the text as an image, and place that on there.

 

Thank you for the reply, twincircuits!

I'm not trying to change the color - it actually changes itself from white to dark-gray when you print out the attached page (either with printer or Adobe Acrobat). What I'm trying to do is to create printable cards, which are basically consist of background image and white text above it. And the problem is that each time the card is printed the reversed out white text prints in black instead of remaining white..

 

twincircuits is correct. When you print a web page some things revert to a default, in this case your font color. Copy your style sheet and save it as print.css and set it to media="print", call it from your web page. When it prints it will use the print stylesheet rather than you main style sheet.

 

Thanks, rob7676, for explaining the trick! But, unfortunatelly, didn't work for me... Updated version of the page is attached to this message... What I'm doing wrong?

 

I'm not really sure what the point is of telling a printer to print "white". I mean, it's not like they have white ink.

 

Your problem is that all browsers except Opera are COMPLETE retards when it comes to printing colors (background or foreground) using the default settings.

Firefox:
File > Page Setup > Print Background (colors & images)

IE:
File > Page Setup > Print background colors and images

Firefox will always try to override your color choices to black text on a white background unless you change that option.... while IE seems to just pick colors at random.

Opera defaults to having those options enabled, though they can be disabled if the user likes, Safari and Chrome seems to mimic IE, but do not include an option (that I've been able to find) to make it print what your CSS tells it to.

I wouldn't mind the behavior when a print.css is not present, but if I'm setting a color in print.css, for **** SAKE USE IT!

Oh, and you shouldn't need that javascript to hide the button! in your print.css just set #printButton to display:none and it won't print.