Printing background-color colors

[johnnyi]

Howdy all,

Is there an explanation for why IE doesn't print the color of something like this:


<input type="text" style="background-color:red;color:white" name="redbox" value="Red Box">

...on a color printer, it prints out an opaque box with the words "Red Box" inside it black. The box itself doesn't print red as it appears on screen.

Yet, removing the background-color attribute and just specifying a font color like this:


<input type="text" style="color:red" name="redfont" value="Red Font">

...prints the box with the specified red font.

Is there another color attribute for a text box other than "background-color" that changes the background color of the text box AND prints out in that color?

- I

[Twey]

I think it's all down to the user's setup.

[sleipner]

yup, its an option in IE to print the background images and such (former IE user, now Firefox) - the reason its disabled by default is because unless the background image is absolutely vital to getting the point of your site across, its not just a possible waste of printer ink, it POSITIVELY IS A WASTE OF INK, so unless the usual kittens and leaves are vital to the content of your site, dont bother trying to get people to print it...

and as a design rule, if you rely on something in the background that cant be conveyed in the content or general layout of your page(s), you should be worrying about getting rid of that and putting it in the body of your page before your even begin looking for code to make a background image print...

[johnnyi]

Yeah - it's not background images that I'm concerned with. Basically, what I have is a grid of textboxes [arranged to mirror a small table] that is color-coded based on the values contained within each box... For example, if the value of this textbox is between this range, color it red, if between this range, color it yellow, green, blue, etc... Basically it's similar to a color-coded dashboard of results - but the colors are being assigned via a document.getElementById('a').style.background-color = 'red'; string.

Oh well... so much for convenience! :o)

Thanks for the confirmation, guys.

- I

[Twey]

I'd suggest you put some clarifying text inside the coloured cells, the same colour as the background, so it still makes sense when printed, taking advantage of the behaviour you mentioned above.