From: Matt <[EMAIL PROTECTED]>
>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>
Matt, I think you are running into a couple of issues here.
As James pointe out, you won't be able to change the background position of a
non-existant background image. If your LI does not have a background associated
with it, no amount of positioning is going to move the image from the link
(which you are apparently wanting to remove for the selected LI) to the LI
itself.
You could write a selector that, in addition to the background position, also
provided the URL for the background image in that LI. Since there will be no
link in that LI, the background image for the anchor will not be there anyway.
Additionally, I'm pretty sure you are running into specificity problems, or
will if you haven't.
ul#nav-top li#t1 {anything here}
Will be more specific than
ul#nav-top .selected {something else here}
no matter how much you want it to be different. The following construction may
work, however.
ul#nav-top li#t1.selected {a bit of stuff here}
though I have a vague recollection that IE browsers (at least IE6) might have a
problem with that.
However, perhaps you can change how the beginning of the selectors are written.
Do you have more than one _set_ of LIs in your ul#nav-top? If not, even if the
IDs are needed for another reason, don't use the - li#t1 - part, and just use -
ul#nav-top .selected, - for less code.
~holly
______________________________________________________________________
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/
