SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Athens
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal navigation problem in IE 7/6

    My horizontal navigation bar is off-kilter in IE 7 and 6. I'm thinking maybe it's a float issue but I can't seem to fix it in my IE CSS (clearing doesn't work). Here's a link to the dev site and following is the code. Many thanks for any assistance

    Code:
    #access {
        width:940px;
        margin:0 auto;
        overflow:visible;}
    #menu ul,
    .menu ul {
        list-style:none;
        margin:0;
        overflow:hidden;
    }
    
    #menu a,
    .menu a {
        color:#999;
        display:block; 
        float:left;
        text-transform: uppercase;
        font-style:normal;
        font-weight: bold;
        font-family: helvetica, arial, sans-serif;
        letter-spacing: 2px;
        margin: 0 5px; 
        text-decoration:none;
        padding: 2px 7px; 
        -webkit-border-bottom-right-radius: 7px;
        -webkit-border-bottom-left-radius: 7px;
        -moz-border-radius-bottomright: 7px;
        -moz-border-radius-bottomleft: 7px; 
         border: 3px solid #fff;
         border-top: none; 
    }
    #menu a:hover,
    .menu a:hover {
    	color: #000; 
    	background: url(images/oil-brown.jpg) no-repeat bottom right;
    	border: 3px solid #999;
    	border-top: none; 
    }
    #menu li.current_page_item a,
    .menu li.current_page_item a {
    	color: #fff; 
    	background: url(images/oil-rainbow.jpg) no-repeat bottom right;
    	border: 3px solid #999;
    	border-top: none;
    }

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Athens
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry ... I fixed this. Not my code (and some excessive id/classes) but the following worked:

    Code:
    .menu ul { list-style:none;}
    .menu li { display: inline; }
    .menu li a { float: left; }

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,710
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    You were probably running into a staircase bug.

    Since you floated the anchors (but did nothing to the <li>) you were running into the staircase bug and as you see you can fix it by display:inline on the <li> (or you could have floated it)'

    Glad you got it sorted out anyway (and sorry we took too long to answer it for you)
    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
  •