CODEWITHSUNDEEP
htmlcssinternet-explorer-8
Nicholas Chappell
Nicholas Chappell

Reputation: 17

horizontal ul menu not displaying correctly in IE - Getting Squashed

I'm having a problem with a horizontal UL menu im trying to make see screenshots...

In Chrome it works perfectly fine:
enter image description here

Where as in IE-8 it looks like this:
enter image description here

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

Upvotes: 1

Views: 3625

Answers (1)

doptrois
doptrois

Reputation: 1570

.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.

Upvotes: 1

Related Questions