printing graph legend

div.task_finished { background-color:#6b86a6; }
div.task_pending_execute { background-color:#93b8e2; }
div.task_cancelled  { background-color:#ff9966; }
div.task { background-color:#ffffcc; }

Now I want to print this

<div class="legend-container">
            <div class="legend">
                <div class="task_pending_execute"></div>
                <div class="legend-text">Executing</div>
            </div>
            <div class="legend">
                <div class="task_cancelled"></div>
                <div class="legend-text">Finished</div>
            </div>
        ...
</div>

For IE graph is rendered as image.

User browser set not to print background-color by default, but that's inacceptable in this concrete situation

I still don't want to subsitute 'color' div's here 开发者_JS百科by images.

What css property should I use instead?

---

You can try using a colored border, something like this:

div.task_finished { border-left:#6b86a6 solid 100px; height: 1em; }

However, I'm not sure if IE considers borders as background or foreground when printing.

[EDIT: another idea]

Another solution would be to use Unicode Block Elements and then set the foreground (text) color.

<div>&#x2588;&#x2588;&#x2588;&#x2588;&#x2588;</div>
<div>█████</div>

However, this will fail on systems without proper unicode support, or without correct fonts.

Also, it will give you little control about what is the width of the legend, because different fonts have different widths. (maybe CSS @font can help you solve this, but I'm not sure)

Finally, maybe there are visible "seams" between each character, depending on the font. (this might be "fixed" by setting a negative letter-spacing)

---

Not something you can really do anything about. Background colour/image printing is a printer option and not something you should really count on - http://css-tricks.com/dont-rely-on-background-colors-printing/