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>
<head>
<title>ProductiveDreams</title>
<link href=”style.css” rel=”stylesheet” type=”text/css”/>
</head><body>
<input type=”submit” value=”Submit” class=”button”>
</body></html>
2: Style Sheet
I included the following in my stylesheet.
input.button {
width:114px;
height:37px;
border: none;
background: transparent url(images/submit_btn.gif) no-repeat center;
overflow: hidden;
text-indent: -999px;
}
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.
input.button{
width:114px;
height:37px;
border: none;
background: transparent url(images/submit_btn.gif) no-repeat center;
overflow: hidden;
text-indent: -999px;
font-size: 0px;
display:block;
line-height: 0px;
}
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.
Downloaded a total of 70 times
