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

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

Get results. Get paid. Get with Raven. Free 30-day trial.

Tell us what you think

http://blog.baybox.net Ben

I’m not sure if it’s the same you’re seeing, but Eric Meyer discovered similar problem awhile back.

http://meyerweb.com/eric/thoughts/2004/09/16/when-browsers-attack/

It’s related to IE rendering engine.

I don’t know if there’s a fix for this.
http://www.sitening.com/ Jon Henshaw

Ben, it’s entirely possible that it’s related — I really don’t know. I just couldn’t believe it when it happened today.
http://adamv.com Adam Vandenberg

It doesn’t crash IE6 here, though the HTML area becomes unresponsive. I can still use the menus and toolbar, though.

I’m on version 6.0.2900.2180.xpsp_sp2_gdr.050301-1519.
(Whatever that means.)
http://www.sitening.com/ Jon Henshaw

Adam, try moving your cursor quickly across the menu options — possibly even trying to click one of the links — and it should crash. It behaves differently every time. Either the hovers quit working and it doesn’t crash (at which time you should refresh and try again) or it crashes.
http://adamv.com Adam Vandenberg

Yep, that did it.
Chris Smith

Yet another crazy hasLayout bug.

Although, I am not sure how you could possibly expect not to see some problem when you nest a hasLayout element within a non hasLayout element.
http://www.e-connected.com Rick Huby

You may also find that resizing the text causes the crash. I have this going off on a site I am developing at the minute and it appears to be the width value I am giving a div.

No idea why, but then IE6 doesn’t normally try and make sense.
http://www.tinyk.com Kathy

I had the exact same problem, but without the unordered list.
Code that crashed:

…
etc. etc.

Change that “fixed” the code:

…
etc. etc.

No idea why it worked, but again I have no idea why it crashed IE 6 in the first place. Hope that helps someone out in the future.
http://www.jin-park.com Jin Park

I had a similar problem with floating divs causing IE to crash. It looks like there might be a fix. I ended up floating div’s inside a parent div and IE has been playing nice so far. The CSS is below:

.foo div {
display: block;
}
/* keeps IE from crashing */
.foo div div {
float: left;
}

also, I tested out the version ie6-crash-css and changed the CSS a bit and added a parent div around… here’s the code:

index

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

Option
Option
Option
Option
Option
hyrcan

For more fun IE crashes and lock ups… apply the following to the unordered list in the main post and you’ll be able to amaze your friends by locking up Explorer (desktop included) by resizing the window to narrow.

a { white-space: nowrap; }

li { padding: 10px; display: inline; position: relative; }

(the padding could be padding-left or padding-right, just as long as there is padding on one of the sides on either the li, or the A tag.)
Tommy

I just had a similar bug causing either crashes or hangs.

Funny enough it did not involve neither unordered lists or paddings. It was simply a relative div for the main site, in which several normal floated container divs resides.

One of these was continuously causing the bug. The buggy div had an explicit height and width, and the width was to span the whole of the outer container. At the same time it had a little background in it. Before crashing the symptoms upon refreshes would be flickering and 99% of the time an invisible box.

I read this article and a few more, but none of them seemed to help. One of the above replies suggested an extra non floated div with display:block; around the floated one. That didnt work for me. However, as i was testing i removed the styles completely from the outer div and what do you know, it worked.

So:

div#somecontainer {}
div#somecontainer div
{
float:left;
width:770px;
height:20px;
background:transparent url(“../../img/bg.gif”) repeat-x bottom;
}

Happy bug hunting ^^
http://www.thinkpod.net Roger

I don’t think it’s ever good practice to stick floats in inline elements. I gave up doing that ages ago after encountering similar issues or very strange display issues in Opera with inline elements containing floats.

I’d recommend doing this from now on to avoid any issues:

ul#nav li { float:left;width:150px; }
ul#nav li a { float:left;margin:0 1px 0 0;width:150px; }
Brian

Your live example failed to crash my IE6. You think that’s related to my OS lang (Trad-Chinese)?
Pete

We are running into IE 6 crashing with our application as well. However it is not crashing at all with IE 7. Is this consistent with what you all are experiencing? Isn’t there an IE 6 patch that provides more stability yet? Thanks in advance for any feedback.
http://createanevent.net Maria

Hey – the URL i’ve included is a site I offered to develop for a friend’s company. I’ve had plenty of nightmares including a text wrap based on the design (which i did not do)…anyways, the site createanevent.net is working in all browsers (Firefox 2.0, 3.0; Safari; IE7) for Mac and windows and now its crashing in IE and i want to kill it. I know their is a problem with the pngs in IE6 i need to fix that but it never caused it to crash before .. NOW i think the problem is my unordered list which i used for the navigation…when you rollover the links it crashes .. has anyone figured out a way around this? it driving me crazy..not to mention who the hell still uses IE, let alone IE 6!! …anyways any feedback would be awesome my email is mmctighe@gmail.com

thanks thanks