CSS Menu Sprite Issue

Posted on 2009-04-24
Last Modified: 2012-05-06
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

Question by:Adam
    LVL 42

    Expert Comment

    by:David S.
    Please post your HTML too.
    LVL 1

    Author Comment

    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

    LVL 42

    Accepted Solution

    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.
    LVL 1

    Author Closing Comment

    Did the trick! Thanks a bunch Kravimir.

    Featured Post

    Highfive Gives IT Their Time Back

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Join & Write a Comment

    CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
    Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
    In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
    In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

    729 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now