IE6 bug. Div's height increases when a:hover is triggered

Question

I have a page that there is a list of "tags", just like here in SO, and when the mouse is over it, it gets darker.

It works great with Ie7, 8, FF, Chrome, Safari etc... but IE6 has a bug that when a:hover is triggered.

The bug is that the div that those (ul li a) are contained, gets a height's increase.

the css I have is:

div.options ul.tags li a:hover
{
    background-color: #D5E4A5;
}

if I delete this style or just comment "background-color: #D5E4A5;" it doesn't happen...

any idea of how to fix it?

thanks!

EDIT: Here's a screenshot of the bug:

Answer 1

just fixed it! :D

what I had before was:

<div class="options clearfix">
    <!--content here-->
</div>

and I replaced for:

<div class="options">
    <div class="clearfix">
        <!--content here-->
    </div>
</div>

Now IE6 is happy, and I'm happy as well...

Thank you everybody for your help!

Answer 2

This is usually a border getting set that wasn't defined originally. Try setting a border on the growing DIV to the default background color. My guess is that you won't see anyting grow anymore.