SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centered floats work in all but IE6... imagine that

    Greetings,

    I've been following Paul's really cool example of centering floated nav items. I am using the example at the bottom of the page with display: table, table-cell, etc. under the heading "Another Option".

    It's working fine on the Mac using FF and Safari, and fine on the pc using FF and IE7, but it's blown-apart in IE6. If you notice, each nav item (a list item in the XHTML) is a full 756px wide in IE6. That's how wide the container is and the tomato image above the nav.

    I've tried overflow: techniques on the containing element (#navContainer) and individual anchor elements, to no avail. I've checked out Paul's example on the pc in IE6 and it works fine, so I *know* the problem resides with my CSS.

    I'm using conditional comments to feed IE the display:inline-block and inline commands.

    The regular CSS that all browsers see:
    Code:
    #navContainer {
    	width: 756px;
    	height: 32px;
    	border-bottom: 2px solid #aba9a9;
    	padding: 180px 0 0 0;
    	text-align: center;
    	margin: 0 auto;
    }
    
    /* Top of Page Images */
    #home #navContainer { background: url(../images/header_home.jpg) no-repeat 0 0; }
    
    #navbar {
    	height: 32px;
    	width: 100%;
    	background: url(../images/nav_bg.jpg) repeat-x 0 0;
    	font: 1.2em Georgia, "Times New Roman", Times, serif;
    }
    
    #navContainer ul {
    	display: table;
    	white-space: nowrap;
    	margin: 0 auto;
    }
    
    #navContainer ul li {
    	display: table-cell;
    	padding: 0 5px;
    	background: url(../images/nav_div.gif) 100% 0 no-repeat;
    }
    
    #navContainer ul li a:link, #navContainer ul li a:visited {
    	display: block;
    	text-transform: uppercase;
    	color: #468966;
    	text-decoration: none;
    	height: 32px;
    	line-height: 32px;
    }
    
    #navContainer ul li a:hover { color: #145533; }
    And the conditional IE styles:
    Code:
    #navContainer ul {display:inline-block;}
    #navContainer ul {display:inline;}
    #navContainer ul li {display:inline-block;}
    #navContainer ul li {display:inline;}
    #navContainer ul li a {	display:inline-block;}
    #navContainer {text-align:center;}
    Any ideas as to why each nav item is expanding to the full 756px is MOST welcome as i'm tired of beating my head against this wall....

    Many thanks,
    Pedro

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The problem is that you have define the anchor as display:block using a:link but tried to redefine it only using a{}. IE applies more wait to the :link state and therefore applies only the display:block.

    You would need to give the ie style more weight.

    e.g.
    Code:
    #navContainer ul li a {    display:inline-block!important}
    However IE won't distribute those elements evenly across the whole width.

    I think you would be better off simply floating each menu item with the correct width and avoid any hacks at all. (Unless you are changing the menu on each page of course)

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul,

    That's how I had it originally (floated) but it was against the left edge of the container because I hadn't specified widths for each anchor. If I give each one a width, then I should be able to apply margin:auto and it will be centered within the container, yes?

    Pedro

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    If I give each one a width,
    Give them widths that make them fit within the space you have and then use text-align center on the text to centre the text. Margin:auto won't center floats.


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
  •