Matt wrote:
> James,
>
> Thanks for the explanation but it doesn't work.
>
> This works, but I don't like this solution:
>
> CSS
> *******************************************************************
> ul#nav-top li#t1 a {width:56px;padding-left:5px;background-position:0 0;}
> ul#nav-top li#t1 a:hover {background-position:0px -42px;}
> ul#nav-top li#t1 .selected a { background-position: 0 -86px; }
>
> XHTML
> *******************************************************************
> <li id="t1"><a href="#" class="selected">ONE</a></li>
> <li id="t2"><a href="#">TWO</a></li>
>
>
> I'd like to have the selected class withing the LI element. So the selected
> LI will look like this:
>
> <li id="t1" class="selected">ONE</li>
> <li id="t2"><a href="#">TWO</a></li>
You can... the problem now is that you left a space between li#t1 and
.selected (thus, the rule is saying to target a DESCENDANT of #t1 with
.selected applied to it instead of a #t1 that itself has .selected)
here's complete code to do what I'm saying: (it's important to note that
unless you have other rules that require you to place the tag before
your #[id]s then you can eliminate them. so, if your page suddenly
breaks, change each #nav-top to ul#nav-top and #t1 to li#t1. However,
this is redundant coding that is adding to the file's size and thus to
page load time.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<html>
<head>
<meta http-equiv="content-type"
content="text/html;charset=iso-8859-1" />
<style type="text/css" media="screen">
#nav-top #t1 a {width: 56px; padding-left: 5px;
background-color: #0000ff;}
#nav-top #t1 a:hover {background-color: #00ff00;}
#nav-top #t1.selected a {background-color: #ff0000;}
</style>
<title>Test</title>
</head>
<body>
<ul id="nav-top">
<li id="t1" class="selected"><a href="#">ONE</a></li>
<li id="t2"><a href="#">TWO</a></li>
</ul>
</body>
</html>
--
Thanks,
Jim
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
