Home/ Questions/Q 6217975
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T07:31:09+00:00

Okay, so I’m writing CSS for a navigation bar that uses an un-ordered list

  • 0

Okay, so I’m writing CSS for a navigation bar that uses an un-ordered list to organize the menu. The menu is centered not pushed to any side, and the width of any given li element cannot be pre-determined (it varies with how much text is in the menu item), so I can’t hardcode widths.

I have the following CSS code: 

#nav ul {
    list-style: none;
    padding-bottom: 10px;
    height:16px;
}
#nav ul li {
    position: relative;
    display: inline-block;
}
#nav {
    position: relative;
    margin-top: -30px;
    text-align: center;
    font-family: Arial,STHeiti,'Microsoft YaHei',sans-serif;
    font-size: 14px;
}

for the nav element, and this works perfectly to produce the centered nav-menu in Chrome 13. But when I view the page in IE8, the UL turns vertical and I can’t get it to become horizontal.

So far, search results indicate that I need to float:left; or float:right; the <LI>s to make the menu horizontal. I’ve tried this and it does make the menu horizontal in IE8 but it will float to left or right. I need to center the menus, and apparently there is no float:center;.

The HTML corresponding to the menu is

<div id="nav">
    <ul>
        <li class="current_page_item">[LINK]</li>
        <li class="page_item">[LINK]</li>
        <li class="page_item">[LINK]</li>
    </ul>
</div>

Is there any way without needing to know the width of the LIs or having to resort to JS to get the menu centered AND horizontal?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    That code works fine in IE8, see for yourself:

    http://jsfiddle.net/bEEEb/

    It’s probably not working for you because you’re not in IE8 Mode (IE7 Mode or Quirks Mode are the alternatives).

    Add a doctype as the very first line if you don’t have one:

    <!DOCTYPE html>

    If you need this to also work in IE7 (in which inline-block only works with naturally inline elements by default), then replace display: inline-block with:

    display: inline-block;
*display: inline;
zoom: 1;

    ..of course, if you can get away with display: inline, that’s the simplest fix, but you should still work out why your page is not being displayed in IE8 Mode.

    • 0