A New Way To Style Your Buttons

Recently, I designed a website and I decided to do a unique style on the search field. I added a background image to the input field and then a background image to the submit button. Everything looked great until I viewed it in Internet Destroyer (Internet Explorer). That’s when the sky fell on my head…as usual.

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 doesn’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 magically work. Anyhow if anyone finds this useful please leave a comment below.

**IMPORTANT UPDATE**

Thanks to a comment by Chris Mahon I learned of another (better) method for hiding text on your submits. Instead of adding color: transparent; and text-transform capitalize; (the above method) add the lines below. The above method can mess up layouts where lots of absolute positioning is happening on the page. Thanks again Chris!

background-image: url('my-picture-with-text.jpg');
line-height: 999px; /* Set it higher than your image height */
overflow: hidden; /* Hide the text */
font-size: 0; /* FF2 doesn’t like the above */