Image sprite CSS question |
Image sprite CSS question |
Exclusif |
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); } |
Darin McGrew |
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 selectorCODE #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 {...} |
Lo-Fi Version | Time is now: 28th March 2024 - 05:18 PM |