Box issue in Chrome versus Firefox

Question

In Chrome, notice that that input area under "Your contact info" lines up with the border for div#contact. Also notice that the textarea under "Message" does not line up with that border; it's moved in a couple pixels. This is not the behavior I prefer.

In Firefox, everything lines up on the left. It's a little difficult, but you can see that in this screencap. This is the behavior I prefer.

My problem is obvious: how do I get those input areas to line up on the left (as in the Firefox image)?

Here is the HTML (non-working skeleton form code) that's rendered for that portion of the page (which resides in the footer of the page).

<div id="footer">   
  <div id="contact"> 
    <h1>Talk to me</h1> 
      <div id="email-me">You can email me at <a href="mailto:address@server.com">address@server.com</a><br/> 
      or fill out the form below!
    </div> 
    <form> 
      <div id="email"> 
        <h2>Your contact info</h2> 
        <input type="text"/><br/> 
      </div> 
      <div id="message"> 
        <h2>Message</h2> 
        <textarea rows="10" cols="75"></textarea><br/> 
      </div> 
      <input class="buttons" type="submit" value="Send"/> 
    </form> 
  </div> 
</div>

Here's the CSS. It's quite long, so I was going to edit out some parts, but I decided against it in case some small piece makes the difference.

#footer {
    clear:both;
    background-color:#8BA5B5;
    min-height:400px;
    font-size:13px;
    font-family:Helvetica,Verdana,Arial,sans-serif;
    color:#fff;
    padding-left:105px;
    padding-top:30px;
    padding-bottom:45px;
    position:relative;
    top:5px;
    overflow:hidden;
}

  #footer h1 {
    font-size:15px;
    margin:0px;
    margin-bottom:5px;
  }

  #footer a {
    color:#DAEBF5;
    text-decoration:none;
    margin-bottom:5px;
  }

    #footer a:visited {
        color:#333;
        text-decoration:none;
    }

    #footer a:hover {
      text-decoration:underline;
    }

  #email-me {
    font-size:16px;
    padding-left:2px;
    margin-bottom:10px;
    text-align:center;
  }

    #email-me a {
      font-size:18px;
      font-style:normal;
    }

  #contact {
    float:left;
    overflow:hidden;
    font-style:oblique;
    font-family:georgia,times,serif;
  }

    #contact h1 {
      font-size:44px;
      font-style:normal;
      text-align:center;
      font-family:helvetica,verdana,arial,sans-serif;
    }

    #contact h2 {
      margin:0px;
      font:inherit;
    }

    #contact input {
        background-color:transparent;
        border:1px solid #fff;
        color:#fff;
        width:50%;
    }

    #contact textarea {
        background-color:transparent;
        border:1px solid #fff;
        color:#fff;
    }

    #contact #message {
      margin-top:5px;
        margin-bottom:5px;
    }

    #contact .buttons {
      font-family:inherit;
      font-weight:800;
      font-size:12px;
      padding:5px;
      width:100%;
      background-color:#fff;
      color:#8BA5B5;
    }

Answer 1

It seams that your margins are off... Are you using a CSS reset to level the style across all browsers?

try setting margin:0; to your inputs

For a css reset, I recommend:

http://meyerweb.com/eric/tools/css/reset/

Answer 2

 #contact input, #contact textarea { 
    margin:0px;
}