Productivedreams.com A blog to keep you updated on the latest design trends.
The following image(button background) has been used for this tutorial. You may right click and save it.
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.
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.
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!
please will you help me get this to play in IE?
Thanks a lot for this info, i also found that:
input.button { text-indent: -9000px; text-transform: capitalize; }
Works!
tnx it works =)
Really perfect answer, i need this solution…..
Worked Great. ur site design is awesome
Thanks for this….good reference – might need inline-block in some instances
thnx…it works!!!
Thanks!
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.
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!
this works for ie7 and higher {
text-indent: -9999px;
text-transform: uppercase;
}
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
Thanks for this, just needed it.
Nice one… it is working fine…
Thanks…
Thanks , very helpful
Bang tidy man! Worked for me straight away, cheers fella!
you are awesome – thanks for quick and easy fix . Good trick.thanx for sharing
Would be great, if it did anything.
Does not do anything. Does not fix problem. Does not change anything whatsoever.
never mind, was my fault
Quick and simple. Thanks Gopal.
Worked like a charm, thanks!
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.
Just wanted to also offer some appreciation for posting this solution. Helped me out
You make my day !
Thanks a lot !!!
Thanks Gopal, simple and helpful.
Thanks for posting this. Helped me out big time..
Thanks! Helped me a lot!
Thanks a lot !
Nice and Simple.. It saved my time
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.
Thanks a bunch! Just finishing a job and this saved the rest of the night! Thank you again!!!
Many thanks for sharing.Its helpfull.
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
Good trick.thanx for sharing
Nice and simple solution. Thanks for posting it.
Just use this in your ie.css… it’s that simple
you are awesome – thanks for the quick and easy fix
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.
Just use this in your ie.css… it’s that simple
Nice and simple solution. Thanks for posting it.
this did the trick. thanks a bunch.
Thanks very much for this tip Gopal, I love this comment form as well!
Muito bom, ajudou bastante. Em uma pequena pesquisa, ajudou em uma grande trabalho. Add no Favoritos…
Thank you!
Congratulations!
This was perfect. Exactly the problem I was having. Thanks.
many thanks this worked a treat!
Thanks very much worked perfectly, another hack for my arsonal!
Thks a ton Dude
Great… its working for me.. Thanks
nice tip
yeah.. it’s really work for my blog.. thanks
Thanks Gopal Raju.
It worked… thanks
spot on! – worked perfectly – thanks.
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!
Thanks, works perfectly.
thx for the tip, it saved my day!
Works like a charm. Thanks for sharing!
It’s nice article. it is worked perfectly.
thanks for the nice article.
Just what I needed! Thanks.
Keep Rocking
thank u so much it works perfectly
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;
}
.
.
.
gotta love comments like these!
its like saying: “thanks for nothing, now also fix me dinner”
Thanks, It help me to save a lot of time
Thanks. I was having this exact problem and your solution fixed it.
Thanks for the help!
This seems to work for me without the need for font-size: 0;
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!
Really impress…
It’s working nice.
Thanks a lot buddy.
Finally something that worked. Thank you.
Thanks. This worked well! You saved my life…
Thanks, worked wonderfully
cool…works for me. thanks!
Gold. Thanks for sharing – that one had me scratching my head for a while
Nice little fix, i found that display: inline-block; worked nice to keep buttons in a row.
Cheers
Tom
Thanks for sharing that tip here, Tom
thanks, it works!
I just ran across this error and your explanation was clear and concise. Thanks for sharing.
Also, you’re comment submission form is awesome!
Thanks for your comment Curtis
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.
Thank you very much for this problem solution.
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.
Great tipp! Thanks.
Thanks. This was perfect!
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!
Thanks Graysen. Also, this method doesn’t use any IE specific CSS hack.
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.
Excellent
Add:
float: left;
to both of the buttons. If u can, its always a good idea to specify the with property also.
Thanks for your answer, I was about to reply the same
Yes, that works, but it aligns both buttons to the left. Is there a way to center the whole thing?
Thanks for your anwser.
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?
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.
Pingback: IE not interpreting text-indent on submit buttons ? | My Blog
A great fix for a crummy browser! Many thanks for this. I like your design too!
Thanks Michael
Thanks you! Great fix!
Thanks for the great fix …
The only thing you need to negatively indent text in an input type=”button” is to put “text-transform:capitalize”
rad thx
this also works with input type=submit, just a 1 line fix.. thanks @Slav
thankx today u saved my time .
This is a great Fix!!
Thanks a bunch.
(Could we not just kill IE?)
Thanks for the fix, saved me a few minutes and a small headache.
Thanks much for this helpful tip. I was getting frustrated with IE.
Thanks Kyle… This bug used to annoy me badly
Thanks, I will use this many times I am sure!
Thanks dear it’s working for me!!!
Thanks, this was making me mad when I couldn’t figure it out :]
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
Thnx, this comes in handy!
Pingback: styling forms – the 21st century way « DocuView - document management system
Nice hack!!!!
Thanks a lot…
SPANKING fix sir, solved my problems.
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.
Thanks a lot for this fix, I’ve just fixed my problem with your code.
Thanks!
Thanks everyone, for taking the pain to comment here
Thanks a million, this tip was exactly what I was looking for to fix a client job.
Consider me subscribed… Awesome looking blog too…
Pingback: 10 properties that were impossible to implement in IE6 | Productivedreams.com
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 ?
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;
}
Fantastic – this is the only solution I’ve seen that works in IE8 as well as 7
Thanks for a great tutorial
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
Thanks for the fix – I’ve been struggling wit this problem for a couple hours now – wish I’d found this earlier – well done!
@Ahraham: Fortunateluy, display is not necesary, works with or without display
You have a spelling mistake in your title of this artile. “interpreting” should be the right onw.
oh! That was a typo. Thanks for letting me know
Just what i needed for my cform. Thanks a lot.
Hey.. thanks for the solution… nice idea on setting the font-size and line-height.
Never though about that!
Thank you!
Thanks so much…………. your great…. muah xD:
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.
Many thanks for sharing this great tip! It saved me time and patience
Text-indent On submit button doesn’t seem to work on Opera. Has anybody found a fix for Opera?
Many thanks for sharing your solution. It saved me quite a bit of time =)
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.
Brilliant solution thank you. Been looking for this solution for about an hour. works great.
This is what I looking for all the time, thanks I was found it here
Thanks everyone
Hi Gopal
Great fix but it doesn’t work in Opera? Someone else mentioned this too.
Is there a fix for the browser?
wow man that’s awesome! a clean fix for my freaking IE problem. thanks dude!
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.
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.
Thanks Gopal for the fix…
This was a very good fix, thanks a bunch!
Thank you for the quick fix!
@Jack Excellent!! That does the trick.
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;
}
@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.
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.
Nice solution.
I see! Thank you for sharing this!
Cheers!
@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.
..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?