SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2006
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css sprite working for list when showing as normal but not when displayed inline

    Below is the code I'm using for a list that contains image backgrounds based on the dimensions given for each of them on the main sprite.

    This works perfect when the list defaults to its vertical state, however, when I attempt to display inline for the list nothing is displayed.

    I was wondering if anyone could help me getting this displaying properly in a horizontal format.

    Thanks for any help.

    Code:
    css
    li {background: url(main_sprite.png) no-repeat top left;list-style-type:none;}
        
    .one_off{ background-position: 0 0; width: 37px; height: 75px; }
    .one_off:hover{ background-position: 0 -125px; width: 37px; height: 75px; } 
    .two_off{ background-position: 0 -250px; width: 161px; height: 64px; } 
    .two_off:hover{ background-position: 0 -364px; width: 161px; height: 64px; } 
    .three_off{ background-position: 0 -478px; width: 167px; height: 49px; } 
    .three_off:hover{ background-position: 0 -577px; width: 167px; height: 49px; } 
    .four_off{ background-position: 0 -676px; width: 68px; height: 65px; } 
    .four_off:hover{ background-position: 0 -791px; width: 68px; height: 65px; } 
    .five_off{ background-position: 0 -906px; width: 65px; height: 56px; } 
    .five_off:hover{ background-position: 0 -1012px; width: 65px; height: 56px; } 
    }
    
    html
    <ul>
            <li class = "one_off"></li>
            <li class = "two_off"></li>
            <li class = "three_off"></li>
            <li class = "four_off"></li>
            <li class = "five_off"></li>
        </ul>

  2. #2
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Location
    Oskarshamn, Sweden
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Did you set the list items to display: inline;? If so, the width and height values will be ignored and it won't work. Setting the list items to display: inline-block; should work. Or float them.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •