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

HTML & CSS
1

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.

[U]css[/U]
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; }
}

[U]html[/U]
<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

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.