Removing text from HTML buttons on all browsers?

We have buttons of many sizes and colors that use background images. There is a lab开发者_如何学Pythonel 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.

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).

Additional to your

color: transparent;

You can use something like

padding-left: 3000px;
overflow: hidden;

Regards

In some cases you can use the propery "content" to change what is contained in the element, personally though I would use javascript to do it.

Just write blank text into the element.

If the button is an input submit button, use the image

<input type="image" src="/images/some_image.png" />

You can style this with CSS

input[type="image"] {
  border: 1px solid red;
  width: 150px;
  height: 35px;
}

If they are links, Dave provided the answer.

How do I make the text disappear in all browsers?

I suppoose you want the altarnative text to disappear if the image is loaded.

For this puprpose you can use this:

<INPUT TYPE="image" SRC="images/yourButtongif" HEIGHT="30" WIDTH="100" ALT="Text In Case There Is No Image" />

You can apply additional styles if needed, but this minimum will do the job for you.

If I understand the question correctly, this might work (I don't have IE7 to test on at the moment, so not 100% sure)

For markup like this:

<a href="javascript:return false;" class="button" id="buttonOK"><span
    class="icon">Ok</span></a>

Use this css:

span.icon {
    /*visibility: hidden;*/
    display:block;
    margin-left:-1000;
    width:100px;
}

or this might work depending on your requirements for usability/accessibility:

span.icon {
    visibility: hidden;
}

I don't know what users / programs the labels need to be in the HTML for, but if it's for text browsers and such, maybe you could insert a JavaScript that removes the labels onLoad?

JQuery or Prototype would make that very easy.