FF rendering position relative different than all other browsers - html

Question

My website, http://dev.markzanghi.com, is rendering incorrectly in firefox and i don't know why.
Every other browser, including IE renders it correctly. The link above will display the mistake. Basically, i need two parts to my header for an animation. Below is my CSS
/*
TOP BAR
*/
.topbar {
height: 75px;
background: url('../img/headerBGtop.png') repeat-x;
}
.bottomTopBar {
background: url('../img/headerBGbottom.png') repeat-x;
height: 6px;
position: relative;
top: 64px;
}
.topbar .headerWrapper {
max-width: 924px;
margin: 0 auto;
padding: 0 5px;
}
.bottomHeader {
position: relative;
top: -11px;
left: 0px;
z-index: 1;
}
.headerArrowImg {
width: 924px;
overflow: hidden;
}
.bottomFiller {
position: relative;
top: -24px;
background: url(/img/headerBGbottom);
height: 11px;
}
#leftBottomHeader {
}
#rightBottomHeader {
top: -35px;
}
.logo {
float: left;
margin-top: 13px;
}
.logo img {
height: 55px;
}
.topbarLinks {
float: right;
text-decoration: none;
position: relative;
top: 44px;
z-index: 10;
}
.topbarLinks a{
color: white;
margin-left:25px;
padding: 10px 0px;
}
.topbar .headerArrowImg img {
max-width: none;
position: relative;
left: -200px;
}
And the HTML:
<header>
<div class="topbar navbar-fixed-top" >
<div class="headerWrapper">
<div class="logo">
<img src="img/homeLogo.png" />
</div>
<div class="topbarLinks">
<a id="workLink" href="#"><img src="img/workLink.png" /></a>
<a id="aboutLink" href="#/about"><img src="img/aboutLink.png" /></a>
<a id="contactLink" href="#/contact"><img src="img/contactLink.png" /></a>
</div>
<div id="bottomHeaderWrap" class="bottomHeader">
<div class="headerArrowImg">
<div id="arrowImgWrapper">
<img src="/img/headerArrowImg.png" />
</div>
</div>
</div>
</div>
<div id="leftBottomHeader" class="bottomFiller">
</div>
<div id="rightBottomHeader" class="bottomFiller">
</div>
</div>
</header>
If anyone has any idea why this is not working, please let me know!
Thanks in advance.

Answer 1

I had the same issue with a menu animation a while back.
The "problem" is that Firefox requires an explicit declaration of both X & Y coordinates when one is declared. On several items you have declared a top (Y), but you have not declared a left or right (X).
Add a left:0 or something and you should be fine. Or, since they are position:relative, you could just convert top to margin-top.