• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 472
  • Last Modified:

CSS Menu Sprite Issue

I seem to be having issues with my CSS menu sprite. I am following a tutorial I found here:

I think I copied everything correctly but it looks like for each "li > a", the background image is repeating itself as oppose to covering the span of the whole menu.

You can check out the sample images I've provided. One is of the sprite image and the other is what appears when I've applied my CSS. (Note: I haven't included the code for the hover and active states just to keep things simple)

You can also check out my code below. Any help would be great.
/* MAIN NAV */
ul#main-nav 		{width: 960px; height: 45px; position: relative; background: url(../images/main_nav.png) top left no-repeat; margin: 0; padding: 0;}
ul#main-nav li		{float: left;}
ul#main-nav li a 	{position: absolute; display: block; height: 45px; background: url(../images/main_nav.png) top left no-repeat; margin: 0; padding: 0; text-indent: -9999px; top: 0; overflow: hidden;}
li#nav_home a 			{left: 0; width: 74px; background-position: 0 0;}
li#nav_about a 			{left: 74px; width: 105px; background-position: -74px 0;}
li#nav_news a			        {left: 179px; width: 74px; background-position: -179px 0;}
li#nav_events a			{left: 253px; width: 110px; background-position: -253px 0;}
li#nav_factstats a		        {left: 363px; width: 137px; background-position: -363px 0;}
li#nav_resources a		        {left: 500px; width: 121px; background-position: -500px 0;}
li#nav_presentations a 	        {left: 621px; width: 147px; background-position: -621px 0;}
li#nav_multimedia a		{left: 768px; width: 117px; background-position: -768px 0;} 
li#nav_kids a			        {left: 885px; width: 75px; background-position: -885px 0;}

Open in new window

  • 2
  • 2
1 Solution
David S.Commented:
Please post your HTML too.
AdamAuthor Commented:
Sorry about that. See below.

<ul id="main-nav">
	<li id="nav_home" title="Home"><a href="#">Home</a></li>
	<li id="nav_about" title="About Us"><a href="#">About Us</a></li>
	<li id="nav_news" title="News"><a href="#">News</a></li>
	<li id="nav_events" title="Events"><a href="#">Events</a></li>
	<li id="nav_factstats" title="Facts & Stats"><a href="#">Facts & Stats</a></li>
	<li id="nav_resources" title="Resources"><a href="#">Resources</a></li>
	<li id="nav_presentations" title="Presentations"><a href="#">Presentations</a></li>
	<li id="nav_multimedia" title="Multimedia"><a href="#">Multimedia</a></li>
	<li id="nav_kids" title="Kids"><a href="#">Kids</a></li>

Open in new window

David S.Commented:
It's a specificity issue. By using "ul#main-nav li a" as the selector instead of just "#main-nav li a", you made that rule have a higher specificity than the rules for the individual links, so the "top left" background-position is being used for all of them. So simply change the selector for that one rule.
AdamAuthor Commented:
Did the trick! Thanks a bunch Kravimir.

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now