The header is not displayed correctly in Firefox

advertisements

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?


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.