Question

Within an html file I have a menu set up as:

    <div id="informheader" class="topmenu">
<ul id="navigationMenu">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Reporting</a></li>
                    <li><a href="#">Dashboard</a></li>
                    <li><a href="#">My Profile</a></li>
                    <li><a href="#">Management Console</a></li>    
            </ul>
</div>

Within the CSS

    .topmenu ul a
{
    line-height:36px;
    text-decoration: none;
    color: #ffffff;
    display:inline-block;
    padding: 0px 5px 0px 5px;
    background-position: 100%;
}

.topmenu li a:hover
{
    background-image: url('../images/gradientheaderdark.png');
    height: 36px;
    display: inline-block;
    text-decoration: none;
    background-repeat: repeat-x;
    margin-top:-5px;
    line-height:36px;
}

.topmenu
{
    position: relative;
    display: block;
    width: 80%;
    height: 36px;
    margin: 5px auto;
    text-align: left;
    z-index: 9998;
    -khtml-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -khtml-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
    -ms-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
    -o-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
    -moz-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
    -webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
    box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
    background-image: url('../images/gradientheader.png');
    background-repeat: repeat-x;
}

.topmenu ul
{
    display:inline-block;
    list-style-type: none;
    padding: 0;
    margin: auto 0;
}

.topmenu li
{
    display: inline-block;
    list-style:none;
    padding: 0px 5px 0px 5px;
}

The result renders the bullet-ed list horizontally in IE fine. However in Firefox the list stays vertical. Can anyone point me in the correct direction as to what tag I am missing to get Firefox to also render this UL list horizontally in Firefox (as well as safari)?
Switching the display to block vs inline-block flips the issue for IE.

Answer 1

Add float: left; to .topmenu li