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>
> Matt wrote:
> > I know that. I just gave it as an example.
> >
> > ul#nav-top-text li#t1 .selected {background-position:-0px -86px}
> > <li id="item1"><a href="#" class="selected">HOME</a></li>
> >
> > With class .selected within the <a> it works fine. However, I am looking
> > for a solution with the least amount of code.
> >
> > Matt
> Just change in your original post:
>
> ul#nav-top-text .selected {
> background-position:0 -86px;
> }
>
> to
>
> ul#nav-top-text .selected a {
> background-position: 0 -86px;
> }
>
> What you were previously telling the browser was:
> "Move the background applied to the .selected (li) element down 86 pixels."
>
> And the browser said:
> "There is no background on the li element, so, I'm all good here."
>
> Now what you'll be telling it is:
> "Move the background applied to the a element of the .selected element
> (li) down 86 pixels."
>
> And the browser will say:
> "Oh, that's the active portion of the background image right? Here ya go!"
>
> That's why it works when you change where the class is declared because
> you're changing which element it's applied to. But you can do the same
> thing (without getting classitis) by just placing the a after the
> .selected in your declaration.
>
> --
> 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/
