Take the 2-minute tour ×

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?


<form action="news.php" method="post">
            <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" />

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.


share|improve this question
add comment

1 Answer

up vote 2 down vote accepted

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.

    border: none;
    background: transparent url(images/submit_btn.gif) no-repeat center;
    overflow: hidden;
    text-indent: -999px;

    /* The fix:*/ 
    font-size: 0;
    line-height: 0;
share|improve this answer
Hi Matchu, excellent solution. I removed the display block because it tossed my button out of alignment but those other two lines of code effectively solved the problem. Thanks for the article too. You have helped me in the past. I remember your UP avitar. Thanks! –  fmz Jul 8 '10 at 15:30
@fmz - haha, glad to help. Be sure to click the check mark once it lets you ;) –  Matchu Jul 8 '10 at 15:31
add comment

Your Answer


