IE not interpreting text-indent on submit buttons ?

ie-issues-text-indent-on-submit-button
I’ve worked on many projects where in I had to style the form/input buttons using custom background images. That is, I had to hide the default text of the button. It’s not a big deal, I know. But it is, when it comes to IE. Let’s review this in detail.

The following image(button background) has been used for this tutorial. You may right click and save it.

Sample Image

1: HTML Code

Create a HTML page and insert a button with a class, “button”.







2: Style Sheet

I included the following in my stylesheet.

input.button {
width:114px;
height:37px;
border: none;
background: transparent url(images/submit_btn.gif) no-repeat center;
overflow: hidden;
text-indent: -999px;
}

Fixed width, overflow:hidden and negative text indent will hide the text of any button. This works well in all browsers except IE.

3: The Problem

The image below shows how IE displays the button.

IE Issue

You can see the black text within the button which looks odd.

4: IE Fix

So finally, here goes the three line CSS code that does the work for you.
Modify your CSS as shown below.

input.button{
width:114px;
height:37px;
border: none;
background: transparent url(images/submit_btn.gif) no-repeat center;
overflow: hidden;
text-indent: -999px;

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

5: How it works

Let’s see how it works.

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.

I have included the sample files for your reference.

About Gopal Raju

Gopal Raju is a passionate designer, developer and blogger from India. He’s the founder of Convax Solutions, a web design and development agency in India. Catch up with him on dribbble, Twitter and Facebook.

156 Responses to IE not interpreting text-indent on submit buttons ?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  1. I really like your blog.. very nice colors &
    theme. Did you design this website yourself or did you hire
    someone to do it for you? Plz answer back as I’m looking to create my own blog and would like to know where u got this from. kudos

  2. Awesome post, thanks.

  3. You saved me so much time, I redesign my website and IE makes a lot of problems – thank you for the solution it works well.

    I wish you a happy new year! :)

  4. please will you help me get this to play in IE?

  5. Thanks a lot for this info, i also found that:

    input.button { text-indent: -9000px; text-transform: capitalize; }

    Works!

  6. Really perfect answer, i need this solution….. :)

  7. Worked Great. ur site design is awesome

  8. Thanks for this….good reference – might need inline-block in some instances

  9. thnx…it works!!!

  10. Eduardo de Azevedo February 3, 2012 4:44 am

    Thanks!

  11. Thank you for this great tip. I was using IE Tester to test a WordPress site I’m doing and notice the text showing on top of the submit button.

    Added your CSS rules to my ie7 style sheet and it worked like a charm.

  12. Wow. This fixes my client’s site – and mine! Being on a MacBook Air all day, it’s easy to ignore IE’s hiccups. Great tutorial!

  13. this works for ie7 and higher {
    text-indent: -9999px;
    text-transform: uppercase;
    }

  14. I also discovered that adding text-transform: capitalize; works

    From the following forum:
    http://doctype.com/possible-fix-negative-textindent-problem-ie-hide-text-when-background-image-buttons-3

  15. Thanks for this, just needed it.

  16. Nice one… it is working fine…

    Thanks…

  17. Bang tidy man! Worked for me straight away, cheers fella!

  18. you are awesome – thanks for quick and easy fix . Good trick.thanx for sharing

  19. Would be great, if it did anything.

    Does not do anything. Does not fix problem. Does not change anything whatsoever.

  20. Quick and simple. Thanks Gopal. :-)

  21. Worked like a charm, thanks!

  22. Thank you so much, I thought you only needed line-height:0; for IE, but you showed me that overflow:hidden; display:block; and font:0; are needed as well and now it works.

  23. Just wanted to also offer some appreciation for posting this solution. Helped me out ;-)

  24. You make my day !
    Thanks a lot !!!

  25. Thanks Gopal, simple and helpful.

  26. Thanks for posting this. Helped me out big time..

  27. Thanks! Helped me a lot!

  28. Thanks a lot !
    Nice and Simple.. It saved my time :)

  29. vlad fratila May 16, 2011 4:31 am

    Hey, just wanted to say that the other fixes seem to not be needed for IE7. Adding only display:block made it work for me.

  30. Thanks a bunch! Just finishing a job and this saved the rest of the night! Thank you again!!!

  31. Many thanks for sharing.Its helpfull.

  32. i just faced a similar problem but I added another class inside the first one and hide the text that way. Extra markup I like your idea way better

  33. Good trick.thanx for sharing

  34. Nice and simple solution. Thanks for posting it.

  35. Just use this in your ie.css… it’s that simple

  36. you are awesome – thanks for the quick and easy fix

  37. This works but it’s not accessible. Therefor screen readers won’t see it and Google might get funny about it when it sees text-size:0!

    The best way I’ve found is to either set the input type to an image button or use the element [button] instead of [input].

    On the first method, remember to add alt text so screen readers can see it.

  38. Nice and simple solution. Thanks for posting it.

  39. this did the trick. thanks a bunch.

  40. Thanks very much for this tip Gopal, I love this comment form as well!

  41. Muito bom, ajudou bastante. Em uma pequena pesquisa, ajudou em uma grande trabalho. Add no Favoritos…

  42. Thank you!
    Congratulations!

  43. This was perfect. Exactly the problem I was having. Thanks.

  44. many thanks this worked a treat!

  45. Thanks very much worked perfectly, another hack for my arsonal!

  46. Thks a ton Dude

  47. Great… its working for me.. Thanks

  48. yeah.. it’s really work for my blog.. thanks :D

  49. Thanks Gopal Raju.
    It worked… thanks

  50. spot on! – worked perfectly – thanks.

  51. Wow! This is cool! I found a partial fix on another website that did not work for IE6. Your solution did it. I wonder if the line-height: 0; would not actually be enough (without the font-size: 0). In any event, it’s really sad that we have to trick IE so much to do such simple things!

    Thanks much for the solution! 8-)

  52. thx for the tip, it saved my day! :)

  53. Works like a charm. Thanks for sharing!

  54. It’s nice article. it is worked perfectly.
    thanks for the nice article.

  55. Just what I needed! Thanks.
    Keep Rocking

  56. thank u so much it works perfectly

  57. It’s not working in IE7. please provide some other way. My code is below:-
    input.myButton{

    width:114px;
    height:37px;
    border: none;
    background: transparent url(../images/blue.jpg) no-repeat center;
    overflow: hidden;
    text-indent: -999px;

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

  58. Thanks, It help me to save a lot of time

  59. Thanks. I was having this exact problem and your solution fixed it.

  60. Nicholas Wright July 22, 2010 8:06 am

    Thanks for the help!
    This seems to work for me without the need for font-size: 0;

  61. I was using a submit button with a background image. I found that I actually did not need to declare “display: block” for it to work in IE7 and IE8. I did need the other three styles however (text-indent, font-size, and line-height).

    Thanks for this!

  62. Really impress…

    It’s working nice.

    Thanks a lot buddy.

  63. Finally something that worked. Thank you.

  64. Thanks. This worked well! You saved my life… :D

  65. Thanks, worked wonderfully

  66. cool…works for me. thanks!

  67. Gold. Thanks for sharing – that one had me scratching my head for a while :)

  68. Nice little fix, i found that display: inline-block; worked nice to keep buttons in a row.

    Cheers
    Tom

  69. I just ran across this error and your explanation was clear and concise. Thanks for sharing.

    Also, you’re comment submission form is awesome!

  70. Thanks,
    I had to switch my button to input type=”submit” because internet exploader 7 would not let me submit with multiple buttons at the same time. I really like buttons but I guess we have to wait for ie8 to become the dominate browser. uhg.

  71. Thank you very much for this problem solution.

  72. Ha thanks mate! I’ve come across this a few times just never Googled the correct stuff to get a decent answer. Worked really well! I’ve been told that input type=image causes no issues to developers anyway so might as well just use that but for the case when you can’t this is useful!

    Also had an issue with IE6/7 not honoring ‘border: none’ on inputs. Have to also declare ‘border-color: transparent’ for IE6/7 and everything works perfectly.

    Cheers.

  73. Great tipp! Thanks.

  74. Thanks. This was perfect!

  75. Thanks for the tip. I try to not spend too much time worrying about how ie6 renders my site but three lines of code isn’t much extra foot work. Also, IE7 was not recognizing the negative text-indent until I added this either. Great post!

  76. Why bother with IE6? Its market share is not (just barely) less than 20%. Even Google is giving up on it. :) And also, I would use width:0px; padding-left:114px;overflow:hidden – works like a charm ;)

    • Thanks for your comment. Whether to bother about IE6 or not actually depends on your target audience. There are still clients who are insistent about making things work in IE. ;)

  77. Add:

    float: left;

    to both of the buttons. If u can, its always a good idea to specify the with property also.

  78. Since it has a “display:block”, it always renders a carriage return after the button. How would you manage to draw two of these buttons in the same row without using tables?

  79. I tried this and worked well, but after a bit more trying I found a simpler way:

    text-indent: -1000px; /* hide the value */
    line-height: 0px; /* IE6 an IE7 FIX */

    • Thanks Gopal for this fix and that you iChr for the excellent update. I found your one liner worked super in the case where I positioned by input absolutely.

  80. Pingback: IE not interpreting text-indent on submit buttons ? | My Blog

  81. A great fix for a crummy browser! Many thanks for this. I like your design too!

  82. Thanks you! Great fix!

  83. Thanks for the great fix …

  84. The only thing you need to negatively indent text in an input type=”button” is to put “text-transform:capitalize” :)

  85. thankx today u saved my time .

  86. This is a great Fix!!
    Thanks a bunch.

    (Could we not just kill IE?)

  87. Thanks for the fix, saved me a few minutes and a small headache.

  88. Thanks much for this helpful tip. I was getting frustrated with IE.

  89. Thanks, I will use this many times I am sure!

  90. Thanks dear it’s working for me!!!

  91. Thanks, this was making me mad when I couldn’t figure it out :]

  92. Thanks for the tip.

    One pet peeve though. When specifying something as 0 you don’t need to add px or em or anything to it. A simple 0 does the job.

    0px is the same as 0elephants

  93. Thnx, this comes in handy!

  94. Pingback: styling forms – the 21st century way « DocuView - document management system

  95. Sribanta Kumar Sahoo July 22, 2009 6:52 am

    Nice hack!!!!

    Thanks a lot…

  96. SPANKING fix sir, solved my problems.

  97. Thanks for this admin! For those who are asking about the reasons why someone would want to do this…. Well my reason is slightly different. I want to use an image as a background and slide it upwards for the hover state. Just as you would do for a normal link. And this helps to achieve that.

  98. Thanks a lot for this fix, I’ve just fixed my problem with your code.

    Thanks!

  99. Thanks everyone, for taking the pain to comment here :)

  100. Thanks a million, this tip was exactly what I was looking for to fix a client job.

    Consider me subscribed… Awesome looking blog too…

  101. Pingback: 10 properties that were impossible to implement in IE6 | Productivedreams.com

  102. Hi Gopal, What about using “button” tag? http://www.w3schools.com/tags/tag_button.asp

    Also about this site. Is I am missing a fav icon on your wesite ?

  103. Great Fix, But you can also achief this (text-indention on IE/FF/Safari) by setting the text-align attribute to align left and text-indent to a negative value.

    .class a{
    text-align:left;
    text-indent:-3000px;
    }

  104. Fantastic – this is the only solution I’ve seen that works in IE8 as well as 7 :)

    Thanks for a great tutorial

  105. Thanks for the fix. It had been bothering me for quite a while. Even though this is just a tiny problem, it had delayed the launch of a website. Big relief to finally have the solution :D

  106. Thanks for the fix – I’ve been struggling wit this problem for a couple hours now – wish I’d found this earlier – well done!

  107. @Ahraham: Fortunateluy, display is not necesary, works with or without display

  108. You have a spelling mistake in your title of this artile. “interpreting” should be the right onw.

  109. Just what i needed for my cform. Thanks a lot.

  110. Hey.. thanks for the solution… nice idea on setting the font-size and line-height.
    Never though about that!
    Thank you!

  111. Thanks so much…………. your great…. muah xD:

  112. Thanks so much for this – I’ve had this problem for ages – my workaround was to include submit in tags or, more brutally, make font-size so large that text would disappear from screen.

    Your solution even works in IE6!

    Thanks again.

  113. Many thanks for sharing this great tip! It saved me time and patience :)

  114. Text-indent On submit button doesn’t seem to work on Opera. Has anybody found a fix for Opera?

  115. Many thanks for sharing your solution. It saved me quite a bit of time =)

  116. Just the solution i was looking for, tried text-indent and padding. now i got a proper cross browser method. Thanks i’ll be using this a lot.

  117. Brilliant solution thank you. Been looking for this solution for about an hour. works great.

  118. This is what I looking for all the time, thanks I was found it here ;)

    • Hi Gopal

      Great fix but it doesn’t work in Opera? Someone else mentioned this too.

      Is there a fix for the browser?

  119. wow man that’s awesome! a clean fix for my freaking IE problem. thanks dude!

  120. great fix!

    fyi: display: block; forces the button down if is displayed next to an input.
    if you use display: inline; the fix still works.

  121. Oh man, thank you so much for this!

    I have been struggling with this one for quite some time, and it is great to find a simple and logical answer to it.

    Your site is hereby bookmarked.

  122. Thanks Gopal for the fix…

  123. This was a very good fix, thanks a bunch!

  124. @Jack Excellent!! That does the trick.

  125. I didn’t know that type image won’t work in IE. I have seen it used in many places.

    Yeah I noticed the 1px in ie6. Just played with it and I think the code below is also working fine(FF and ie6)

    .button{
    width:114px;
    height:37px;
    border: none;
    background: transparent url(submit_btn.gif) no-repeat center;
    text-indent: -9999px;
    line-height:0;
    display:block;
    }

  126. @Jack That is a very valid question :)

    Using Input type image to replace submit isn’t ideal, since some browsers(eg: IE) may not even submit the form. That is one of the main reasons why we have a input type=”submit”

    Regarding font-size:0 for input type=button, it gives the same result as for font-size:1px; in IE6. For some reason IE takes 1px for fonts even if you give 0px.
    However, font-size:0px works fine in IE7. So I’ve modified my post accordingly.

    I hope this helps. Please do let me know if you have further questions.

  127. I think we have a type=”image” option for this.

    If it has to be type=”button”, I think using font-size:0; will be better as it won’t have to rely on line-height and color.

  128. I see! Thank you for sharing this!

    Cheers!

  129. @Bumblebee That’s a very good question :) First of all, it is a standard to add the value attribute for buttons. There are browsers that doesn’t support CSS. Those browsers would display the button text, only in the presence of the value attribute.

  130. ..ah, may be a foolish suggestion, but, if you are using a custom background image with “Submit” written on it, then why do you need the VALUE=”Submit” for the INPUT element? Can’t you just remove that than worrying for the fix?