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: 0px;
|
| 11 | display:block;
|
| 12 | line-height: 0px;
|
| 13 | } |
5: How it works
Let's see how it works.
font-size:0px 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: 0px Another fix for IE6.
I have included the sample files for your reference.
![Download IE text-indent issue Version 1.0]()
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.
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!