CSS Background Position not shifting

Question

this problem is a bit hard to explain.

I'm using a PNG sprite to do 48x48px icons and shifting the background by Class.

For example,

<style>

div.icon {
    width:48px;
    height:48px;
    background: url(../img/48sprite.png);
}

.cart { background-position: -96px -336px; }
.sale { background-position: -96px -384px; }
.bino { background-position: -96px -432px; }

</style>

(There are about 35 more of these background-position shifting classes for different icons.)

<div class="widelist">

<div class="widelist-itemwrap">

<div class="icon bino left"></div>

  <div class="widelist-content left">
    <h4>Widelist Heading</h4>
    <p>Widelist content</p>
  </div>

</div>

</div>

The problem is that no matter whether I put bino, sale, cart, or any of the other 36 icons in the sprite as the second class after the Icon class, I still just get the background image located at 0px, 0px of the PNG file.

The weird part is that it displays PERFECTLY in the Dreamweaver Design View, but as soon as I go to Live View or preview in Chrome/Safari etc, the icons all switch to the default icon instead of being shifted.

Developer Tools in Chrome shows that the background-position property has been properly shifted, but visually, the icon is incorrect.

Just to clarify, I've used this technique successfully many times before with no problem - just having a bad day I guess.

Any ideas?

Answer 1

The problem is that div.icon is more specific than .bino .

The background rule is shorthand for (amongst others) the background-position property, so the background property on div.icon is preventing your differing background-position rules from being applied.

You can fix it by changing div.icon to just .icon .