CSS <UL>неправильно отображается в Firefox

Question

У меня есть неупорядоченный список в качестве навигационной панели для моего сайта.Отлично смотрится в Safari, Chrome и Opera на моем Mac.Тем не менее, в Windows IE и Firefox (любая платформа), он берет элементы, которые все должны быть в одной строке, и перемещает 1 или 2 из них во вторую строку.Любые идеи о том, как помочь этому?Возможно, это размеры шрифта, используемые в IE или Firefox, в отличие от Safari и Opera?

Вот HTML:

<ul id="navbar">
<li class="home"><a href="index.html">Home</a></li>
<li class="pictures"><a href="pics.html">Pictures</a></li>
<li class="bio"><a href="bio.html">Biography</a></li>
<li class="media"><a href="media.html">Media</a></li>
<li class="performances"><a href="performances.html">Performances</a></li></ul>

CSS:

#navbar
{
width: 600px;
margin-left: auto;
margin-right: auto;
padding:0px;
height:20px

}
#navbar li {
width: 120px;
list-style:none;
display:inline;
text-align: center;
}
#navbar a
{
width: 120px;
float: left;
}

Answer 1

Вы можете попробовать использовать li как элементы блока и плавать их:

#navbar li {
width: 120px;
display: block;
float:left;
text-align: center;
}

Edit: elcanrs правильно указал, что плавающие элементы автоматически превращаются в блочные элементы, поэтому display: block; в моем примере кода служит только для иллюстрации.

С http://www.w3.org/TR/CSS2/visuren.html#float-position:

Элемент генерирует блок-блок, который перемещается влево. содержание течет по правой стороне коробки, начиная сверху (при условии свойство clear).

Answer 2

Вы забыли display: block; и list-style: none для тега <ul>!

Попробуйте использовать это:

#navbar
{
width: 600px;
float: left;
list-style: none;
padding:0px;
height:20px
}

Должно работатьЯ использую это для моего меню CSS на моей CMS ...