What is the recommended way of applying style to a spritegen generated sprite?

Question

Hi All-

I'm trying to use the spritegen tool to generate a sprite, but I've found that I either misunderstand the way to correctly apply CSS, or chrome is not handling the background properties correctly.

According to their documentation (which would seriously benefit from a working example) You can apply style to a set of elements using:

#container li {
   background: url(csg.png) no-repeat top left;
}

and then apply a number of classes with background-position properties to "cut the image" from the sprite.

I found, however, that when I implemented this that Chrome clobbered my background-position style values with the background property from the li declaration (that is, it always cut out from the top left of the sprite).

I can work around this by changing all the styles to the actual style declarations, so they go from

.ss-sprite-element { 
      background: url(csg.png) no-repeat top left;
      background-position: -573px -1686px; 
      width: 50px; 
      height: 29px; 
    } 

to

.ss-sprite-element { 
  background: url(csg.png) no-repeat top left;
  background-position: -573px -1686px; 
  width: 50px; 
  height: 29px; 
} 

and remove the #container li rule - but is this the right way to use it?