The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Image sprite CSS question
Exclusif
post Jun 11 2012, 02:53 AM
Post #1





Group: Members
Posts: 1
Joined: 11-June 12
Member No.: 17,250



Hi,

I have a nav menu with image sprites that is not behaving exactly the way I want. I'm using wordpress with skeleton theme. What I want is for #menu-item-131 to display a different image sprite from the rest of the navigation. Inspecting with firebug reveals that as of now #menu-item-131 takes its style from #navigation ul li a. I've tried a lot of different things, even moving all navigation css except for #menu-item-131 to the non-child theme css file, but no luck. Below is the navigation css code.

Would really appreciate some help with this.

Thank you.

/Isak


CODE
#navigation {
    margin-bottom: 0px;
    clear: both;
    height: 40px;
}

#navigation ul {
    width: 100%;
    background: url(/wordpress/wp-content/themes/skeleton_childtheme/bilder/nav_bg_white.png) repeat-x scroll 0 -80px #CCCCCC;
    -moz-border-radius: 10px 10px 0px 0px;
    -webkit-border-radius: 10px 10px 0px 0px;
     border-radius: 10px 10px 0px 0px;
    border-top: 1px solid #AFAFAF;
    border-right: 1px solid #AFAFAF;
    border-left: 1px solid #AFAFAF;
    position: relative;
    height: 40px;
    behavior: url(/wordpress/wp-content/themes/skeleton/PIE.php);
}

#navigation ul ,
#navigation ul li {
    float: left;
    height: 40px;
    position: relative;
    margin: 0;
    padding: 0;
}

#navigation ul li a {
    background: url(/wordpress/wp-content/themes/skeleton_childtheme/bilder/nav_bg_white.png) repeat-x scroll 100% 0 transparent;
    display: block;
    font-family: arial, sans-serif, georgia;
    font-size: 13px;
    color: #000;
    padding: 12px 25px;
    text-decoration: none;
    font-weight: bold;
    text-shadow: 1px 1px 1px #FFF;
    border-bottom: none;
    behavior: url(/wordpress/wp-content/themes/skeleton/PIE.php);
}

#menu-item-131 a {
    -moz-border-radius: 10px 0px 0px 0px;
    -webkit-border-radius: 10px 0px 0px 0px;
     border-radius: 10px 0px 0px 0px;
    display: block;
    width: 40px;
    padding: 0px;
    text-indent: -9999px;
    background: url(/wordpress/wp-content/themes/skeleton_childtheme/bilder/nav_bg_white.png) 0 -120px;
    behavior: url(/wordpress/wp-content/themes/skeleton/PIE.php);
}

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jun 11 2012, 06:26 AM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



I think the issue is the specificity of the different rules:
http://www.w3.org/TR/CSS21/cascade.html#specificity

The selector
CODE
#navigation ul li a {...}
has higher specificity than the selector
CODE
#menu-item-131 a {...}
and when there's a conflict, the selector with higher specificity wins.

I think the following rule will be more specific, but still select the same element:
CODE
#navigation #menu-item-131 a {...}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 05:18 PM