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

perhaps you can try like this:

.blk {  display:inline-block; height:96px; width:96px; text-indent:-9999px; *text-indent:0; *font-size:0; *line-height:0; *overflow:hidden; }

see the Demo http://jsfiddle.net/zhiyelee/4aRZa/

Answer 2

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