display:inline-block and text-indent

Question

I am experiencing a problem with the following code in some versions of Internet Explorer:

#iconautente{ 
background-image:url('/style/images/spritecommon.png'); /*icona_utente.png*/
background-position:-117px -15px;
text-indent:-9000px;
width:20px;
height:23px;
display:inline-block;
}

<a id="iconautente" href="/admin/index.php">admin</a>

In Firefox, IE7 and IE8 under Vista, I see background and no text, as expected. In IE6 and IE8 under XP, the whole image is indented, not text, so the image is not shown.

What should be the right behavior? Is there a workaround?

Answer 1

presumably internet explorer is not supporting display: inline-block; in versions below 7 and only partly in 7. Why don't you use display:block; ?

Answer 2

* html #iconautente{text-indent:0; line-height:0; font-size:0; overflow:hidden}/*ie6 hack */

*:first-child+html #iconautente{ text-indent:0; line-height:0; font-size:0; overflow:hidden}/*ie7 hack */