Platzhalter ("rotes X") TROTZ angezeigter Grafik?

[robin]

Hallo zusammen :-)

Ich nutze mehrere Grafiken als linkbuttons. Bei hover wird die jeweilige Grafik gegen eine andere in identischer Größe ausgetauscht. Ich habe die Methode gewählt, bei der man vorher aus beiden Grafiken eine einzige Neue erstellt: Standard-Grafik oben, gehoverte Grafik darunter. Per css wird für hover praktisch nur die Sichtbarkeit um die Höhe der Standard-Grafik verschoben. Vorteil = Keine Ladezeit-Verzögerungen. So sieht der code aus:

  
a#facebook{  
display:block;  
width:20px;  
height:20px;  
background: transparent url(pics/facebook.gif) 0px 0px no-repeat;  
text-indent:-9999px;  
}  
  
a:hover#facebook{  
background: transparent url(pics/facebook.gif) 0px -20px no-repeat;  

  
<a id="facebook" href="www.facebook.com/XXX" target="_blank">  
<img src="www.XXX.de/pics/facebook.gif" alt="" border="0"/></a>  

Das klappt bei mehreren Grafiken einwandfrei. Im Firefox, Internet Explorer, Chrome und über Android. Jeweils aktuellste Version mit allen updates und Standard-Einstellungen.

Bei DIESEM Beispiel leider nur im Firefox. ALLE anderen zeigen ÜBER der Grafik ihren Platzhalter. Die Grafik wird darunter aber korrekt angezeigt und auch der hover-Bildwechsel + link funktionieren...

Grafik gefunden, Code funktioniert auch - was macht der Platzhalter da?
Mich verwirren? Oder verwirre ich ihn?

Danke für ein zwei Denkanstösse :-)

Gruss
robin