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 |
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.
| 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: 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.