background-color on hover doesn't work in IE 7

Forum Moderators: not2easy

Message Too Old, No Replies

background-color on hover doesn't work in IE 7

DanA

5:59 pm on Apr 16, 2007 (gmt 0)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>background-color on hover doesn't work in IE 7</title>
<style type="text/css">
.nav {
background-color: #e4edec;
width:100px;
list-style:none;
margin:0;
padding:0;
}
.nav a {
width: 100%;/*works if you remove width*/
display: block;
border: 1px solid #000;
color: #62817f;
text-decoration: none;
}
.nav a:hover {
background-color: #fff;/*works if you replace by background*/
color: #62817f; 
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">LINK</a></li>
</ul>
</body>
</html>

Is it a well known bug?

[edited by: DanA at 6:06 pm (utc) on April 16, 2007]

SuzyUK

6:26 am on Apr 17, 2007 (gmt 0)

Is it a well known bug?

Well spotted! as to a well known bug - I think it's hasLayout albeit with a twist (new cause)

it also works if you explicitly specify a background-color on the

nav a

- the width on the a is the hasLayout trigger.

As to why it works if you use

background

instead of

background-color

nav a:hover

who knows, my theory would be that background has more default values - strange hasLayout effects have often been triggered by a background-color change on hover or the lack of background-color. The "transparent" keyword value is very often not enough to stop hasLayout effects and that is the default.