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”.
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.
http://www.productivedreams.com/wp-content/plugins/download-monitor/download.php?id=pd_textindent_ie.zip