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:          


        

Answer 1

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

Answer 2

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

este é um exemplo simse

Answer 3

Add this CSS to make IE7 behave:

text-transform: capitalize;

Crazy but true.

Answer 4

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 5

Has a similar problem in IE8. After eliminating all other possibilities, a line-height declaration elsewhere in the CSS was breaking the text-indent. solution: set the line-height explicitly to 0.

Answer 6

Sorry a little late to the post, but was looking for a solution to the IE7 issue with negative text-indent. I started trying my own random ways and stumbled upon this. jUst wanted to post it out on Stack in case it may help others.

Trying to add an icon to a link and not show the text.

My CSS for all browsers

a.lnk_locked , a.lnk_notchecked, a.lnk_checked
{ background: url(../images/icons/icon_sprites.png) no-repeat; padding: 0 2px 0 0;   width:18px; height:18px; 
       vertical-align:middle; text-indent:-9009px; display:inline-block; overflow: hidden; zoom: 1; *display:inline;}
    a.lnk_locked    { background-position: -1px -217px; }

My CSS just for IE7

a.lnk_locked , a.lnk_notchecked, a.lnk_checked
{  text-indent:20px; padding-left:-20px; width:18px;}