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

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

posted on 2009-07-18 20:24 johngeng 阅读(221) 评论(0) 编辑收藏举报

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

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

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	}