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

[ChrisB]

Hi,

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

http://meiert.com/de/publications/articles/20050513/

MfG ChrisB

[Gunnar Bittersmann]

@@ChrisB:

nuqneH

http://meiert.com/de/publications/articles/20050513/

• http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

Qapla'

[dave]

Hi,

[…] in den älteren - z.B. im IE 6 - leider nicht […]

Mein Beileid dass du für'n IE 6 Anpassungen vornehmen musst.

Falls du das nicht musst sondern freiwillig machst, warum?
Testest du die Seite dann auch noch im Netscape 6?

~dave

[Der Martin]

Hallo,

Mein Beileid dass du für'n IE 6 Anpassungen vornehmen musst.
Falls du das nicht musst sondern freiwillig machst, warum?

vielleicht weil der IE6 immer noch einen nicht vernachlässigbaren Anteil hat?

Testest du die Seite dann auch noch im Netscape 6?

Netscape hat nie mehr überhaupt eine erwähnenswerte Verbreitung gehabt, nachdem er vom IE4 mit Pauken und Trompeten überholt wurde.

Ciao,
 Martin