Forum Moderators: not2easy
I have a page with the white text and an image in the background. When I print the page <snip>, the text all of a sudden changes its color from white to something else <snip>. I'm totally lost on that one and have no idea why it happens. Here is my HTML/CSS code (which is just a few lines of): <snip> . If anyone could take a minute and look into it, I would be very grateful! :-)
Thanks in advance!
Anton
[edited by: swa66 at 11:55 pm (utc) on Nov. 4, 2009]
[edit reason] No links, please see ToS and Froum Charter [/edit]
It could be any of a number of conflicts between the screen stylesheet and the print stylesheet. Probably not a big deal; just a matter of isolating the issue.
My recommendation is to strip the HTML and CSS down to the problem itself by commenting out extraneous markup unrelated to the problem. If the fix is not found during this process, post the test ready code that replicates the problem and we will look at the options.
Be sure to declare a DTD and validate the markup. That will avoid, eliminate, or rule out many problems.
I have a page with the white text and an image in the background. When I print the page ... the text all of a sudden changes its color from white to something else...
BTW - You will probably want the text to be something else - probably black.
1) I usually (unless I want the images), disable the printing of images. Ink is expensive. That will leave white text on white paper. You can specify something other than black, but don't count on it's being printed in color. Color ink is way expensive.
I decide what images get printed and if color is going to be printed. Even with B/W, there is a slight draw from the color cartridge, but minimal.
Note: Don't depend on the logo of your site as an image. Better, IMO, is a nice sized font branding your site at the top of page 1.
I print lots of images, and lots of color - but I disable a lot more.
the text all of a sudden changes its color from white to something else
Welcome aboard Hail. Most likely reason, browsers will assign a printable color to elements specified as "white" because by default, background images are off. Of course, this would make white text invisible, since there's no commercial application of "white ink." You never know what your end user's settings will be.
The solution, or close to it, is to create a set of @media print selectors in CSS:
@media print {
.white-text { color: #000000; }
.button-style { display:none; } /* so ugly buttons don't print */
.bgImages { background: none; background-image: none; }
}
If you want your background images to print, you're really relying on the end user to turn them on, which is . . . unreliable, at best.