Text indent is not working in ie7

Question

I am working on a website and on the top navigation bar there is a search box, I applied the following css on the search submit button

#submit {
   background: url("img/new-search-icon.png") no-repeat scroll -1px 0 #FFFFFF;
   border:0 none;
   cursor:pointer;
   display:block;
   height:21px;
   padding:0;
   position:absolute;
   right:0;
   text-indent:-9999px;
   top:0;
   width:20px;
   z-index:2;
}

My Problem is in IE7 the text indent is not working please help me if you want to see the demo you can view it by clicking here Click here. Please help me.

Answer 1

Don't use text-indent. Try this one instead:

display: block;
height: 0;
padding-top: 20px; //The height of your button
overflow: hidden;
background: url(image.png) no-repeat; // Image replacement

Works in all browsers including IE6.

Answer 2

Add this CSS to make IE7 behave:

text-transform: capitalize;

Crazy but true.

Answer 3

.submit {
    line-height: 0px;
    font-size: 0px;
    /* restante do teu código */
    }

este é um exemplo simse

Answer 4

The solution that I found to my text-indent woes in IE7, and something that I feel should be added to this thread is the following:

Doesn't work:

text-indent: -900009px;

Does work:

text-indent: -9999px;

I didn't know there was a limit? I guess there is.

Answer 5

text-transform: capitalize; actually had no effect for me (it was happening on a tags), but this worked

text-indent: -9999px
float: left
display: block
font-size: 0
line-height: 0
overflow: hidden

Answer 6

If nothing else works exactly right, this does:

color: transparent;
text-indent: 0 !important; /* reset the old negative value */

So normal browsers use the negative text-indent, ie7 gets special treatment using conditional comments