Question

I’m having a problem with a horizontal UL menu im trying to make see screenshots…

In Chrome it works perfectly fine:

Where as in IE-8 it looks like this:

Here is the code I have:

<div class="navbar-top">
    <ul class="horizontal-menu">                    
        <li><a href="google"> Google </a> </li>
        <li><a href="google"> Google </a> </li>
        <li><a href="google"> Google </a> </li>
        <li><a href="google"> Google </a> </li>
        <li><a href="google"> Google </a> </li>
    </ul>           

</div>

and the CSS:

.horizontal-menu {
    width: 440px;
}

.horizontal-menu li {
    display: inline;
    list-style-type: none;
    padding-left: 40px;
}

Any clues guys?

Really baffling me now :p cheers

Nick

Answer 1

.horizontal-menu { white-space: nowrap }

Will force the li-elements to stay in one line.

This should fix the unexpected linebreak, if you want to have the paddings that way.

* { margin:0; padding: 0 }

Could fix several browser inconsistency. Or integrate a CSS reset

---

To center the navigation across all browsers, you can remove the width from .horizontal-menu and set it display: inline and center it via margin: 0 auto:

.horizontal-menu {
    display: inline;
    margin: 0 auto;
}

Explanation:
margin: 0 auto; >> top/bottom margin
margin: 0 auto; >> left/right margin.