buckyschwarz.net

At work, I’ve been working with a user who needs a few certain pages on the site I’m developing to be printer friendly. These pages are usually ones that display data in tables with a dark blue/light blue zebra stripes. All the pages of the application (these table pages included) have a two-column fluid layout with the site navigation occupying the left column. Obviously, for printing tabular data, the navigation need not be displayed, nor do any kind of form controls that might be used for searching for particular data in that table, so obviously, those should be disabled in the print stylesheet.

So, for the first time ever, I wrote up a stylesheet with the media type set to print. I’ve just never needed to print anything from a website before. So I wrote up a stylesheet with the media type set to print. I just set the display properties of elements I didn’t want to show to none and went about testing it. During testing, I kept running into a problem where the left column, which should have been hidden, would still be causing the center content column to float right. The navigation menu wouldn’t be there, but the container the navigation menu lived in was still there, even though its border and content were hidden. This stumped me for a good day and a half, and after hitting my head against my cubicle wall I finally decided to try setting the media type of the main stylesheet of the app to screen. This solved every problem I had and now the tables are printing beautifully.

The moral of the story: Always set the media types of your stylesheets. It’s a good idea and a good way to add semantic meaning to your header files, and also, all the cool kids are doing it these days.