IE7, line-height, and a div hover

issue with a linked div with text inside jumping in IE7

[fish4life247]

I have a div in my code that is tagged with css to have a rollover: This div contains multiple lines of text with a line-height associated with it. In IE7 when those lines are rolled over the hover attribute goes into affect but the line-height between the lines of text causes the hover attribute to go on and off. In firefox the attribute works fine. I tried blocking things but that doesn't work either.

*doc type is strict

The following is the html code:

<a href="" class="nounderline">
<div class="news">
<h2>Title</h2>
<p>text text text text text text text text text text text text text
 text text text text text text text text text text text text text text
 text text text text text text text text text text text text text text
 text text text text.</p>
</div>
</a>

and the css code

p { 
color: #000; 
font-size: 11px; 
font-family: helvetica, verdana, sans-serif, arial; 
line-height: 140%;
margin:0;
padding:0;
}
h2 { 
color: #bb0000; 
font-size: 10px; 
font-family: arial, verdana, sans-serif; 
padding: 0;
margin: 0;
text-align:left;
line-height: 150%;
font-weight:500;
margin-bottom:1px;
text-transform:uppercase;
}
.nounderline {
text-decoration:none;
}
.news {
border:none;
padding:15px;
margin-bottom:15px;
border-bottom:1px dotted #979797;
text-decoration:none;
display:block;
}
.news:hover {
background:url(images/readmorenews.gif) bottom right no-repeat;
border:1px dotted #979797;
margin:-1px 0px 0px -1px;
padding:15px 15px 30px 15px;
background-color:#fff;
text-decoration:none;
display:block;
}

I would appreciate any help anyone can give.

[swa66]

Try to only change colors in the hover. You risk triggering a redraw and then all sorts of stuff happens you don't want to happen (such as the client playing flip-flop with the redrawing as fast as it can)

To fix it for the border: keep a width on it, and don't change it, just play with colors (keep them equal to background if you don't need them in one state)

stuff that's the same in the :hover and the normal layout can simply be removed, it's redundant AFAIK)

The padding and margins: not sure what you're trying to achieve with them. But I'd be careful as changes there will trigger a redraw.

To get IE6 happy you need the hover on the <a>, so you might want to select it differently:

a:hover .news {...}