external style sheet and #media print - css

Question

I am seeing inconsistent results when using print stylesheets and #media print.
When should I use either one or both?
print.css
#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%;
}
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.
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()
This is how the Aspx page looks this
<link href="Style/print.css" type="text/css" rel="Stylesheet" media="print" />
<style type="text/css">
#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;
}
}
</style>
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.