CSS for Print

For a recent project, Georgia Gulf, I came across a strange issue when printing any page from the site in IE. The header and top navigation were showing up just fine but once we got to the meat of the site, a three column layout for content, nothing was showing up. All three columns had simply disappeared.

Since the layout had already been tested and approved for all major browsers, PC and Mac, I didn’t want to make any changes to our main stylesheet, site.css. So instead, I decided to utilize a print stylesheet to troubleshoot this issue.

Print stylesheets are stylesheets that are only used for print. This can be an important tool to modify the existing layout for print without having to create an entirely new template. To add a print stylesheet to your site, you simply need to add a new stylesheet and specify that the media is print. For example, I added the following in the head of my site:

<link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />

One important thing to note is that our main stylesheet, site.css is still used during print. The purpose of the print stylesheet is to override styles already set in site.css or to add new ones in order to create your printable layout.

Our client did not want to create a different layout for the print so my task at hand was not to modify the appearance at all, but simply to fix the disappearing content bug. After extensive testing, I found that floated elements (the three content columns) whose height extends beyond one printed page do not always play nice with relative positioning. The outer container holding all three columns was positioned relatively so IE had trouble rendering the height of each column and the result was my disappearing content.

The solution was to override the relative positioning set in site.css by simply adding the following to our print.css.

“position: absolute” now overrides the “position: relative” setting in site.css to ensure that this container is absolutely positioned for print. Once I added this the IE print bug was resolved and my content was displayed. However, since we have changed the positioning, the container was not showing up in the same position as the browser. To fix this I forced the container to show up where I wanted it by using top:125px. Finally, our printable page displays as expected.

Note: I also made another important revelation while debugging this issue. Our beloved Firefox also has some rendering issues *gasp* in print preview mode. In Firefox print preview, some of the content, even content contained within the same div element, was overlapping. However, this issue only occurs in print preview and does not affect the way your pages actually print.