Internet Explorer 6 Bugs

Yes, we all know by now that Internet Explorer 6 is the sole cause of everything wrong in the world today. Though one of the most CSS compliant browsers when it was released (mind you, that was 8 years ago!), it is now one of the most frustrating browsers to develop websites for. One of the most unfortunate things about Internet Explorer 6 is the fact that it still retains almost a 20% market share. Why are 20% of web users are still using it! Why!?

Below you will find only some of the major bugs that IE6 gives home too. While most have workarounds, there are some that don’t.

Ah yes, the double margin. Perhaps the most notorious bug to come from IE6.

The Problem

The bug surfaces when you float an element and give it a margin on the same side as the float. What IE6 does is double the margin on the side you specified.

1
2
3
4
5

#div {
  float:left;
  width:100px;
  margin-left:100px;
}

The Fix

The fix for this is quite simple. Simply declare the element’s display attribute as inline.

1
2
3
4
5
6

#div {
  float:left;
  width:100px;
  margin-left:100px;
  display:inline;
}

The reason this works is because in standard compliant web browsers, display:inline is ignored on float elements.

The Problem

Another huge problem in IE6. The problem here arises with a block element that has both padding and a border.

1
2
3
4
5
6

#div {
  display:block;
  width:100px;
  border:2px solid #FFF;
  padding:5px;
}

What should happen is the padding and border be added to the width, making the width of the div 114px. But instead, IE6 subtracts the padding and border from the width, making the width 100px. While I may have to side with IE6 here that the border and padding shouldn’t be added the width of an object, the W3C standards state that they do add to it.

The Fix

Unfortunately there is no fix to this bug. Either have no padding on block elements that have a border, or fix it in in a separate stylesheet nested within a conditional statement:

1
2
3
4
5
6

<!--[if IE 6]>
<style type="text/css">
  #div {
    width:114px;
  }
<![endif]-->

The Problem

The min-height and min-width attributes are really handy attributes. Too bad IE6 doesn’t support them. Actually, it not only supports them, it just out right ignores them! How rude!

1
2
3

#div {
  min-height:500px;
}

The above css will work IE7+ and all other browsers, but IE6 and below ignores it, defaulting the height to ‘auto’.

The Fix

Here is a css hack that not only hacks IE6, but will work regularly in all other browsers. So no need for conditional statements here!

1
2
3
4
5

#div {
  min-height:500px;
  height:auto !important;
  height:500px;
}

This code takes advantage of another IE6 bug, the !important declaration. The bug in IE6 is, the property with the !important declaration can be overridden within the same rule set. So above, height:500px will override height: auto !important in IE6. Interesting exploiting a bug to fix another bug, isn’t it?

The same thing happens with max-height/width as min-height/width, IE6 simply ignores it. The workaround is a little more complicated, but still get’s the job done. It relies on a javascript expression:

1
2
3

#div {
  height: expression(document.body.clientHeight > 499 ? "500px" : "auto");
}

While IE6 does support the css declaration of :hover for <a> elements and it’s nested elements as well, it doesn’t on any other element such as <div>, <li>, ect. There isn’t any fix for this unfortunately, the only ones I’ve found are IE7 and Whatever:hover, but I’ve never used them so I can’t say how well they work.

The problem

While IE6 and below does support PNG images, they don’t support any sort of transparncy, and you end up with a baby blue background added to you image.

The Fix

There are several scripts that have been made to deal with this problem.

iepngfix

If you’re using jQuery with your site, that I’d recommend this plugin: jQuery pngFix

All these bugs are either have a fix or a side-step, but they will get you if you don’t do your testing. If you can’t take IE6 anymore, I suggest joining the revolution!