<link rel="stylesheet" type="text/css" href="/css/master.css" media="screen">
<LINK rel="stylesheet" type"text/css"
href="/css/print.css" media="print">
In the print media stylesheet I defined the logos, navbars etc to not display like this:
DIV.header {
display: none;
}
I also defined a print-only class for items that only display on print media.
DIV.print-only {
display: inline;
}
The print-only class should be defined in the screen media css file as display:none.
The other thing I did was to set a fixed width for some tables so they would fit in an 8 1/2 x 11 portrait page.
TABLE.full-width-table {
width: 670px;
}
For the screen stylesheet that table is defined as
TABLE.full-width-table {
width: 800px;
}
width:100% would be a better choice, but for this site, didn't work out.
Resources:
Eric Meyer at A List Apart: http://www.alistapart.com/articles/goingtoprint/
More from Eric Meyer: http://www.meyerweb.com/eric/articles/webrev/200001.html