text-indent und span/inline-block

[Benni]

Hi!

Ich arbeite gerade an meiner Website und wollte eine Textzeile mit einem Icon aufschmücken. So hab ich das CSS geschrieben:

.bildtext	{  
	font-family: Helvetica, Arial, sans-serif;  
	font-size: 12px;  
	line-height: 15px;  
	display: block;  
	width: 200px;  
	padding: 5px 10px;  
}  
  
.icon	{  
	background: #FFFFFF url('bild.gif') no-repeat -80px -4px;  
	width: 12px;  
	height: 12px;  
	display: inline-block;  
	text-indent: -9999px;  
}

und hier das HTML:

<div class="bildtext"><span class="icon" title="Bild">Bild:</span> Ein Luchs</div>

Als ich das Ganze dann ausprobiert habe, hat es in den neueren Browsern funktioniert, in den älteren - z.B. im IE 6 - leider nicht. Da war die ganze Zeile eben um 9999px verschoben, nicht nur der Text vom Span.

Bitte um Hilfe, wie man das auch für alte Browser hinbekommt ...

Besten Dank und liebe Grüße

Benni