SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast ericdgreene's Avatar
    Join Date
    Nov 2011
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centering UL cross-browser

    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):

    Code:
    <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!

  2. #2
    SitePoint Enthusiast NuttySkunk's Avatar
    Join Date
    Jan 2012
    Location
    United Kingdom
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  3. #3
    SitePoint Enthusiast ericdgreene's Avatar
    Join Date
    Nov 2011
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by NuttySkunk View Post
    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.

  4. #4
    SitePoint Enthusiast ericdgreene's Avatar
    Join Date
    Nov 2011
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  5. #5
    SitePoint Enthusiast NuttySkunk's Avatar
    Join Date
    Jan 2012
    Location
    United Kingdom
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you use overflow:hidden on the parent div?

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    This article will help you a lot.

    http://www.pmob.co.uk/pob/centred-float.htm
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •