All geek questions in one place

White background div is transparent in IE9 preview

I have a div with black text and a white background. IE9 displays very well. However, in the print preview, the white background is transparent. Works great in Chrome, Firefox, and Safari. Any ideas?

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

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

Thanks,

Nick

+6
source share
1 answer

IE does not print background images and colors by default. There is a parameter that you can change to say print background images and web page colors. [File> Print Preview> Page Setup (Gear icon)].

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

  • Added image (1px by 1px, white) with the absolute position at the top of 0 and left 0.

  • Set to display @media {.div {display: none} and the displayed block in @media print {.div {display: block}

  • The javaScript used to set the height (your width may also be required) of the image is exactly the same 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 used this code to set the footer at the bottom of the last page of the printout. I had a footer on every page, and I had content (text), just like you did. I used a white background to hide the footer on all but the last page. HTML footer at the bottom of all HTML print pages in IE

+5
source

Source: https://habr.com/ru/post/921885/

More articles:


All Articles