Chomper Stomping

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), but Elizabeth claims it isn’t as widely supported or well known as the other standard methods of doing this. In all of my testing so far, however, it looks like it works in all of the newest versions of three of the major browsers (FF, IE & Chrome).

Tags: Alternate StyleSheet, CSS, Programming

This entry was posted on Monday, June 1st, 2009 at 11:45 am and is filed under programming concepts, tutorial. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.