Help with firefox/ie form issue

[87dave87]

I have a problem with firefox displaying my login form differently to how it should look in IE - it looks like some sort of margin problem: -

 

 

The corresponding code for the form is: -

 

					<form id="customerLogin" name="customerLogin" method="post" action="http://www.crafting.co.uk/customer.php?xCmd=login&jssCart=ebbbf4176f26741b6f21bb93ea6b0976">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr><br>
    <td><span class="loginboxtitle">Email Address</span><br><span class="loginboxsmall">e.g. name@crafting.co.uk</span></td>
    <td><div align="right"><img src="images/cf_login_email.png"></div></td>
  </tr>
</table>
					<div><input type="text" id="xEmailAddress" name="xEmailAddress" value="" size="32"/></div>
					<span class="loginboxtitle">Password</span><br><span class="loginboxsmall">Enter your password below...</span>
					<div><input type="password" id="xCustPassword" name="xCustPassword" value="" size="32"/></div>
                      <div align="right"><br><a href="customer.php?xCmd=register"><img src="images/cf_register.png" alt="Register" width="62" height="22" border="0"></a>
<input type="image" class="button" id="submit" value="Login" src="images/cf_login.png" alt="Login"/><br>
                      </div>
					</form>

 

and the corresponding code for the CSS is: -

 

* {padding:0; margin:0}

form{
margin-top: 10px;
margin-bottom: 10px;
display: inline;
}

.loginboxtitle{
margin-top: 10px;
font-size:11px;
font-weight:bold;
color: #ffffff;
}

.loginboxsmall{
font-size:9px;
font-weight:none;
color: #ABDCF7;
}

[fanfavorite]

I believe it is more of an IE issue.  From what I can recall, IE adds a 10px or so margin to input fields for some reason, which Firefox and other browsers don't.  I would do:

 

input {

  margin:0;

}

 

and then put a div around the content you want a margin for and add a margin width.