CODEWITHSUNDEEP
csssprite
Will Gill
Will Gill

Reputation: 587

CSS Sprites - code works in Chrome, fails in FF and IE... why?

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!

Upvotes: 1

Views: 686

Answers (2)

slebetman
slebetman

Reputation: 113926

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.

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

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.

Upvotes: 3

Related Questions