SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE 6 & 7, Inline-Block UL centering issue

    Hi all,

    I have an issue with a nav UL I need centred, it is centred on browsers except IE6 and IE7.

    The code is as follows:

    Code:
    <body>
    <div id="nav-container">
    	<ul id="nav">
    		<li><a class="active" href="#">One</a> /</li>
    		<li><a href="#">Two</a> /</li>
    		<li><a href="#">Three</a> /</li>
    	</ul>
    </div><!--nav-container-->
    </body>
    Code:
    #nav-container { background:#fff; margin-bottom:55px; position:relative; text-align:center; width:100%; z-index:20; }
    #nav { display:inline-block; margin:0; overflow:hidden; }
    #nav li { float:left; height:63px; line-height:63px; margin-right:5px; }
    Does anyone have any idea why this won't float in IE7?

    Any help would be amazing.

    Thank you!

  2. #2
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I managed to fix it by applying IE specific styles to #nav - display:inline;

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,760
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Good job. The reasoning is because IE6-7 don't support inline-block.

    In order for that behavior to be replicated, the element must have haslayout and then needs display:inline;
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent, thanks Ryan


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
  •