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/

Reply via email to