Crash IE6 with Only CSS

I was recently designing and coding a new website for one of our clients. As always, I was coding it in TextMate and viewing it in Firefox and Safari for testing. I had finally come to the point where I needed to start up Parallels to view the site in Internet Explorer 6 (IE6). This is always a difficult time for me, because ten times out of ten IE6 won’t render something correctly. However, this time I was in for something completely different.

The navigation menu wasn’t displaying correctly, and when I hovered the cursor over the menu options, the browser crashed! I’ve had a lot of strange experiences with IE6 over the years, but I’ve never seen it crash with simple HTML and CSS. I wasn’t using any Javascript or embedded media, just HTML and CSS. At first I thought it was a Parallels issue, so I decided to wipe the dust off of our old IBM ThinkPad and give it a whirl. I pulled up the site, hovered over the menu options, and again, IE6 crashed!

Being the curious person I am, I decided to slowly trim and test my code to see what the culprit might be. Eventually, I whittled my way down to just an unordered list and some simple CSS. After a bunch of testing, I narrowed it down to the essential elements that will cause IE6 to crash. Those elements included:

  • DocType
  • Commonly Used CSS
  • Unordered List

DocType

Apparently, IE6 doesn’t officially support XHTML 1.1. That means that it sends it into quirks mode – which means, what it will end up looking like is anyone’s guess.

Commonly Used CSS

The CSS that was used to style the unordered list into a menu is commonly used by most standards-based designers. It involves making the list item element display inline, and making the anchor element display as a block and floating it left. This creates a horizontal list of menu items which can then be assigned more style attributes. Although you can probably alter the width and margin numbers, this is the exact CSS code that was originally used in my design (unrelated code has been removed).

body { width:755px; }
ul#nav { position:absolute; }
ul#nav li { display:inline; }
ul#nav li a { float:left;display:block;margin:0 1px 0 0;width:150px; }
ul#nav li a:hover { background:#ddd; }

Unordered List

The unordered list I used was quite simple.

<ul id=”nav”>
<li><a href=”#”>Option</a></li>
<li><a href=”#”>Option</a></li>
<li><a href=”#”>Option</a></li>
<li><a href=”#”>Option</a></li>
<li><a href=”#”>Option</a></li>
</ul>

Demo and Live Example

Download high-res QuickTime Movie

If you want to test out the demo, view the page in IE6 and move the cursor back and forth over the menu options. Sometimes it crashes immediately, other times it takes several seconds, and sometimes the hover action quits working and it doesn’t crash at all.

Caution! Viewing the demo page in IE 6 will most likely crash the browser. You’ve been warned.

IE6 Crash Live Example

Filed under: CSS, Internet Explorer, Web Browsers, Web Design