Forum Moderators: not2easy
I am adding a list, the problem is that some of the items (odd) onhover change the background colour whereas with others (even) the background stays the same. All item backgrounds should change onhover. See code below:
HTML:
<div id="rows">
<ul>
<li><a href=""><span class="odd">Rome Special (Flight + Hotel)</span></a></li>
<li><a href=""><span class="even">Rome Special (Flight + Hotel)</span></a></li>
<li><a href=""><span class="odd">Rome Special (Flight + Hotel)</span></a></li>
<li><a href=""><span class="even">Rome Special (Flight + Hotel)</span></a></li>
</ul>
</div>CSS:
div#rows {
width : 500px;
background-color : #dbe5f7;
display : block;
text-decoration : none;
font-size : 95%;
}ul {
list-style : none;
margin : 0;
padding : 0;
}
.odd {
display : block;
text-indent : 10px;
padding : 5px;
}
.even {
background-color : #b6c6e1;
display : block;
text-indent : 10px;
padding : 5px;
}
#rows a:hover {
display : block;
color : #415387;
background-color: #f2f4e0;
text-decoration : underline;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"/>
<html>
<meta http-equiv = 'Content-Type' content = 'text/html; charset = ISO-8859-1'>
<meta http-equiv = 'Content-Language' content = 'en'>
<meta http-equiv = 'Content-Script-Type' content = 'text/javascript'>
<meta http-equiv = 'Content-Style-Type' content = 'text/css'>
<meta http-equiv = 'Expires' content = 'Thu, 01 Jan 1970 00:00:00 GMT'>
<meta http-equiv = 'Pragma' content = 'no-cache'>
<meta http-equiv = 'Cache-Control' content = 'no-cache'>
<style>
div#rows
{width:500px;font-size:95%}
ul
{list-style:none;margin:0;padding:0}
.odd
{background-color:#dbe5f7;display:block;text-indent:10px;padding:5px}
.even
{background-color:#b6c6e1;display:block;text-indent:10px;padding:5px}
#rows a:hover
{color:#415387;background-color:#f2f4e0}
</style>
</head>
<body>
<div id="rows">
<ul>
<li><a href="" class="odd">Rome Special (Flight + Hotel)</a></li>
<li><a href="" class="even">Rome Special (Flight + Hotel)</a></li>
<li><a href="" class="odd">Rome Special (Flight + Hotel)</a></li>
<li><a href="" class="even">Rome Special (Flight + Hotel)</a></li>
</ul>
</div>
</body>
</html>
> {width:500px;font-size:95%}
Unless an ancestor has an absolute font-size in 'px', 'pt', or some other absolute unit, font-size will change when/if the visitor changes text size in the browser. If you are relying on the text fitting into 500px, the layout may get corrupted. There are two alternative approaches: Specify everything in 'em' (preferred), or specify an absolute font-size (like font-size:15px) instead of font-size:95%.
div#rows {
width : 500px;
/*background-color : #dbe5f7;*/
display : block;
text-decoration : none;
font-size : 95%;
}
ul {
list-style : none;
margin : 0;
padding : 0;
}
.odd {
background-color : #dbe5f7;
display : block;
text-indent : 10px;
padding : 5px;
}
.even {
background-color : #b6c6e1;
display : block;
text-indent : 10px;
padding : 5px;
}
.odd:hover {
display : block;
color : #415387;
background-color: #f2f4e0;
text-decoration : underline;
}
.even:hover {
display : block;
color : #415387;
background-color: #f2f4e0;
text-decoration : underline;
}
<div id="rows">
<ul>
<li><a href=""><span class="odd">Rome Special (Flight + Hotel)</span></a></li>
<li><a href=""><span class="even">Rome Special (Flight + Hotel)</span></a></li>
<li><a href=""><span class="odd">Rome Special (Flight + Hotel)</span></a></li>
<li><a href=""><span class="even">Rome Special (Flight + Hotel)</span></a></li>
</ul>
</div>
Mark's code will work, it's the bit about redundant spans that's important.. take a look at his code again and see how he's moved the classes onto the <a>, and removed the span (which was not necessary) - this then lets you apply the backgrounds etc.. and then the
:hoverthe reason IE6 is not working for you is that IE versions less than 7 do not support :hover on anything but an anchor..<a>, but in your code you're applying the hover to the span.
hth
[edited by: SuzyUK at 3:28 pm (utc) on Mar. 15, 2008]
Suzy! You're so sharp. There's no getting anything past your sharp eyes (and keen mind).
[w3.org...]
Don't think browsers implement it (yet).
