IE remove colors for web page when printing.

Question

HI, I have a website with background colours which are important at the time of printing, but IE removes all colours from page. I know there is some settings to disable this on IE, but I can not rely on users to get into IE settings to disable this option from IE.

Is there any way to disable this from my web page, or some way arround?

Thanks in advance.

Answer 1

You cannot modify the browsers settings from within your code (think of the security-implications). Your users will have to explicitly allow background colors/images, or you would have to provide them an image to print instead. Another option is to provide a print-sheet that uses completely different styles and does away with your reliance upon a background color/image.

Answer 2

The default setting in a browser is to not print the background. Most of the people (99.99%) don't even know they can set theire browser to print the backgrond.

You could supply a PDF file for printing. This PDF can be generated with a Wordprocessor or DTP application.

Answer 3

Instead of using background colors, you can use a 1x1 pixel image of the chosen color, which is scaled to fill the element you wish to color. You can do this using css-styles:

.background {
  float: left;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

<table>
<tr>
  <td>Test</td>
  <td>
     <img class="background" src="blue.png">
     Colored element
  </td>
</tr>
</table>

Answer 4

You can't change the user's settings, but if it's really important and you want to put in the extra work you can use images, which will print (in IE and FF at least). You can create a print stylesheet that will float content over solid color images.

I've had to do this before for things like headers and footers, it's a very ugly hack and it can be frustrating especially if you need tiling backgrounds, but it works.

Answer 5

Just to add to what Jonathan said:

<link rel="stylesheet" type="text/css" media="print" href="print.css">

And define the 'print.css' how you want it to look when you print.