If you don’t want to create an entirely new alternate style-sheet just for print media, there is an easier way to do it.
I had a small adjustment I needed to make for printing a page on my site, and rather than creating an entirely new (duplicate) alternate style-sheet just for print media, I discovered a neat little CSS method you could use to put the print style right in with the main style.
It’s the @media print CSS method.
My original CSS code was as follows:
#dragLayer {
height:255px;
left:72px;
overflow:hidden;
position:absolute;
top:0px;
width:255px;
z-index:100;
}
For some reason the “Drag Layer” div was appearing over-top the image contained in a sub-div. I’m using scriptaculous to display a blown up version of an image when you hover over a smaller version of the image. But when you print, the smaller version of the image doesn’t show up. Making the dragLayer div display equal to none didn’t work for some reason. So instead I defined a print stylesheet with the dragLayer div’s height and width equal to 0. I didn’t want to have to make an entirely new duplicate stylesheet just for this one little CSS change for printing, so after some exploring I found the @media print css directive. Here is the style I ended up with:
#dragLayer {
height:255px;
left:72px;
overflow:hidden;
position:absolute;
top:0px;
width:255px;
z-index:100;
}
@media print{
#dragLayer{
height: 0px;
width: 0px;
}
}
This little trick was mentioned in passing in page 210 of Elizabeth Castro’s
HTML, XHTML, and CSS, Sixth Edition (Visual Quickstart Guide)
About the Author
