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.
1: HTML Code
Create a HTML page and insert a button with a class, “button”.
| 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.
| 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.
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.
| 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]()
Thanks for this!
It’s working nice.
Thanks a lot buddy.
Cheers
Tom
Also, you’re comment submission form is awesome!
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.
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.
float: left;
to both of the buttons. If u can, its always a good idea to specify the with property also.
Thanks for your anwser.
text-indent: -1000px; /* hide the value */
line-height: 0px; /* IE6 an IE7 FIX */
Thanks a bunch.
(Could we not just kill IE?)
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
Thanks a lot…
Thanks!
Consider me subscribed… Awesome looking blog too…
Also about this site. Is I am missing a fav icon on your wesite ?
.class a{
text-align:left;
text-indent:-3000px;
}
Thanks for a great tutorial
Never though about that!
Thank you!
Your solution even works in IE6!
Thanks again.
Great fix but it doesn’t work in Opera? Someone else mentioned this too.
Is there a fix for the browser?
fyi: display: block; forces the button down if is displayed next to an input.
if you use display: inline; the fix still works.
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.
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;
}
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.
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.
Cheers!