CSS icons with some semantic texts, browser compatibility issues

Question

I use this code to display sprite driven icons (if graphics are only available for icons, for other devices the text should help):

Markup:

<span class="icon ok">OK</span>

CSS

.icon { display:block; width:16px; height:16px; padding-left:40px; overflow:hidden; background:transparent url(sprite.png) 0px 0px no-repeat; }
.ok { background-position: -16px 0px; }

The sprite itself works fine in any browser, but the text appears in Opera and Chrome for some reason, because the addition in combination with overflow: hidden will not work as intended.

Any ideas on how this can be improved? Thanks in advance.

Answer 1

- text-indent:-9999em - . Opera , , . line-height:0; font-size:0; ie, . , text-indent.

Answer 2

.

.icon { display:block; width:16px; height:16px; text-indent: -9999px; background:transparent url(sprite.png) 0px 0px no-repeat; }

Answer 3

I do not know if you only need an icon (16x16) or an icon with descriptive text. In any case, if you only need a 16x16 field, you can hide the text only

.icon { display:block; width:16px; height:16px; background:transparent url(sprite.png) 0px 0px no-repeat; text-indent:-9999px; }