1

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!

Šime Vidas
  • 182,163
  • 62
  • 281
  • 385
Will Gill
  • 577
  • 2
  • 10
  • 21

2 Answers2

3

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.

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
0

Inline elements do not honor width or height values. They will have exactly the width and height that fits whatever text they contain, in this case an empty string.

Either change the <a> to <div> or make it display: block.

slebetman
  • 109,858
  • 19
  • 140
  • 171