So I was helping a buddy of mine with a recent bit of client work that he was having an interesting issue with. He had just wrapped up a CSS based site that, when attempting to print from Internet Explorer (any version) on the Windows platform, crashed the browser. Immediately, I was intrigued and went to work trying to figure out what the issue was.

The Code

It would probably be best to set this up with some sample code to give you all an idea of what was going on here.

The XHTML has the transitional DOCTYPE in effect and looks like essentially like this:

<div id=�container�>
     <div id=�banner�></div>
     <div id=�content�></div>
     <div id=�calloutcontainer�>
          <div id=�calloutleft�></div>
          <div id=�news�></div>
     </div>
     <div id=�falling�></div>
</div>

As you can see, the site is pretty straightforward in terms of the XHTML used. Now onto the CSS, which has been stripped down to just the positioning elements that are relevant to the issue at hand.

#container {position:relative;}
#banner {no specific position set}
#content {float:left;}
#calloutcontainer {float:left;}
#calloutleft {float:left;}
#news {float:left;}
#falling {margin:0 0 0 510px;}

Both #calloutleft and #news used widths and margins to help set the positioning.

Debugging the CSS

We knew that it was the CSS causing the issue because we had no issues printing after removing the link to the stylesheet. Now that we had narrowed down our suspect to the CSS we went about the task of checking the document line by line, adding in code and printing. After about an hour of this we narrowed down the problem to two separate lines of code – the float positioning for #calloutleft and #new.

When we removed those two lines from the CSS Internet Explorer printed without any problem. Put them back in and attempt to print and the browser self destructed. Obviously removing the code broke the layout in the browsers. The solution was easy enough. We simply set up IE specific CSS that used different methods of positioning to retain the integrity of the layout and still manage to successfully print the page from the browser.

Wrapping it Up

I had remembered a post from Eric Meyer some time ago, entitled When Browsers Attack. Eric’s issue was that IE was “freezing� when a certain page attempted to load. In his article, the culprit for his issue was also a float:left; used to position an element in the page. While we had similar problem spots, the end result (his freeze and our printing bomb) were vastly different.

Further research has produced no news or reports of note on the issue. There are a couple of un resolved posts on CSS-Discuss from 2002 and 2003 that bring up similar printing issues, but none that have any solid solutions or causes for the problem.

I am not sure what causes the printing issue. It must be more than a simple float declaration as it’s used further up in the cascade of the CSS. Yes, we successfully found the bug, and were able to easily remedy the issue, but we are still at a loss as to why it occurs. I’m betting that it is has something to do with a combination of the positioning elements, but cannot verify that as further testing and experimentation has produced nothing substantial.

So, consider this a bug report of sorts. Hopefully someone else may have additional information on the Internet Explorer printing problem.