The Story

IE6: Learning to live with it

There’s been a lot of talk lately about dropping support for IE6, how IE6 should get no love at all, and the twits about IE6 hatred could fill a tome.

So after years of fighting IE6’s problems, I thought I’d seen it all. I’ve found (while teaching others) that I create my CSS and HTML to avoid IE6 issues without even thinking about it. I nest divs and watch my floats and add hacks for min-height and etc. I did everything without thinking about it.

And now for something completely different…

Then one day last year our receipt page (using the default CSS) was hard crashing IE6. Completely, utterly frozen. At the time, Luke viewed CSS like with extreme distrust. He was one of those programmers that thought design was for the birds. He kept telling me that it must be the CSS that was causing IE6 to hard crash.

I assured him, over and over, that there’s just no way CSS alone can crash a browser. It doesn’t make any sense at all. So I went through my normal battery of tests, stripping everything from the page until all that was left was HTML and CSS… And it still hard crashed.

Removing the CSS… fine. Adding the CSS back in… fail. I was shocked. I’ve seen IE6 destroy tons of CSS, but I’d never seen IE6 lock up because of CSS.

So I took some notes when it happened (linked below), but we’re blogging about it now because it showed up again in our recent release.

The Fun

There are a few different things we’ve managed to do. The following links will be rather boring if you’re viewing in anything other than IE6, but if you really want to see IE6 hard crash then fire up your VM (virtual machine) and give it a go.

  1. Crash IE6 immediately (the original file)
  2. Crash IE6 on reload (a stripped down version; for some reason it loads initially but crashes on reload)
  3. Don’t crash IE6 (clearer span removed)
  4. Don’t crash IE6, alt (_clear:inherit added to CSS)

NOTE: The CSS in all of these files is not tidied, and contains tons of stuff that is not relevant to this demonstration.

The third link above has the interesting side effect of making IE6 repeat the last 4 characters in the div. Interesting in it’s own right, but not what we’re dealing with (and covered elsewhere. The fourth link changes the element from clear:right to clear:inherit (or clear:none works as well), which also prevents the freezing.

Oddly enough, it actually takes the three elements floated left for the right floated div to cause the crash. One or two of the elements floated left don’t create any problems.

The Conclusion

There are a few other reports of IE6 crashing with HTML + CSS alone (no javascript, Flash, etc.), but is seems to happen infrequently enough that it’s still very surprising when it happens.

So, next time you do any sort of floating or clearing in IE6, make sure you test to make sure it doesn’t catastrophically fail. Or I suppose you could just ignore it, and if somebody complains you could laugh and tell them to upgrade 😉