I have a form on a webpage, contained in a div. I have set the margin and paddings of both elements appropriately, but for some reason in IE the left margin is too small!

Here is the code, if anyone could help that would be great!

Code:
<div class="infoBox"><span class="infoBoxHead">login</span>
        <div>
          <div>
            <form action="" method="post" name="frmLogin" class="login" id="frmLogin">
              <p>
                <label for="textfield">username</label>
                <input name="textfield" type="text" id="textfield" size="20" />
              </p>
              <p>
                <label for="label">password</label>
                <input name="textfield2" type="password" id="label" size="20" />
              </p>
              <p>
                <input name="btnLogin" type="submit" class="button" id="btnLogin" value="Login" />
              </p>
            </form>
          </div>
        </div>
      </div>
Code:
.infoBox {
padding:0 5px;
margin-top:10px;}

.infoBoxHead {
display:block;
background:url(../image/bgHead.jpg) repeat-x 0 0;
font-size:120%;
margin:0;
padding:.3em;
color:#FFF;}

.infoBox p {
padding:2px 0;
margin:0;}

.infoBox ul {
padding-left:15px;
margin-bottom:5px;}

.infoBox div {
padding:0 4px;}

.infoBox div div {
border:#1DA7C5 solid;
border-width:0 1px 1px 1px;
padding-top:1px;}

form {
width:500px;
margin:5px auto;
padding:5px;
clear:both;
background-color:#F8F8F8;
border:#CCC solid 1px;
color:#666;}

form h1 {
margin-top:0;}

input, textarea {
background-color:#FFF;
border:#42C3FA solid 1px;
color:#39AFDD;
padding:2px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;}

label {
display:block;
color:#555;
text-align:right;
margin:0 .5em 0 0;
padding:.25em 0 0 0;
color:#999;}

.login {
width:140px;
background-color:#FFF;
clear:both;
border:none;
margin:0 0 0 5px;
padding:0;
border:#000 solid 1px;}

.login label {
text-align:left;
width:70px;}

.button {
margin:.25em 0 0 .5em;}

I think thats all the necessary code ;)