7

I have a div with black text and a white background. Displays just fine in IE9. However, in the print preview the white background is transparent. Works fine in Chrome, Firefox and Safari. Any ideas?

The link below shows the page. Display is fine, but the white box in the lower right corner of the map has a transparent background in print preview.

http://www.mycoursewalk.com/course_walk/print/426

Thanks,

Nick,

fnllc
  • 3,047
  • 4
  • 25
  • 42

1 Answers1

6

IE, by default, doesn't print background images and colours. There is a setting that you can change to say print background images and colours of the web pages [File> Print preview> Page setup (Gear icon)].

I was in a similar situation, and I didn't have control over client's browser settings. After trying many other ways, I ended up using the following logic: -

  1. Added an image (1px by 1px, white colour) with an absolute position at top 0 and left 0.

  2. Set it to display none in @media screen{ .div {display: none} and display block in @media print{ .div {display: block}

  3. Used javaScript to set the height (in your case width may also be needed) of the image exactly as the height of the div where the text was: $('#whiteBg').height($('#content').height());

html:

<body>
    <div id="wrapper"> <!-- not necessary -->
        <img scr="./img/white.png" id="whiteBg" />
        <div id="content">
            <!-- content here -->
        </div>
    </div>
    <div id="footer">
    </div>
</body>

css:

@media screen {
    #whiteBg {
        display: none;
    }
}

@media print {
   #whiteBg {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1; //to send it to the background
   }
}

jquery:

 @('#whiteBg').height(  $('#content')).height()  );

I was using this code to set the footer on the bottom of the last page of the print out. I had footer on every page, and had content (text) on top of it, just like yours. I used white background to hide the footer on all but last page. HTML footer on bottom of all pages of HTML print out in IE

Community
  • 1
  • 1
MIWMIB
  • 1,407
  • 1
  • 14
  • 24
  • IE does not support nested media rules according to this page: http://caniuse.com/#feat=css-mediaqueries . Or have I misunderstood something? – Rauni Lillemets Dec 02 '15 at 12:00
  • Here, I'm not using CSS3 media queries. I'm only using CSS2 media types, which is supported by IE 8. http://www.w3.org/TR/CSS21/media.html – MIWMIB Dec 04 '15 at 00:06
  • 1
    Nested media queries would be like the example in this answer http://stackoverflow.com/a/16114118/1378980. – MIWMIB Dec 04 '15 at 00:09