27 January 2010 ~ 3 Comments

IE not interpreting text-indent on submit buttons ?

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

Sample Image

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.

IE Issue

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.

Tags:

3 Responses to “IE not interpreting text-indent on submit buttons ?”

  1. getting the motivation to lose weight 28 January 2010 at 4:04 pm Permalink

    I like the way you write, few parts I had to read twice :D but still good stuff.

  2. how to ollie 30 January 2010 at 7:56 pm Permalink

    Good post… I’m always on the lookout for good blogs.

  3. amazon coupon 16 February 2010 at 2:49 am Permalink

    great read. I would love to follow you on twitter.