Removing text from HTML buttons on all browsers?

Question

We have buttons of many sizes and colors that use background images. There is a label on the background image itself, but we need to keep the button's text in the HTML for usability/accessibility. How do I make the text disappear in all browsers?

Modern browsers are easy, I just used -

color: transparent;

It's Internet Explorer 7 that I can't get to comply. I've tried these CSS properties, and none of them can remove the text completely without destroying my site's layout in the process.

font-size: 0px;
line-height: 0;
text-indent: -1000em; 
display: block;
padding-left: 1000px;

I would very much appreciate any help.

Answer 1

Personally, I go for the all CSS approach:

{ display: block;
text-indent: -9999em;
text-transform: uppercase; }

For whatever reason, text-transform: uppercase; does the trick for IE7. Of course, you'll probably have your own CSS along with that for additional styling (if needed).