Question

Hello all I am creating a horizontal menu for a site that needs to be supported in IE 8 or IE 9 -Compatability mode. In IE 9 this renders fine, however in IE8 /9-compatibility the horizontal layout is lost and as a result the items are listed vertically. The hover effect (background image) still works, as well as the other styles. Can anyone take a look at the css and tell me what I am missing to get this to render properly in earlier browser versions?

html

 <div id="navinformheader" class="topmenubar">
        <ul id="navigationmenu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Reporting</a></li>
            <li><a href="http://vair50703:7000/">Dashboard</a></li>
            <li><a href="#">My Profile</a></li>
            <li><a href="#">Management Console</a></li>
        </ul>
    </div>

CSS

   .topmenubar ul a
{
    line-height: 28px;
    list-style-type:none;
    text-decoration: none;
    color: #ffffff;
    display: inline-block;
    padding: 0px 10px 0px 10px;
}

.topmenubar li  a:hover
{
    height: 28px;
    list-style-type:none;
    display: inline-block;
    text-decoration: none;
    line-height:28px;
    background-image: url('../images/topgradientBarHl.png');
    background-repeat: repeat-x;
}

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

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

.topmenubar
{
    display: block;
    width: 100%;
    height: 27px;
    min-width: 920px;
    border-bottom: 1px solid #47547d;
    background-image: url('../images/topgradientBar.png');
    background-repeat: repeat-x;
} 

Thanks in advance

Answer 1

Sorry all, In looking at the CSS I realized I had inline-block which was causing the return on the element. Changing the property for each of the ul and li elements to

display:inline;

Resolved the issue.

Hope this can help others at least.

Thanks