View Full Version : IE7 Print/Print Preview Crashes Due to CSS Stylesheet Media Types

10-13-2009, 07:28 PM
This may be old news for people around here but since it's the first I've heard of it I thought I'd share and possibly save someone else some headaches.

Apparently, when using multiple stylesheets on a page (one combined stylesheet for screen/projection/handheld/etc. and another for print) you can make IE7 go crazy and perhaps create a memory leak on the user's machine.

I found this out the hard way like so:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<title>Some Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" media="all" href="/css/style.css" />
<link type="text/css" rel="stylesheet" media="print" href="/css/print.css" />

The first stylesheet is very long and not terribly interesting, but this was ALL there was to the print stylesheet:

/* Remove unwanted elements */
{display: none;}

/* Ensure the content spans the full width */
body, #wrapper, #main, #content {background:#fff;width:98%;/*margin:0;float:none;*/}

#wrapper {border-top:1px solid #000;}

/* Change text colour to black (useful for light text on a dark background) */
.lighttext {color:#000;}

/* Improve colour contrast of links */
a:link, a:visited {color:#781351;}

This code will work fine in FF3 but in IE7 (and perhaps other versions - I haven't tested yet) the print preview page count just keeps building indefinitely without showing any page content. If you try to just print without previewing the same thing happens, basically - you just get a never-ending page spooling being sent to the printer. Since the spool never ends the print job never starts (thankfully). My whole system slowed down until I restarted the browser so I think there was a memory leak in there even after closing the tab for the page I tried to print.

For some reason the media="all" and the subsequent media="print" have some sort of battle royale and the print spooling just loops forever. Even removing the media type from the first stylesheet won't help. You have to change the media type for the first sheet to something OTHER than "all" (for instance, "screen" or "handheld"). Then - if you and leave everything else alone - things work just fine.

I narrowed it down to the problem being an added border-top:1px solid #000; to my wrapper div in the print.css file. If I set the first stylesheet back to media="all", removed the border style from the print stylesheet, and left absolutely everything else alone then there was no conflict at all.

I'm not sure yet whether the problem was adding a top border to that particular item after making certain contents display:none; or if it has to do with the position of this element in the page or what. For all I know, adding padding-top:1px; to the wrapper might generate the same problem - I don't have time to test so thoroughly right now.

Just be aware that using a print stylesheet can make your page unprintable and generate fatal browser errors in at least IE7 so test with care!

After further testing I find that adding overflow:visible; to the body, #wrapper, #main, #content section of the print stylesheet also fixes the looping problem...