CSS to hide INPUT BUTTON value text

Question

I am currently styling an <input type='button'/> element with the following CSS:

background: transparent url(someimage); color: transparent; 

I want the button to show as an image, but I don't want the value text to display on top of it. This works fine for Firefox as expected. However, on Internet Explorer 6 and Internet Explorer 7 I can still see the text.

I have tried all sorts of tricks to hide the text, but without success. Is there a solution to make Internet Explorer behave?

(I am constrained to use type=button because this is a Drupal form and its form API doesn't support image-type.)

Answer 1

I use

button {text-indent:-9999px;} * html button{font-size:0;display:block;line-height:0}  /* ie6 */ *+html button{font-size:0;display:block;line-height:0}  /* ie7 */