For many Developers IE6 is the bane of their lives. It is awful at implementing standards, it is clunky and there are loads of bugs. The bad news is that Microsoft intend on supporting this nightmare until 2014. The good news is that the fixes for all of the common bugs are here.

HasLayout

HasLayout can be incredibly confusing when you first come across it. Every single element in the DOM will be given a value of either true or false regarding hasLayout. Essentially if an element has layout it will have the responsibility of sizing and rendering itself, if false it will rely on parent elements.

What this means to you is if an element does not have layout it could well break your page. For instance if you need to clear floated elements with the parent element, the parent will need to have layout.

The Fix

div#myElement {
	height:1%;
}

The Double Margin Bug

When you float an element and apply some margin to either the left of the right IE6 will kindly double the value you give it. Even though you could possibly just half the value in the IE6 stylesheet the preferred method is to apply display:inline.

The Fix

div#myElement {
	float:left;
	margin-right:15px;
	display:inline;
}

No PNG Alpha Transparency

IE6 will not support PNG Alpha transparency. This includes both normal images as well as background images. The fix is to set background-image to none and use a Microsoft filter as below.

The Fix

div#content {
	background-image:none;
	filter:DXImageTransform.Microsoft.AlphaImageLoader(	src="path/to/image.png", sizingMethod="crop");
}

No min-height

IE6 simply does not support min-heights. To fix this just apply a height to the value as below.

The Fix

div#content {
	height:30px;
}