SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Dropdown Menu Issues for IE7

    Hello,

    I'm pulling my hair out with a menu in IE 7 (don't care about 6). All other browsers including IE 8 work fine. It's a wordpress site using a genesis FW child theme.

    URL - http://174.132.169.59/~rrwsd/

    In IE 7 the menu is positioned upward more than I would like and the dropdown for 'water supplies' is moved over to the right instead of directly below.

    Any help would be appreciated.

    Thanks!
    Daniel

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

    You haven't taken into account the default padding and margins on the ul. All browsers vary with top and bottom margin anyway but for the bullet space some use default padding and some use default margin so you have to set both margin and padding to zero on uls to start on an even keel.

    You've used negative margins on your nested ul to drag things back but thats because you didn't remove the default margin/padding. Once you start on an even keel then all browsers start to look the same.

    Code:
    /* Primary Navigation
    ------------------------------------------------------------ */
    #nav {
        clear: both;
        color: #194939;
        overflow: hidden;
        width: 980px;
        font-family:tahoma;
        font-size:13px;
        margin:0 auto;
    }
    #nav ul {
        width:auto;
        margin:0 0 0 25px;
        padding:0;
    }
    #nav ul ul{
        margin:0;
        padding:0;
        width:100%;
    }
    #nav li li a{
        padding:5px 6px 5px 0!important;
        width:106px!important
    }
    #nav li {
        float: left;
        list-style-type: none;
    }
    #nav li a {
        color: #194939;
        display: block;
        padding: 0 10px;
        height:40px;
        line-height:40px;
       position: relative;
        text-decoration: none;
        font-family:tahoma;
    }
    #nav li li a{
        line-height:normal;
        height:auto;
    } 
    
    #nav li a:hover, #nav li a:active, #nav .current_page_item a, #nav .current-cat a, #nav .current-menu-item a {
        background-color: #194939;
        color: #fff;
    }
    #nav li:hover a,
    #nav li.sfHover a{/* keep top menu highlighted while subnav is open */
        background-color: #194939;
        color: #fff;
    }
    #nav li#menu-item-65 a:hover {
        color:#2aa007;
        background:none;
    }
    #nav li#menu-item-66 a:hover {
        color:#2aa007;
        background:none;
    }
    #nav li#menu-item-67 a:hover {
        color:#2aa007;
        background:none;
    }
    #nav li#menu-item-67 a {
        font-size:13px;
        background:none;
        text-align:center;
        /*margin-left:-53px;*/
    }
    #nav li#menu-item-66 a {
        font-size:13px;
        background:none;
        text-align:center;
        /*margin-left:-53px;*/
    }
    #nav li#menu-item-65 a {
        font-size:13px;
        background:none;
        text-align:center;
        /*margin-left:-53px;*/
    }
    #nav li a.sf-with-ul {
        padding-right: 25px;
    }
    #nav li a .sf-sub-indicator {
    
    ... etc.... from here
    I hope I didn't miss anything as there were quite a few changes to get it working.

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow Paul!

    Thank you so much. I wasn't expecting full on code. It works perfectly and I learned something as well.

    Much appreciated!

    Daniel


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
  •