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

Add this CSS to make IE7 behave:

text-transform: capitalize;

Crazy but true.

Answer 2

while implementing the image replacement technique like above, there are some rules to go with css to get it work on IE browsers.

css declaration:

text-indent:-9999px;
text-transform:capitalize;


font-size:0;
display:block;
line-height:0;

font-size:0 is used to reduce the font size and works well in IE7. But even after adding this line, you would notice a black line(which is basically the text) on the center of the button in IE6.

display:block Negative text-indent works in IE only if this is added.

line-height:0 Another fix for IE6.

text-transform:capitalize I don't know the exact reason of including the property, somehow it fixes the issue.

Hope this helps.

Answer 3

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

este é um exemplo simse