CSS Dropdown Menu Issues for IE7

HTML & CSS
1

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

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.


/* Primary Navigation
------------------------------------------------------------ */
#nav {
    clear: both;
    color: #194939;
    overflow: hidden;
    width: 980px;
    font-family:tahoma;
    font-size:13px;
   [B] margin:0 auto;[/B]
}
[B]#nav ul {
    width:auto;
    margin:0 0 0 25px;
    padding:0;
}[/B]
[B]#nav ul ul{
    margin:0;
    padding:0;
    width:100%;
}[/B]
[B]#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;[B]
}[/B]
#nav li li a{
    line-height:normal;
    height:auto;
} 
[/B]
#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;
}
[B]#nav li:hover a,
#nav li.sfHover a{/* keep top menu highlighted while subnav is open */
    background-color: #194939;
    color: #fff;
}[/B]
#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;
   [B] /*margin-left:-53px;*/[/B]
}
#nav li#menu-item-66 a {
    font-size:13px;
    background:none;
    text-align:center;
  [B]  /*margin-left:-53px;*/[/B]
}
#nav li#menu-item-65 a {
    font-size:13px;
    background:none;
    text-align:center;
   [B] /*margin-left:-53px;*/[/B]
}
#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.:slight_smile:

3

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