Productivedreams.com ProductiveDreams - Everything that web designers need, owned by Gopal Raju

A blog to keep you updated on the latest design trends.
RSS

IE not interpreting text-indent on submit buttons ?

Filed Under
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”.
HTML
01
02
<html>
03
<head>
04
<title>ProductiveDreams</title>
05
<link href=”style.css” rel=”stylesheet” type=”text/css”/>
06
</head>
07
<body>
08
<input type=”submit” value=”Submit” class=”button”>
09
</body>
10
</html>
11

2: Style Sheet

I included the following in my stylesheet.
CSS
01
02
input.button {
03
width:114px;
04
height:37px;
05
border: none;
06
background: transparent url(images/submit_btn.gif) no-repeat center;
07
overflow: hidden;
08
text-indent: -999px;
09
}
10
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.
CSS
01
02
input.button{
03
width:114px;
04
height:37px;
05
border: none;
06
background: transparent url(images/submit_btn.gif) no-repeat center;
07
overflow: hidden;
08
text-indent: -999px;
09
 
10
font-size: 0;
11
display:block;
12
line-height: 0;
13
}

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.

Download IE text-indent issue Version 1.0

88 Comments

Leave Your Reply

  1. Travis says: 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!
  2. Aravind says: Really impress…

    It’s working nice.

    Thanks a lot buddy.
  3. Chris Paraiso says: Finally something that worked. Thank you.
  4. Jeffri says: Thanks. This worked well! You saved my life… :D
  5. Eli says: Thanks, worked wonderfully
  6. Roy says: cool…works for me. thanks!
  7. Paul says: Gold. Thanks for sharing – that one had me scratching my head for a while :)
  8. Tom James says: Nice little fix, i found that display: inline-block; worked nice to keep buttons in a row.

    Cheers
    Tom
  9. Jimba says: thanks, it works!
  10. Curtis Miller says: I just ran across this error and your explanation was clear and concise. Thanks for sharing.

    Also, you’re comment submission form is awesome!
  11. Blaine Ehrhart says: 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.
  12. Sunil Shrestha says: Thank you very much for this problem solution.
  13. Mark says: 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.
  14. tj says: Great tipp! Thanks.
  15. Jake says: Thanks. This was perfect!
  16. Graysen says: 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!
  17. Anders says: 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 ;)
    • Gopal Raju says: 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. ;)
  18. Sajeev says: Excellent
  19. iChr says: Add:

    float: left;

    to both of the buttons. If u can, its always a good idea to specify the with property also.
  20. Adrax says: 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?
  21. iChr says: 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 */
    • ckn says: 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.
  22. Unibands says: A great fix for a crummy browser! Many thanks for this. I like your design too!
  23. Michael says: Thanks you! Great fix!
  24. saurabh shah says: Thanks for the great fix …
  25. Slav says: The only thing you need to negatively indent text in an input type=”button” is to put “text-transform:capitalize” :)
  26. ujwol says: thankx today u saved my time .
  27. Alby Barber says: This is a great Fix!!
    Thanks a bunch.

    (Could we not just kill IE?)
  28. Evan Reeves says: Thanks for the fix, saved me a few minutes and a small headache.
  29. Kyle Steed says: Thanks much for this helpful tip. I was getting frustrated with IE.
  30. Macdara says: Thanks, I will use this many times I am sure!
  31. Kruti says: Thanks dear it’s working for me!!!
  32. Rob says: Thanks, this was making me mad when I couldn’t figure it out :]
  33. David says: 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
  34. jpk says: Thnx, this comes in handy!
  35. Sribanta Kumar Sahoo says: Nice hack!!!!

    Thanks a lot…
  36. Gav says: SPANKING fix sir, solved my problems.
  37. JP says: 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.
  38. Ange Chierchia says: Thanks a lot for this fix, I’ve just fixed my problem with your code.

    Thanks!
  39. Gopal says: Thanks everyone, for taking the pain to comment here :)
  40. Forest says: Thanks a million, this tip was exactly what I was looking for to fix a client job.

    Consider me subscribed… Awesome looking blog too…
  41. Lijeesh says: 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 ?
  42. Nico says: 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;
    }
  43. Paul says: Fantastic – this is the only solution I’ve seen that works in IE8 as well as 7 :)

    Thanks for a great tutorial
  44. Susheel says: 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
  45. Damien Buckley says: Thanks for the fix – I’ve been struggling wit this problem for a couple hours now – wish I’d found this earlier – well done!
  46. alberto fortes says: @Ahraham: Fortunateluy, display is not necesary, works with or without display
  47. Louis says: You have a spelling mistake in your title of this artile. “interpreting” should be the right onw.
  48. Mark says: Just what i needed for my cform. Thanks a lot.
  49. Joksin says: Hey.. thanks for the solution… nice idea on setting the font-size and line-height.
    Never though about that!
    Thank you!
  50. reynan says: Thanks so much…………. your great…. muah xD:
  51. modeck says: 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.
  52. Luca says: Many thanks for sharing this great tip! It saved me time and patience :)
  53. koji says: Text-indent On submit button doesn’t seem to work on Opera. Has anybody found a fix for Opera?
  54. Ivan Wong says: Many thanks for sharing your solution. It saved me quite a bit of time =)
  55. Peat says: 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.
  56. Denise says: Brilliant solution thank you. Been looking for this solution for about an hour. works great.
  57. Jauhari says: This is what I looking for all the time, thanks I was found it here ;)
  58. Gopal says: Thanks everyone :)
    • Enor Anidi says: Hi Gopal

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

      Is there a fix for the browser?
  59. Ivan says: wow man that’s awesome! a clean fix for my freaking IE problem. thanks dude!
  60. Abraham says: 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.
  61. Gunnar Bruun says: 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.
  62. Satyam says: Thanks Gopal for the fix…
  63. Alex says: This was a very good fix, thanks a bunch!
  64. Brian Bartholomew says: Thank you for the quick fix!
  65. Gopal says: @Jack Excellent!! That does the trick.
  66. Jack says: 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;
    }
  67. Gopal says: @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.
  68. Jack says: 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.
  69. Navdeep says: Nice solution.
  70. Bumblebee says: I see! Thank you for sharing this!

    Cheers!
  71. admin says: @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.
  72. Bumblebee says: ..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?