Question

I am using sprites to control two graphical navigation elements. The CSS I have written works perfectly in Chrome, but fails in FF and IE.

The CSS is:

a.gallery-left{
 margin-top: 5px;
 background: url('arrows_sprited.png') 0 0px;
 width: 45px; 
 height: 34px; 
 overflow: hidden;
 float: left;
}

a.gallery-left:hover  {
 background: url('arrows_sprited.png') -46 0px;
 cursor: pointer;
 zoom: 1;
}

a.gallery-right{
 margin-top: 5px;
 background: url('arrows_sprited.png') -133 0px;
 width: 46px; 
 height: 34px; 
 overflow: hidden;
 float: right;
}

a.gallery-right:hover  {
 background: url('arrows_sprited.png') -89 0px;
 cursor: pointer;
 zoom: 1;
}

Invoked in the html document by this:

   <a class="gallery-left"></a>
   <a class="gallery-right"></a>

Why is it failing in FF?
When I examine the element with firebug, the second is not visible (but it is in the first . Very strange.

any ideas?
thank you very much!

Answer 1

add the px after the offset values.

background: url('arrows_sprited.png') 0px 0px;
background: url('arrows_sprited.png') -46px 0px;
background: url('arrows_sprited.png') -133px 0px;
background: url('arrows_sprited.png') -89px 0px;

In the first it worked because the value is 0 which is universal in all unit types.