Sprite Issue

问题:

I have the following code

<ul id ="menu">
    <%foreach (var pckg in Model)
    { %>

        <li style = "text-align:center;width:60px;" class = "top-<%=pckg.Controller.ToLower() %>"> 
            li-text
        </li>

    <%} %>

</ul>

and following is the sprite CSS

.top-pkg1{ background-position: -184px 0; width: 36px; height: 36px; } 
.top-pkg2{ background-position: -270px 0; width: 36px; height: 36px; } 
.top-pkg3{ background-position: -356px 0; width: 36px; height: 36px; } 
.top-pkg4{ background-position: -517px 0; width: 36px; height: 36px; } 
.top-pkg5{ background-position: -603px 0; width: 36px; height: 31px; } 
.top-pkg5{ background-position: -689px 0; width: 36px; height: 36px; } 
.top-pkg6{ background-position: -775px 0; width: 36px; height: 36px; } 
.top-pkg7{ background-position: -861px 0; width: 36px; height: 36px; } 

and here is the container css

 #menu li
    {
         display:block;
         background: url(/Content/images/TopMenu/topmenu.png) no-repeat top left; 

    }    
    #menu li a
    {
        margin-top:35px;
        text-align:center;    
    }

But when i ran this code i get the first image of the sprite partially shown on all li tags Couldn't figure out the problem. I created the css from Here Fiddle link is http://jsfiddle.net/tassadaque/LnGqX/1/

回答1:

@tassadaque; You already define background-position in your li image url top left

background: url(/Content/images/TopMenu/topmenu.png) no-repeat top left;

So remove top left position from your li image url and write like this:

background: url(/Content/images/TopMenu/topmenu.png) no-repeat;

Edit write :

#menu li {background: url(/Content/images/TopMenu/topmenu.png) no-repeat;}

#menu li.top-pkg1{ background-position: -184px 0; width: 36px; height: 36px; }
#menu li.top-pkg2{ background-position: -270px 0; width: 36px; height: 36px; }
#menu li.top-pkg3{ background-position: -356px 0; width: 36px; height: 36px; }
#menu li.top-pkg4{ background-position: -20px 0; width: 36px; height: 36px; }
#menu li.top-pkg5{ background-position: -603px 0; width: 36px; height: 31px; }
#menu li.top-pkg5{ background-position: -689px 0; width: 36px; height: 36px; }
#menu li.top-pkg6{ background-position: -775px 0; width: 36px; height: 36px; }
#menu li.top-pkg7{ background-position: -861px 0; width: 36px; height: 36px; }

回答2:

First, run:

<ul id ="menu">
    <%foreach (var pckg in Model)
    { %>

        <li style = "text-align:center;width:60px;"> 
            top-<%=pckg.Controller.ToLower() %>
        </li>

    <%} %>

</ul>

To see if you get top-pkg1, top-pkg2, etc. It seems to me that you have the same class in all li's.