please check the HTML code below. The 3rd DIV is partially visible because it is overlayed by the 2nd (which has a white background). All good so far, everything displays correctly in both IE and Firefox.
The problem starts when I print the page. In Firefox it prints as displayed on the page. In Internet Explorer 8 it somehow prints all DIVS completely. It looks as if it applies a opacity filter on the 2nd DIV (or all) which makes the 3rd DIV completely visible…
I create a white overlay with new contents (in javascript) for a Print version of a page. Because of the issue described above it doesn’t work correctly because all content below the overlay is also printed…
Why does IE8 print this invisible content? Is there a solution?
<html>
<head>
</head>
<body>
<div style="background-color:#999999;position:relative;border:solid 1px black;width:500px;height:500px;">
<div style="position:absolute;width:300px;height:200px;top:5px;left:5px;border:dashed 1px #cccccc;z-index:99;background-color:white;"></div>
<div style="position:absolute;width:100px;height:200px;top:100px;left:50px;border:dashed 5px #cccccc;z-index:98;background-color:white;"></div>
</div>
</body>
</html>
IE has an option:
Tools / Internet Options / Advanced / Printing / Print background colours and images
which is off by default. This is why it’s ignoring your
background-colorstyles when printing.