CSS text indent not working on IE7

Question

Here is the sample page: http://jsfiddle.net/p9Fbb/

Basically, when using text-indent on the icon, Internet Explorer 7 (IE9 in Compatibility Mode) moves the element off-screen, not just the text. For some reason, this only happens in certain circumstances in table cells (I think it's when the element is on its own in a cell).

How can I fix this? Or is there another way to use textual content in an element but keep it invisible?

Answer 1

It seems that the problem is that your span become empty (or it's size become 0 (not sure)) after the text-indent, ence it's not displayed. Put text around your span, you'll see it's still there.

see this jsFiddle for an example.

use display:block instead of display:inline-block. Inline-element do not like size declaration much (width/height), they are made to be displayed inside something, taking room according to their content.