Question

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

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.