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

Answer 1

I think I ran into this once, and what was happening was that the borders were being modified (or was it the margins?) I ended up copping out, and just giving the problematic elements a transparent border of 1px, and calling it a day.

I really doubt this will turn out to be your solution, but I'm hoping it'll give you some idea in which direction to look in!

Answer 2

I've had that happen to me as well, but I can't remember where that was exactly. I think I did solve it, but I'm not entirely sure how anymore. I can think of two things:

1. Give the element "layout". I tend to do that with zoom: 1.

2. Add vertical-align: top to either the a or li element.

Could you give a more complete code example? I can't reproduce it with just that CSS.

Answer 3

Did you specify the height for that div explicitly? If not, setting the height might make this go away.

Answer 4

Are the tags located in a place where you could give them background color all of the time? If so, does setting their background color when :hover is not activated still cause their height to change?

As a note, I can't reproduce this given HTML matching the rule you described, so the problem may be coming from somewhere else higher on the page.

<!-- This does not display the described behavior -->
<div class="options">
  <ul class="tags">
    <li><a href="#">c++</a></li>
    <li><a href="#">not-programming-related</a></li>
    <li><a href="#">cheese</a></li>
    <li><a href="#">barnacle</a></li>
  </ul>
</div>

The best thing I can suggest is to do what mercator said and give the element layout.

EDIT: Just a shot in the dark, but you may want to try setting a value for line-height on div.options.

EDIT 2: After seeing your screenshots I recall that I have had this problem at work before, and the fix in my case was to add position:relative; zoom:1; to the container (or maybe the links, I forget!). Try that?

EDIT 3: After googling for some solutions, you may want to try setting the height if your container explicitly. If this doesn't work, I have no idea what to do!

Answer 5

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.

Answer 6

Hi everybody, 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 7

I have this exact problem as well. The trigger is definitely the background color on hover, but the usual solutions of giving the parent hasLayout don't work, I think because of nesting the A tags inside other tags. From what I ended up doing, your solution of nesting the clear fix is the right logic: separating the offending element, parent and clearing objects.

The solution I did was the following:

<div class="options">
<!--content here-->
<!--[if lte IE 6]><div class="ie6clear"></div><![endif]-->
</div>

With the following CSS:

.ie6clear{ clear:both; height:0; overflow:hidden; }

This way the clearfix CSS is only applied for IE6, highlights what the extraneous markup is, and makes it easy to remove when IE6 is no longer supported.