CSS icons with some semantic text, browsercompatibility issues...

Question

Hi, I'm using this code to display sprite driven icons (if graphics are available only the icons should show up, for other devices the text is supposed to 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 is working fine in any browser, but the text shows up in Opera and Chrome for some reason because the padding in conjuction with overflow:hidden won't work as supposed.

Any ideas how this could be improved? Thanks in advance....

Answer 1

I don't know if you need just icon (16x16 box) or icon with descriptive text. Anyway, if you need just 16x16 box, you can hide text just by

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

Answer 2

Try negative text-indent instead.

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

Answer 3

The standard way of hiding images by shifting them out of sight is to use text-indent:-9999em or something similar. It needs to really big for Opera and ems work well as they'll scale with any change in font size. Also it's a good idea to set line-height:0; font-size:0; for ie which sometimes likes to add extra space. You shouldn't need the padding to hide the text if you use text-indent.