HTML & CSS - Issue with margins in IE and Chrome - html

Question

I've been stumped at this for the past 2 hours and I am looking for some help. Basically this layout works fine in Firefox (The text spacing, the elements and contact form all look good). In IE & Chrome the top margin of everything seems almost double. Here is the code:
HTML
<div id="contentBody">
<br>Company</br>
<p>Address 1</p>
<p>Address 2</p>
<br>Tel</br>
<br>Fax</br>
<br>E-Mail</br>
<div id="ekontakt">
<p>
<p><b>Title</b></p> <p>Name</p> <p>E-Mail</p>
<p><b>Title</b></p> <p>Name</p> <p>E-Mail</p>
<p><b>Title</b></p> <p>E-Mail</p>
</div>
<div id="map-canvas">
<a href="google maps link" target="blank" />
<img src="images/map.jpg" />
</a>
</div>
<form action="mailer.php" method="post" class="contactform">
<!-- Bunch of Labels removed, these work fine -->
</form>
</div>
CSS
#ekontakt
{
font-size:12px;
margin:2em auto -32em 0em;
}
#map-canvas {
background-image: url(../images/map.jpg);
width: 300px;
height: 200px;
margin:33.5em 0em -50em 0em;
line-height: 0px;
}
.contactform {
margin: -5em -7em 0em 30em;
max-width: 500px;
background: #555;
padding: 20px 20px 20px 20px;
font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #D3D3D3;
text-shadow: 1px 1px 1px #444;
border: 2px solid;
border-radius: 0px;
border-color: #FFFFFF;
opacity: 0.8;
filter: alpha(opacity=80); /* For IE8 and earlier */
overflow: hidden;
position: relative;
}
Thanks for the help in advance!