IE6’s :hover Padding Bug

It’s the browser that keeps on giving. Bugs that is. If your a web developer, you are probably familiar with the large number of quirks that are present in Internet Explorer. Especially in IE6. Seven years later and we are still finding bugs. Many of them are documented well on the web and some are not. Like the one I ran into recently. I can understand why this hasn’t been written about before. It’s is a bit hard to flush out. In order to reproduce the bug, the conditions need to be just right.

Here is the markup for this example:

<fieldset class="container">
<div class="innerfloat">
<a href="#">Link</a>
<div class="floatright">Right</div>
</div>
</fieldset>

and the stylesheet to accompany it.

fieldset.container{
padding-top:20px;
}
.container div.innerfloat{
float:left;
}
.container div.innerfloat .floatright{
float:right;
}
.container div.innerfloat a:hover{
background:red;
}

Take a look at the result in IE here and mouse over the link. What happens here is that IE recalculates the layout of the box when you mouse over the link and in this case, gets it wrong. IE seems to get confused and thinks it needs to apply any padding thats on the top of the container, on the bottom of the container. ARRG! It seems that anything that makes IE rethink about the container layout will make the bug go away. As far as I can tell, these are the requirements to repro this bug:

• A container with the ‘hasLayout’ property set to true. That includes elements that have ‘hasLayout’ by default listed here or any element that has any of these css proporties. This element must have top padding applied to it.
• Within the container, a element that is floated either left or right.
• Within that element a link with a hover style other then ‘color’ and an element that is floated right.

What is the solution? Unfortunately this bug isn’t one that can be fixed using The Holy Hack. If anything, it is part of the cause of the bug in the first place. The best thing to do is to simply avoid it all together by taking any of the items above out of the equation. You can reset the ‘hasLayout’ of the container or remove the top padding on the container and use top margin on the innerfloat instead. Maybe one of those floated elements don’t need to be floated. There are many ways to go about squashing this bug. Out of curiosity, I contacted John at positioniseverything.net to see if this was a known bug. He said that he has seen variants of this bug before, so it is possible that you might find this again in other circumstances. When you do please let me know!