IE6 common bug fixes
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;
}
(1) Comments
David
Thanks, I have been looking for the solution to the HasLayout issue all morning!!
Craig
You are welcome David :)
Have your say