Header not displayed correctly in Firefox - html

Question

I just figured out that in my website botlane.net the header is not displayed correctly in Firefox.
Display in Chrome: (Correct behavior) (Also in Internet Explorer)
http://gyazo.com/b76f64331a59eb60e9fc4ade66d76fbb
Display in Firefox: (Wrong behavior)
http://gyazo.com/943e97e3762bf6b85e9d0b5e1c8a2ad0
I managed to recreate the problem in a JSFiddle
http://jsfiddle.net/e8ry9art/1/
HTML:
<div id="header">
<div id="headWrap">
<a href="/rankings">
<div id="navi1">
<span >RANKINGS</span>
</div>
</a>
<a href="/">
<span class="helper"></span><img id="logo" src="http://botlane.net/assets/images/logo3.png" alt="Logo" />
</a>
<a href="/legal">
<div id="navi2">
<span>LEGAL INFORMATION</span>
</div>
</a>
</div>
<div id="fulldash"></div>
</div>
CSS:
div#header {
width: 100%;
height: 10%;
min-height: 100px;
position: relative;
}
div#headWrap {
width: 1224px;
height: 100%;
margin: auto;
text-align: center;
white-space: nowrap;
}
div#navi1 {
float:left;
height: 100%;
width: 200px;
}
div#navi1:hover {
color: #FFAD19;
}
div#navi2 {
float: right;
height: 100%;
width: 200px;
}
div#navi2:hover {
color: #14CC67;
}
Can anyone tell me what is the problem here?

Answer 1

Try replacing with these styles:
div#headWrap {
width: 1224px;
height: 100%;
margin: auto;
text-align: center;
}
div#navi1 {
float:left;
height: 100%;
width: 200px;
margin-top: 24px;
}
div#navi2 {
float:right;
height: 100%;
width: 200px;
margin-top: 24px;
}
The above styles work because of the removal of white-space: nowrap. The nowrap property is intended to keep text from wrapping to the next line, and can conflict with text-align: center since the parent reference for centering is handled differently by firefox.

Answer 2

Try this base on my comments:
div#header {
width: 100%;
height: 10%;
min-height: 100px;
position: relative;
}
div#headWrap {
width: 1224px;
height: 100%;
margin: auto;
text-align: center;
}
div#navi1 {
float:left;
height: 100%;
width: 200px;
white-space: nowrap;
}
div#navi1:hover {
color: #FFAD19;
}
div#navi2 {
float: right;
height: 100%;
width: 200px;
white-space: nowrap;
}
div#navi2:hover {
color: #14CC67;
}
.vmiddle {
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div id="header">
<div id="headWrap">
<div id="navi1">
RANKINGS
</div>
<span class="helper"></span> <a href="/"><img id="logo" src="http://botlane.net/assets/images/logo3.png" alt="Logo" />
</a>
<div id="navi2">
LEGAL INFORMATION
</div>
</div>
<div id="fulldash"></div>
</div>

Answer 3

There are a few things wrong here and I think Chrome and whatever browser is displaying this as intended by you is just a little bit more forgiving.
First, when using the CSS id selector (e.g. div#navi2) you don't need to prepend the tag name of the element you're targeting. #navi2 is specific enough and everything else is just clutter.
Second, why those extra divs inside the a elements? You can spare those and directly work with the link elements. They are just as fine.
Third, you're applying your layout code (float) to elements that are further down the DOM hierarchy than the one layer you're actually targeting. You're trying to sort things out in #headWrap and should therefor work with its direct children. But instead you're skipping the a elements completely and apply your code to the divs. While this isn't wrong per se, in general this means trouble.
Fourth, floated elements (like your links) should come before the element that is being floated. Just a tip to avoid headaches.
I forked your Fiddle with an improved version: http://jsfiddle.net/maryisdead/Lsrhjnby/