Question

This issue has been driving me crazy all morning. I’ve been trying to get my input field with a custom background to align correctly in IE. I read other questions that said line-height will fix it, but that hasn’t been working.

It looks fine in chorme/safari/etc but in IE8 the text is stuck to the top of the input area. (Stack won’t let me post images yet). My CSS is:

#email {
background: url('BACKGROUND IMAGE') left top no-repeat;
background-size: 273px 38px;
width: 273px;
height: 38px;
line-height: 38px;
border: 0;
margin: 0 0 5px;
font: bold 12px arial, helvetica, sans-serif;
color: #777;
padding:0 8px;
outline: none;
float:left;
}

and the HTML:

<input id="email" type="text" name="email" size="14" value="your email address" onfocus="if(this.value=='your email address') {this.style.color='#333'; this.value='';}" onblur="if(this.value== '') {this.style.color='#808080'; this.value='your email address';}" />

Any ideas on how to get my input text to vertically center in IE 8 and lower?

Answer 1

This should be easy to fix. The line-height property is important, but it seems to get lost in IE8 when you’re using the shorthand font property. Try adding in the line-height to the shorthand font property, and removing the line-height that you have declared separately.

#email {
background: url('BACKGROUND IMAGE') left top no-repeat;
background-size: 273px 38px;
width: 273px;
height: 38px;
border: 0;
margin: 0 0 5px;
font: bold 12px/38px arial, helvetica, sans-serif;
color: #777;
padding:0 8px;
outline: none;
float:left;
border:1px solid #999;
}

Here’s a jsFiddle example for you (border added just to show how it’s aligning).