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

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 2

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 3

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 4

I just wanted to add for "others" (even though it not strictly related to the topic and not the ops problem).

Please ensure you use a "px" for your value. i.e. -9999px not -9999.

I've just spent 10 mins trying to debug why this didn't work. Staring at the value right in front of me.

I've been doing alot of Silverlight lately and so my mind didn't flip over to CSS markup requirements fast enough. Grrr.

You must include a unit of measurement.... or else it will just silently fail.

Answer 5

I don´t know if it´s the cause of your problem, but I think your background shorthand notation is wrong; the colour code should be at the start, not the end.

Answer 6

Only following will do the job for you :)

   text-indent:-9999px !important;  
   line-height:0;