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.

Solution 1

Add this CSS to make IE7 behave:

text-transform: capitalize;

Crazy but true.

Solution 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.

Solution 3

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

este é um exemplo simse

Solution 4

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

Solution 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

View more solutions

Comments

[Admin]

Yes text-transform: capitalize; is working :)

[Yogurt The Wise]

I just tried placing the indent negative padding into my main style sheet and it seems to be accepted by ie8 ie9 and ff.

[Caimen]

Unfortunately we don't have the source code for IE7, we may never know.

[Marcy Sutton]

Ahh geez. Why am I not surprised

[Hrushikesh]

Thanks! This is the only solution which worked for me.However its working without adding "text-indent: 0" as well.

[Matstar]

Thanks! text-indent alone was enough inside a span in Chrome, but Firefox 16 and IE7 also needed display:block. Didn't need any of the others.

[awakez144]

Sadly this bug is still present in IE10.

[totallyNotLizards]

@NickJosevski according to MS, it's been supported since IE6. LOL is all I can say. msdn.microsoft.com/en-gb/library/hh781508%28v=vs.85%29.aspx

[Andrew Howard]

Why isn't this the correct answer? Craziness that this works... but it does!