title: window.print() CSS not loaded in print preview
body: <p>I need to provide option to print a part of the webpage. This was implemented using the javascript <a href="https://stackoverflow.com/questions/2255291/print-the-contents-of-a-div"> window.print()</a> answered by: Bill Paetzke.
  The pop up window opens up (this contains CSS style) and the print dialog also opens.  But the CSS style does not show up in the print.
  Tried @media =print but that also does not work.
  CSS style mainly consists of background color. One option that I got was to replace the background color with an image of 1px * 1px and repeat it. Is there any other way?</p>
  
  <p>Browser: IE7
  Code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css" media="print,screen"&gt;
  .hideMe{
  display:block;
  }
  
  .PrintClass {
  display:block;
  
  }
  .NoPrintClass{
  display:block;
  }
  &lt;/style&gt;
  &lt;script type="text/javascript"
      src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"&gt; &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
      function PrintElem(elem)
      {
          Popup($('&lt;div/&gt;').append($(elem).clone()).html());
      }
  
      function Popup(data) 
      {
  
          var mywindow;       
          mywindow = window.open('', 'mydiv','height=400,width=600,scrollbars=yes','');            
          mywindow.document.write('&lt;html&gt;&lt;head&gt;&lt;title&gt;my div&lt;/title&gt;');
          mywindow.document.write('&lt;style type="text/css" media="print,screen"&gt;.hideMe{display:none;}.NoPrintClass{display:none;}&lt;/style&gt;');               
          mywindow.document.write('&lt;/head&gt;&lt;body&gt;');
          mywindow.document.write('drop down selected value in parent: '+mywindow.opener.document.getElementById('testSelect').options[mywindow.opener.document.getElementById('testSelect').selectedIndex].text+'&lt;br/&gt;');
          mywindow.document.write('contentStarts&lt;br/&gt;');
          mywindow.document.write('  using jquery:  '+data);
          mywindow.document.write(' using javascript: '+mywindow.opener.document.getElementById('mydiv').innerHTML);
          mywindow.document.write('&lt;br/&gt;contentEnds'); 
          mywindow.document.write('&lt;br/&gt;');                                     
          mywindow.document.write('&lt;/body&gt;&lt;/html&gt;');        
          mywindow.document.focus();
          mywindow.document.close();      
          mywindow.print();             
          return true;
      }
  
     &lt;/script&gt;
  &lt;/head&gt;
  
  
  &lt;body&gt;
  
  This is not be printed&lt;br/&gt;
  &lt;div id="mydiv"&gt;This content is to be printed&lt;br/&gt;
  &lt;div class="hideMe"&gt;&lt;select id="testSelect"&gt;
      &lt;option&gt;1&lt;/option&gt;
      &lt;option&gt;2&lt;/option&gt;
      &lt;option&gt;3&lt;/option&gt;
  &lt;/select&gt;
  &lt;/div&gt;
  &lt;br/&gt;
  This will also be printed 
  &lt;br/&gt;print  bgcolor
  &lt;div style="background:red;" class="PrintClass"&gt;print&lt;/div&gt;&lt;br/&gt;
  &lt;div style="background:green;" class="PrintClass"&gt;print&lt;/div&gt;&lt;br/&gt;
  &lt;div style="background:red;" class="NoPrintClass"&gt;not to print&lt;/div&gt;&lt;br/&gt;
  &lt;div style="background:green;" class="NoPrintClass"&gt;not to print&lt;/div&gt;&lt;br/&gt;
  &lt;div style="background:red;" class="PrintClass"&gt;print&lt;/div&gt;&lt;br/&gt;
  &lt;div style="background:green;" class="PrintClass"&gt;print&lt;/div&gt;&lt;br/&gt;
  &lt;br/&gt; print image
  &lt;div style="background-image:url('red.png');background-repeat:repeat;" class="PrintClass"&gt;print&lt;/div&gt;&lt;br/&gt;
  &lt;div style="background-image:url('green.png');background-repeat:repeat;" class="PrintClass"&gt;print&lt;/div&gt;&lt;br/&gt;
  &lt;div style="background-image:url('red.png');background-repeat:repeat;" class="NoPrintClass"&gt;not to print&lt;/div&gt;&lt;br/&gt;
  &lt;div style="background-image:url('green.png');background-repeat:repeat;" class="NoPrintClass"&gt;not to print&lt;/div&gt;&lt;br/&gt;
  &lt;div style="background-image:url('red.png');background-repeat:repeat;" class="PrintClass"&gt;print&lt;/div&gt;&lt;br/&gt;
  &lt;div style="background-image:url('green.png');background-repeat:repeat;" class="PrintClass"&gt;print&lt;/div&gt;&lt;br/&gt;
  &lt;text&gt;some text
  &lt;div style="position:relative;"&gt;
  &lt;img src="green.png" width="100px" height="100px" value="abcd"&gt;dfads
  &lt;div style="postion:absolute"&gt;wpeoriu&lt;/div&gt;
  &lt;/div&gt;
  &lt;/img&gt;
  &lt;/text&gt;
  
  &lt;/div&gt;
  
  &lt;div&gt;This will not be printed.&lt;/div&gt;
  &lt;br/&gt;
  &lt;div id="anotherdiv"&gt;Nor will this.&lt;/div&gt;
  
  &lt;input type="button" value="Print Div" onclick="PrintElem('mydiv')" /&gt;
  
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p></p>