25

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.

1
  • Yes text-transform: capitalize; is working :)
    – user314430
    Commented Nov 11, 2010 at 9:50

14 Answers 14

69

Add this CSS to make IE7 behave:

text-transform: capitalize;

Crazy but true.

5
  • 4
    Unfortunately we don't have the source code for IE7, we may never know.
    – Caimen
    Commented Jul 11, 2011 at 22:04
  • Ahh geez. Why am I not surprised Commented Dec 23, 2011 at 1:09
  • 1
    Sadly this bug is still present in IE10. Commented Feb 5, 2013 at 1:58
  • @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 Commented Mar 21, 2013 at 16:57
  • Why isn't this the correct answer? Craziness that this works... but it does! Commented Dec 17, 2013 at 16:57
20

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.

1
  • 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.
    – Henrik N
    Commented Feb 3, 2013 at 17:20
2

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

este é um exemplo simse

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

1
  • Thanks! This is the only solution which worked for me.However its working without adding "text-indent: 0" as well.
    – Hrushikesh
    Commented Dec 5, 2012 at 19:05
1

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.

1

Only following will do the job for you :)

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

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
0

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.

0

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;}
1
  • I just tried placing the indent negative padding into my main style sheet and it seems to be accepted by ie8 ie9 and ff. Commented Jul 11, 2011 at 19:39
0

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.

0

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.

0

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.

0

I tried all of the above with no success. I had to add a float:left before it picked up the text indent. IE7 is crazy, and by crazy I mean awful.

0

Here is some CSS I'm using that works for me in IE and doesn't rely on text-indent

.sprite {
    width:100%;
    height:0px;
    padding-top:38px;
    overflow:hidden;
    background-repeat:no-repeat;
    position:relative;
    float:left;
    display:block;
    font-size:0px;
    line-height:0px;
}
.sprite.twitter {
    background-image:url(/images/social/twitter-sprite.png);
    margin-top:8px;
    background-position: 4px 0px;
}
#social-links a:hover .sprite.twitter {
    background-position: 4px -38px;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.