IE Hack – Hide Text on your Submit Buttons

The Issue:

I was not able to hide the text from the button, letting the underlying image to show it’s text. Normally my preferred image replacement technique is to have text in the background image and then use a negative text-indent at a high number like this:

background-image: url('my-picture-with-text.jpg');
text-indent: -9999px;

This works fine with submit buttons on most browsers, except IE.

The fix:

Add 2 extra lines to your css file:

color: transparent;
text-transform: capitalize;

For some reason the text indent dosn’t work by itself in IE, so after adding these 2 lines it works. It is a hack within a hack though, the color:transparent property should work by itself, but it doesn’t. For some odd reason setting the text-transform to anything (in this case I chose capitalize because I don’t use it very often) makes it magicly work. Anyhow if anyone finds this useful please leave a comment below.


Related Posts:

  • No Related Posts
This entry was posted in Web Development. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *