Box issue in Chrome versus Firefox - css

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 address#server.com<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;
}