Best Ways to Get Around CSS Backgrounds Not Printing

Question

It often works out great that the CSS backgrounds don't print, however, sometimes I use them to convey contextual information. What is the best way for getting around CSS backgrounds that don't print but you really want to display. The example, I'm currently working on is a table that displays financial information. Different background colors are used to indicate how "good" a number is (e.g. very profitable, profitable, neutral, negative, very negative).

Answer 1

You could make the font bigger and/or bold and/or italic and/or colorful.

Answer 2

I ran into the same problem color coding tabular data in html, eventually I just switched to pdf generation for color printouts and only made black and white available in html

Answer 3

I've used borders to simulate backgrounds when I really need a background color. Something like this will work (but I apologize for not having tested this):

div.must-have-background-for-print {
    position: relative;
    width: 400px;
}
div.must-have-background-for-print div.background {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-left: 400px solid #999;
}

Answer 4

It's a browser settings. Turn on background printing in IE. So, you can either change the browser settings (possible if on an intranet) OR just export your report to Excel or some other format for printing.

Answer 5

Two suggestions:

1. Color-code text in the table rows
2. Add color-coded icons to the beginning or end of the table rows

You could even incorporate these into the normal view with your background colors.