positioning in firefox and google chrome not matching up - html

Question

The first image is how it looks (correctly) in google chrome, the second image is how it looks (incorrectly) in firefox.
Any tips that might help me resolve this in firefox? Thank you.
<div class="container">
<div id="top">
<div class="top-bar">
<div id="logo"></div>
<div class="top-bar-red-stripe">
<ul class="top-bar-social-btns">
<li>facebook</li>
<li>facebook</li>
</ul>
</div>
</div><!-- /.top-bar -->
<div id="top-left-content">
<h3>This is a title</h3>
<div class="race-drivers"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
<div id="video-content">
<h3>LATEST WEBISODE</h3>
<div class="video-file"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing</p>
View all webisodes
</div>
<div id="vote-content">
<h3>VOTE FOR WHAT HAPPENS NEXT</h3>
<div class="vote-bar">
Enhancements
Compass
Activities
Vote
</div>
</div><!-- #vote-content -->
</div><!-- /#top -->
</div><!-- /.container -->
.container {
width: 960px;
margin: 0 auto;
border: #outside-border;
#top {
background: #000 url('../images/top_background.jpg') no-repeat;
height: 505px;
#video-content {
position: absolute;
margin: 0;
padding: 0;
top: 85px;
right: 239px;
border: 1px solid red;
width: 500px;
h3 {
margin: 0;
}
p {
margin: 0;
}
.video-file {
position: absolute;
background: #ccc;
border: 2px solid #3592cd;
width: 400px;
height: 240px;
}// .video-file
a.all-webisodes-btn:link, a.all-webisodes-btn:visited {
display: inline-block;
overflow: hidden;
text-indent: -9999px;
background: transparent url('../images/all-webisodes-btn.png') no-repeat;
width: 88px;
height: 65px;
position: absolute;
top: 107px;
right: -2px;
}// .all-webisodes-btn
}// #video-content
#vote-content {
width: 442px;
position: absolute;
top: 328px;
right: -523px;
position: relative;
h3 {
margin: 0 0 0 15px;
}
.vote-bar {
position: relative;
//border:1px solid red;
background: transparent url('../images/vote-bar-bg.png') no-repeat;
width: 438px;
height: 73px;
position: relative;
a:link, a:visited {
display: inline-block;
overflow: hidden;
text-indent: -9999px;
}
a.vote-enhancements:link, a.vote-enhancements:visited {
background: transparent url('../images/enhancements_btn.png') no-repeat;
width: 86px;
height: 42px;
position: relative;
top: 10px;
left: 170px;
}
a.vote-compass:link, a.vote-compass:visited {
background: transparent url('../images/compass_btn.png') no-repeat;
width: 52px;
height: 42px;
position: relative;
top: 10px;
left: 190px;
}
a.vote-activities:link, a.vote-activities:visited {
background: transparent url('../images/activities_btn.png') no-repeat;
width: 56px;
height: 42px;
position: relative;
top: 10px;
left: 210px;
}
a.vote-btn:link, a.vote-btn:visited {
background: transparent url('../images/vote-now-btn.png') no-repeat;
width: 141px;
height: 34px;
position: relative;
top: 47px;
left: 73px;
}
}// .vote-bar
}// .vote-content
}// #top
}// .container
UPDATE: fixed, set position to relative for #video-content and set position to absolute for children elements
#video-content {
width: 500px;
position: relative;
top: 10px;
left: 459px;
h3 {
margin: 0;
}
.video-file {
position: absolute;
background: #ccc;
border: 2px solid #3592cd;
width: 400px;
height: 240px;
}// .video-file
a.all-webisodes-btn:link, a.all-webisodes-btn:visited {
display: inline-block;
overflow: hidden;
text-indent: -9999px;
background: transparent url('../images/all-webisodes-btn.png') no-repeat;
width: 88px;
height: 65px;
position: absolute;
top: 100px;
right: -3px;
}// .all-webisodes-btn
}// #video-content

Answer 1

It looks like the #video-content element might have margin in Firefox. That should be removed before absolute positioning elements.
Try this at the beginning of your CSS:
* { margin: 0; padding: 0px; }