CSS Sprites - Code funktioniert in Chrome, schlägt in FF und IE fehl ... warum?

Question

Ich verwende Sprites, um zwei grafische Navigationselemente zu steuern. Das CSS, das ich geschrieben habe, funktioniert perfekt in Chrome, scheitert aber in FF und IE.

Die CSS ist:

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; 
} 

im HTML-Dokument durch diese Ausgeführt:

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

Warum es in FF versagt? Wenn ich das Element mit Firebug untersuchen, ist die zweite nicht sichtbar ist (aber es ist in der ersten. Sehr seltsam.

irgendwelche Ideen? danke sehr!

Answer 1

die px nach den Offsetwerte hinzuzufügen.

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; 

im ersten funktionierte es, weil der Wert 0 ist, die in allen Gerätetypen universell ist.

Answer 2

Inline-Elemente Breite oder Höhe Werte nicht einhalten. sie werden genau die widt h und Höhe, die zu dem Text passt, den sie enthalten, in diesem Fall eine leere Zeichenfolge.

Ändern Sie entweder <a> in <div> oder geben Sie display: block ein.