Disappearing Buttons in IE7

Today I learned that if you use text-indent to hide the text on an input tag that has a background image, IE7 will disappear the whole button and anything that is inline with it. It took 30 minutes to get to that point because one wouldn’t expect such a benign property as text-indent to cause headaches.

There are at least two solutions to the problem: the one that I found and used, and the one that I should have used and might refactor to use.

The first solution is through CSS:

input.submit {
  color:transparent;
  width: 100px; /* a few wider than the background image, which is either transparent or matted to the background color depending on your taste for IE6 */
  font-size:0;
  text-align:right;
}

I chose that solution because I was in a stylesheet, thinking CSS, and it was pretty much outlined at on this blog post.

February 25, 2009 in CSS, HTML