HTML＆amp; CSS - IE和Chrome中的边距问题

Question

过去2个小时我一直对此感到难过，我正在寻求帮助。基本上这种布局在Firefox中运行良好（文本间距，元素和联系人形式都很好看）。在IE＆amp; Chrome的顶部边缘似乎几乎翻了一番。这是代码：

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;
}

提前感谢您的帮助！