Terminally Incoherent

I had a page recently that would just not print properly in Firefox, even though IE 6 and 7 were printing it correctly. When I went to print-preview FF would tell me that there are 3-4 pages of content to be printed. However once you send the page to the printer, only a single sheet of paper would come out, with some overlapped text on the bottom. It took me a while to figure out what was happening. It turns out that FF doesn’t like absolute positioning. In my CSS I had something like:

#sidebar {
	position: absolute;
	width: 200px;
}
 
#content {
	margin-left: 200px;
	float: left;
}

The content was a big div that essentially held all the text that was to be printed. In my print.css style sheet I decided to hide the sidebar like this:

#sidebar {
	display: none;
	visibility: hidden;
}

Apparently this was not enough. I tweaked the CCS for a little bit and came up with the following solution:

#sidebar {
	position: static;
	display: none;
	visibility: hidden;
}
 
#content {
	position: static;
}

For some reason, when I only specified static positioning for the sidebar, it would still print everything on a single page. So if you are getting similar problem, explicitly define all the elements you want to print as having a static positioning. Absolute positioning of even a single element will mess up printing for all the other non-top-level elements on the page for some reason.

This entry was posted on Monday, August 27th, 2007 at 11:03 am and is filed under technology, web design. 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.

Related Posts: