Margins and Padding for Forms Not Responding in IE8 - css

Question

We're coming to the end of a huge site redesign, so I'm testing and checking, cross-browser and all that. I was so proud of my beautiful forms with image hovering and checked it in IE8 only to see that the padding and margin for the text was all messed up.
Here's a link to an image displaying the problem: http://i.imgur.com/F6zPP.jpg
It's not a huge deal, just extremely annoying from a designer's point of view and probably the user's too.
Here's a jsfiddle to see what the form looks like: http://jsfiddle.net/kennyk3/qL96P/
And here's the HTML/CSS for the form:
<div id='account'>
<form id='login' action='signin.php' method='post' accept-charset='UTF-8'>
<fieldset class='topform'>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<div id='front_login_text'>
<label for='email'>Email:</label>
<input type='text' name='email' id='email' class='textInput' maxlength='50' />
<label for='password'>Password:</label>
<input type='password' name='password' id='password' class='textInput' maxlength='50' />
</div>
<input type='submit' name='Submit' value='' class='loginsubmit' />
<p class='remtext'><input type='checkbox' class='rememberme' name='remember' value='remember' />Remember me on this computer</p>
<p class='notamember'><strong>Not a Member?</strong> <a href='/register.php'>Sign Up Today!</a></p>
</fieldset>
</form>
<p class='forgotpw'>Forgot Your Password? <a href=''><strong>Click Here to Reset it.</strong></a></p>
</div>
<div class='break'></div>
<div id='button'>
<a href='' class='toursprite' title='Take the Tour'>Take the Tour</a>
</div>
.topform {
padding: 60px 0 0 20px ;
border: none;
}
.textInput
{
width: 190px;
height: 39px;
background: url(../images/textfield-bg.png) no-repeat;
border: none;
color: #929292;
padding: 0 20px 0 10px;
margin: 5px 0 0 0;
overflow: hidden;
}
.textInput:hover {
background: url(../images/textfield-hover.png) no-repeat;
}
#account label {
float: left;
text-align: right;
width: 60px;
font-size: 14px;
margin: 12px 10px 0 0;
color: #929292;
}
#account fieldset {
width: 300px;
}
#front_login_text input:focus, #front_login_text textarea:focus {
outline: 0;
background: url(../images/textfield-hover.png) no-repeat;
}
#side_login_text input:focus, #side_login_text textarea:focus {
outline: 0;
background: url(../images/textfield-hover-small.png) no-repeat;
}
#side_optin_text input:focus, #side_optin_text textarea:focus {
outline: 0;
background: url(../images/textfield-hover-small.png) no-repeat;
}
.loginsubmit {
float: right;
margin: 10px 5px 0 0;
width: 70px;
height: 35px;
background: url(../images/login-btn.png) center no-repeat;
border: 0 none;
cursor: pointer;
}
.loginsubmit:hover {
float: right;
margin: 10px 5px 0 0;
width: 70px;
height: 35px;
background: url(../images/login-btn-hover.png) center no-repeat;
border: 0 none;
cursor: pointer;
}
.loginsubmit:active {
float: right;
margin: 10px 5px 0 0;
width: 70px;
height: 35px;
background: url(../images/login-btn-active.png) center no-repeat;
border: 0 none;
cursor: pointer;
}

Answer 1

When dealing with cross browser compatible forms. Make sure you define line-height for the fields. It can make all the difference and may fix your inconsistencies.

Answer 2

If you set the line-height to be something like 200% or 250%, it should still display in the center for Chrome and in IE should be much closer to the center. I just tried it on your forms.
It's not as clean as a browser specific CSS fix, but it might serve your needs.
.textInput
{
width: 190px;
height: 39px;
background: url(http://i.imgur.com/sEdWU.png) no-repeat;
border: none;
color: #929292;
padding: 0px 20px 0 10px;
margin: 5px 0 0 0;
overflow: hidden;
line-height:220%;
}

Answer 3

IE8 reads margins funny and sometimes collapses them. Rather than redoing anything do this CSS hack:
.textInput
{
width: 190px;
height: 39px;
background: url(http://i.imgur.com/sEdWU.png) no-repeat;
border: none;
color: #929292;
padding: 0 20px 0 10px;
margin: 5px 0 0 0;
padding: 10px 20px 0 10px\9;
overflow: hidden;
}