Input Fields not Vertically Aligning in IE

css, forms, internet-explorer

Solution

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

Problem

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?

Original source