title: external style sheet and @media print
body: <p>I am seeing inconsistent results when using print stylesheets and @media print.
  When should I use either one or both? </p>
  
  <p>print.css</p>
  
  <pre><code>#rptViewer 
  {
      display: none;
      visibility: hidden;
  }
  
  #printReport
  {
       visibility: visible;
                  height: 100%;
                  font: small;
                  background: #eee;
                  position: relative;
                  margin-left: 0;
                  width: 100%;
                  display: table;
                  margin: 0 auto;
                  overflow-x:scroll;
                  white-space: nowrap;
                  overflow:visible !important;
                  border : solid 2px;
  }
  html, body
  {
      height:100%;
      width:100%;
  }
  </code></pre>
  
  <p>This external linking of css print stylesheet cuts of the report and just shows a scroll bar or image and does not print the entire page.  If I inclued @media print in the aspx page, it prints it correctly(does not cut off the report and no image like scrollbars). What is the difference between the two approaces. Also does @media print work in all versions of IE. The client uses IE 8. </p>
  
  <p>If i comment out the style type =text/css and @media print chunk, its all  messed up and prints only half of the page. 
  I am using window.print()</p>
  
  <p>This is how the Aspx page looks this </p>
  
  <pre><code> &lt;link href="Style/print.css"  type="text/css" rel="Stylesheet" media="print" /&gt;
  &lt;style type="text/css"&gt;
          @media print
          {
             html, body
              {
                  height: 100%;
                  width:100%;
              }
  
              #rptViewer
              {
                  display: none;
                  visibility: hidden;
              }
  
  
              #printReport
              {
                  visibility: visible;
                  height: 100%;
                  font: small;
                  background: #eee;
                  position: relative;
                  margin-left: 0;
                  width: 100%;
                  display: table;
                  margin: 0 auto;
                  overflow-x:scroll;
                  white-space: nowrap;
                  overflow:visible !important;
                  border : solid 2px;
              }
  
              body
              {
                  background: white;
                  font-size: 12pt;
                  margin: 0px;
  
              }
          }
  
      &lt;/style&gt;
  </code></pre>
  
  <p>There are 2 approaches here: one is the external css and the other is @media print.
  If I include the @media print in the aspx file, it prints like this and does not cut off the report. </p>