Thu, 15 Feb 07

Crashing IE 6 with style(sheets)

Over about the last day and a half, if you used Internet Explorer 6 to browse any of the reviews on reevoo.com, then we should apologise. It seems that, apart from breaking the layout somewhat, we’d actually managed to cause IE 6 to crash. Not cool. A concerted effort this morning got the problem sorted, but it took longer than it should’ve done, especially when you consider that about 75% of our traffic is from users of IE 6…

Anyway, with the embarrassment out of the way, I thought I’d share the remotely interesting1 findings of the investigation into the browser crash. It turns out that a combination of these three little lines of css, and any doctype declaration2, will cause IE 6 to hang while waiting for the magic Windows kiss of life.

margin-left: 240px;
margin-right: 10%;
width: expression(document.body.offsetWidth - 256);

It is not the specific values (240px, 10% and 256) in the lines above that are of interest – I was able to express and suppress the problem by altering those. Unfortunately, I didn’t spend any time trying to find the threshold of the problem, and am therefore unsure as to the reason for this behaviour.

The offending, nasty, IE hack has now been removed. In addition, the day has been spent working with the designer monkey (ahh, you can call him Adam if you like) to start tidying up the, still somewhat cumbersome, stylesheets.

For the curious, the simplest html page I could come up with that exhibits the crash behaviour in IE 6 is below.

<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -->
<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> -->
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> -->
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -->
<!-- ANY OF THE ABOVE DOCTYPES CAUSE THE PROBLEM.  NO DOCTYPE = NO PROBLEM -->
<html>
  <head>
    <style type="text/css">
      #content {
        margin-left: 240px;
        margin-right: 10%;
        width: expression(document.body.offsetWidth - 256);
      }
    </style>
    <title>testing ie6</title>
  </head>
  <body>
    <div id="content">blurgh</div>
  </body>
</html>

1 They’re really not interesting.

2 If there is no doctype declaration, the browser doesn’t crash (something to do with standards mode I believe).