Table background color and font color flip when displayed on scree vs when the screen is printed

Report · Feb 11, 2012

Hello all,

I have an application form that vendors complete, when they submit the form they are redirected to a formatted page that they are asked to print and sign. One small section of the form is laid out in a table and one of the cells has a black background and a white font color. The formatted page looks fine on screen but when I print it for this one cell the color of the background becomes white and the font becomes grey. The rest of the form prints fine(black font on a white background). Here's what the formatted section of the page looks like on screen

and here's what it looks like with a print preview or when printed to a PDF file, notice the lower left corner now has a white background and grey font....sigh.

Here's the html for the table

<tr>

<td id="notice2" style="margin:o;">BUSINESS TAXES PAID WILL NOT BE REFUNDED</td>

<td id="notice3"> READ AND INITIAL _______</td>

</tr>

</table>

and here's the inline style

#notice {

border: thin solid #000;

font-size:small;

}

.oneColFixCtr #container #mainContent #notice #initial tr #notice2 {

font-size: medium;

color: #FFF;

background-color: #000;

}

.oneColFixCtr #container #mainContent #notice #initial {

font-weight: bold;

font-size: medium;

}

Could someone tell me what I'm doing wrong?

Thanks,

Tony

Report · Feb 11, 2012

If you want things to look differently when printed you need to make a print stylesheet. Here is a good tutorial introduction to the topic: http://www.alistapart.com/articles/goingtoprint/ . But what you are seeing is also a direct result of the browser. Only IE and Firefox (& maybe Safari) print backgrounds and they print it as an option, not as a default. Chrome does not print backgrounds in any way, it is a shortcoming of the browser.

Report · Feb 11, 2012

Thanks for the info, I'll go over the article and see if there's an alternate to the way I'm doing it. I am using Win 7/ IE9 when testing. In this case I'd like the screen and the print to be the same so something must be affecting it, earlier on in the page I have some text that appears on the screen and does not appear on the print whichich is correct. Fortunately this is not a show stopper - it's a vendor application form for an airshow so worst case I'll do something else to draw attention to it.

Thanks again.

Tony