Home/ Questions/Q 5983349
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T22:13:03+00:00

I have the following code <ul id =menu> <%foreach (var pckg in Model) {

  • 0

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/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    @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; }
    • 0