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