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.
September 27th, 2006 at 6:22 pm
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.
September 27th, 2006 at 7:35 pm
Ben, it’s entirely possible that it’s related — I really don’t know. I just couldn’t believe it when it happened today.
September 28th, 2006 at 4:02 am
[...] ¿Cansado de que tus estadÃsticas sea una muestra de que IE se come el mercado? ¿Cansado de tener que diseñar para varios navegadores haciendo parches sobre los parches? Esta es la solución, un poco de CSS y verás el cielo abierto. [...]
September 28th, 2006 at 9:41 am
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.)
September 28th, 2006 at 10:13 am
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.
September 28th, 2006 at 11:23 am
Yep, that did it.
October 2nd, 2006 at 5:27 am
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.
October 17th, 2006 at 4:48 am
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.
October 26th, 2006 at 9:58 pm
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.
November 3rd, 2006 at 1:14 pm
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
December 29th, 2006 at 3:22 pm
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.)
February 6th, 2007 at 4:04 am
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 ^^
May 31st, 2007 at 6:17 pm
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; }
August 8th, 2007 at 2:52 am
[...] list crash, example longer than 1 line: Source, the only one btw. that does not always work, you have to mouse over or click the first item of the [...]
August 8th, 2007 at 6:36 am
Your live example failed to crash my IE6. You think that’s related to my OS lang (Trad-Chinese)?
August 31st, 2007 at 12:02 am
[...] Ordered list crash (exemplo maior que 1 linha): Fonte [...]
September 25th, 2007 at 2:09 pm
[...] It’s pretty easy to break IE6. A simple line of Javascript does the trick and it’s not only limited to scripting. CSS can also crash the browser rather easily. [...]
October 10th, 2007 at 12:17 pm
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.