Why is the indented text still showing in IE7?

Question

I have am using an image button instead of text for a submit button here and I have used text-indent -9999px to "hide" the text value. However, in IE7 that text is still showing over the button.

I tried making the text transparent but that didn't help.

Is there something I am missing here?

HTML:

<form action="news.php" method="post">
            <fieldset>
            <input type="text" id="your-email" name="your-email" value="YOUR EMAIL ADDRESS" onfocus="if (this.value=='YOUR EMAIL ADDRESS') this.value='';" />
            <input type="submit"  value="::Submit Query::" id="red-submit" />
            </fieldset>
</form>

Here is the CSS:

input#red-submit                    {
                                width: 90px;
                                height: 30px;
                                border-style: none;
                                text-indent: -9999px; 
                                position: relative;
                                top: 5px;
                                left: 10px; 
                                cursor: pointer;
                                background-color: transparent;
                                background-image: url(../_images/btn_submit-red.png); 
                        }

I would appreciate some help getting that text to move out of the way.

Thanks.

Answer 1

Since IE is stupid and whatnot, it wouldn't surprise me if text-indent only affects actual text nodes, and the button's value would seem not to be a text node.

You could try using the <button> tag instead, to see if that got you better results, but no promises.

EDIT: Here's an article that deals with the same issue, and offers a solution.

input.button{
    width:114px;
    height:37px;
    border: none;
    background: transparent url(images/submit_btn.gif) no-repeat center;
    overflow: hidden;
    text-indent: -999px;

    /* The fix:*/ 
    font-size: 0;
    display:block;
    line-height: 0;
}