菜单在Firefox中无法正确显示

Question

A site I'm creating is showing the front page exactly as its supposed to do in both Chrome and Safari, but when I test in Firefox the menu isn't showed correctly.
- All browsers are the latest versions and on a mac.

Here's a screenshot comparing Firefox and Safari, respectively!

And here's the css-code I use for the menu, pardon the mess.

nav {
width: 650px;
height: 220px;
margin: 10px auto;
}

nav ul {
list-style: none;
margin: 0 auto;
display: block;
}

nav ul li {
margin: 10px;
display: inline-block;
height: 100px;
line-height: 200px;
}

I've tried with different methods, but this messes up the menu in the working browsers.

Here's the HTML code for the nav-bar, as per request:

<nav>
<ul>
    <li><h2><a href="#cykler.html">Cykler</a></h2></li>
    <li><h2><a href="#service.html">Service</a></h2></li>
    <li><a href="#index.html"><img src="images/logo.png" name="logo" alt="Søgaard Cykler" width="220" height="200"></a></li>
    <li><h2><a href="#info.html">Info</a></h2></li>
    <li><h2><a href="#kontakt.html">Kontakt</a></h2></li>
</ul>
</nav>

And here is a link to the functioning code on jsfiddle: http://jsfiddle.net/DaCqS/

Answer 1

It's best to avoid line-height for positioning elements. Margins are much more effective. Get rid of the line-height and try using a

margin-top:100px;

on either the nav or the ul.

EDIT : Now that I see your HTML... Since the big center logo is stylistically different from the four buttons, you should keep their CSS selectors separate. None of your current CSS is able to differentiate between these four buttons and the big center logo. A quick and easy way to fix this is to add this style:

nav ui li h2 {margin-top:100px;}

Answer 2

Ok so I've floated the the <li> and used the margin-top:100px for the h2.

try this and let me know if that fixes it http://jsfiddle.net/hfxKW/

Answer 3

Does this work for you? http://jsfiddle.net/WWkWw/

.top-menu{
    background-image:url('foo/logo.png');
    height:22px;
}
.left{
    float:left;
}
.right{
    float:right;
}
.top-menu li{
    margin:60px 10px 10px 10px;
    height:100px;
}

HTML:

<nav>
<ul class="top-menu">
<li class="left"><h2><a href="#cykler.html">Cykler</a></h2></li>
<li class="left"><h2><a href="#service.html">Service</a></h2></li>
<li class="right"><h2><a href="#info.html">Info</a></h2></li>
<li class="left"><h2><a href="#kontakt.html">Kontakt</a></h2></li>
</ul>
</nav>