Question

OK, in theory this should be an easy one, hopefully I’m just missing something obvious here. I have the following HTML markup:

<ul id="cPlayControlRack">
    <li class="cplaybutton"></li>
    <li class="CpauseButton CplayHidden"></li>
    <li class="CplaySkipBack"></li>
    <li class="CplaySkipForward"></li>
    <li class="CplayVolumeIcon"></li>
    <li class="CplayVolumeSlide"></li>
</ul>

And the following CSS:

#cPlayControlRack{
    height:28px;
}
#cPlayControlRack li{
    width:29px !important;
    height:28px !important;
    background-image:url(background:url(i/playersprite.png);
    background-repeat:no-repeat;
    display:block;
}
.cplaybutton{background-position:0 0;}
.CpauseButton{background-position:30px 0;}
.CplaySkipBack{background-position:60px 0;}
.CplaySkipForward{background-position:90px 0;}
.CplayVolumeIcon{background-position:120px 0;}
.CplayVolumeSlide{background-position:150px 0;}

For some reason, the first rule is matching. #cPlayControlRack is making the UL 28px high. However, none of the other rules are matching, so the sprite isn’t being shown, and the lis are being given no height or width.

JSFiddle: http://jsfiddle.net/4r2jm/

Edit: My markup is dynamically generated, not that that should make a difference AFAIK.

Answer 1

There is a syntax error on line 7:

background-image:url(background:url(i/playersprite.png);

should be:

background-image:url('i/playersprite.png');