Geek Answers Handbook

IE6 error. Div height increases when triggered: hover

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

It works fine with Ie7, 8, FF, Chrome, Safari, etc., but IE6 has an error when: hover fires.

The error is that the div that contains those (ul li a) gets an increase in height.

I have css:

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

if I remove this style or just the comment "background-color: # D5E4A5;" this does not happen ...

any idea how to fix it?

thanks!

EDIT: here is a screenshot of the error:

alt text http://i38.tinypic.com/28bvhxf.jpg

+5
source share
7 answers

just fixed it !: D

what I had before:

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

:

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

IE6 , ...

!

+3

, . DIV . , .

+1

, , , ( ?) , , 1px .

, , , , !

0

, , . , , , . :

? CSS.

0

div ? , .

0

, ? , , : , ?

HTML, , - .

<!-- 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>

, , - , mercator, .

EDIT: , line-height div.options.

EDIT 2: , , , , position:relative; zoom:1; (, , , !). ?

3: googling , . , , !

0

. , , , hasLayout , , - , A . , , - : -, .

, , :

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

CSS:

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

, clearfix CSS IE6, , , , IE6 .

0

More articles:


All Articles