Centering UL cross-browser

[ericdgreene]

Hi, I would like to solve this once and for all... I am being asked to do more and more Wordpress sites, and the navigation menus need to be centered very often.

Here is an example I am working on: http://s4.mynewsitereview.com/

Here is the html that wordpress generates (which I have some control over, using Thesis hooks):

<div id="nav_area">
  <div class="page">
    <div class="menu-custom-menu-container">
      <ul id="menu-custom-menu" class="menu">
        <li id="menu-item-401" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-401">
          <a href="http://s4.mynewsitereview.com/why-invest-in-diamonds/">Why Invest in Diamonds</a></li>
        <li id="menu-item-400" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-400">
          <a href="http://s4.mynewsitereview.com/why-carat-ventures/">Why Carat Ventures</a></li>
        <li id="menu-item-399" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-399">
          <a href="http://s4.mynewsitereview.com/our-services/">Our Services</a></li>
        <li id="menu-item-398" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-398">
          <a href="http://s4.mynewsitereview.com/market-research/">Market Research</a></li>
        <li id="menu-item-402" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-402">
          <a href="http://s4.mynewsitereview.com/blog/">Blog</a></li>
      </ul>
    </div>
  </div>
</div>

At the time of this posting I haven't centered it yet. I always struggle with this, and end up giving the ul a specific width and margin:0 auto. I don't like this solution. Is there something I can do to simply center the UL without giving it a specific width? Thanks for any suggestions!

[NuttySkunk]

I have tried using firebug and it dosnt want to do it however I have little experience with Wordpress and do not know the limitations. This article might help you http://matthewjamestaylor.com/blog/b...rowser-support

[ericdgreene]

I have tried using firebug and it dosnt want to do it however I have little experience with Wordpress and do not know the limitations. This article might help you http://matthewjamestaylor.com/blog/b...rowser-support

Thanks, I have been Googling and everyone with this issue is getting referred to this article. I guess this is the only way outside of specifying the width on the UL. So if it works it works, I will try it.

[ericdgreene]

This solution is no good with IE8.

IE8 creates a horizontal scrollbar because it thinks the ul list is extended too far out.

Other browsers are good. I think there is no choice but to specify the width. Would have been a good solution if IE didn't get all confused about it... oh well!

[NuttySkunk]

Did you use overflow:hidden on the parent div?

[RyanReese]

This article will help you a lot.

http://www.pmob.co.uk/pob/centred-float.htm