display:inline-block and text-indent

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?

Answers


* 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 */

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/


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


Need Your Help

Can't assign value to column that was just created in table

sql sql-server-2005 sql-update

For some reason when I run this, it says Invalid column name 'col3'.:

Accessing user session from a custom routing class

symfony1

Is there some way to acces the user object from a custom routing class?