Menu
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,
436
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: -
Added an image (1px by 1px, white colour) with an absolute position at top 0 and left 0.
Set it to display none in @media screen{ .div {display: none} and display block in @media print{ .div {display: block}
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
88
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
