title: Why does Internet Explorer 8 print invisible content?
body: <p>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.</p>
  
  <p>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...</p>
  
  <p>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...</p>
  
  <p><strong>Why does IE8 print this invisible content? Is there a solution?</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div style="background-color:#999999;position:relative;border:solid 1px black;width:500px;height:500px;"&gt;     
      &lt;div style="position:absolute;width:300px;height:200px;top:5px;left:5px;border:dashed 1px #cccccc;z-index:99;background-color:white;"&gt;&lt;/div&gt;
      &lt;div style="position:absolute;width:100px;height:200px;top:100px;left:50px;border:dashed 5px #cccccc;z-index:98;background-color:white;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>