IE not interpreting text-indent on submit buttons ?
Reference: http://www.productivedreams.com/ie-not-intepreting-text-indent-on-submit-buttons/
Author: Gopal Raju
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”.| 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 |
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.
| 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: 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.