Form Problem in ONLY IE6 and IE7

Question

For some reason the form inputs are pushing off the left margin.. I have no clue why!

Below is the link..

http://mimedx.com/mg/contactus.php

I have no clue why this is happening. Probably Microsoft being Microsoft and having some random rule that conflicts with standards..

CSS:

#content form { overflow: hidden; width: 550px; }
#content form ul { padding: 0; }
#content form li { list-style: none; float: left;  width: 250px; padding: 4px 0; }
#content form label { display: block;  width: 100px; line-height: 15px; font-size: 1em; padding-bottom: 2px; font-weight: bold;}
#content form input { display: block;  width: 200px; padding: 4px; margin: 0; line-height: 14px; font-size: .9em; background-color: #f7f7f7; border: 1px solid #d4d4d4; color: #4d4d4d; }

HTML:

        <form action="/mail.php" method="post" name="contactForm" id="contactForm">           
 <ul>
  <li>
   <label for="first_name">First Name</label>
   <input type="text" name="first_name" id="first_name" />
  </li>
  <li>
   <label for="last_name">Last Name</label>
   <input type="text" name="last_name" id="last_name" />
  </li>
  <li>
   <label for="phone">Phone</label>
   <input type="text" name="phone" id="phone" />
  </li>
  <li>
   <label for="email">Email</label>
   <input type="text" name="email" id="email" />
  </li>   
  <li class="full">
   <label for="comments">Comments</label>
   <textarea name="comments" id="comments"></textarea>
  </li>
  <li>
   <input type="submit" name="submit" id="submit" value="Submit" />
  </li>
 </ul>
    </form>

Answer 1

The list elements are responsible, quite a common problem in IE.

Try setting

#content form ul { margin: 0; }
#content form li { margin: 0; }

More generally, you might find using a reset css useful. This removes browser specific styling and gives you a 'blank canvas' to work from. I always use the YUI Reset but there are plenty of options out there.