Suckerfish problem - position in IE6

[patrickipsen]

Hi all,

I'm using a horizontal Suckerfish drop menu, and it works perfect in IE7.

But with IE 6 the menu posistion move so it get vertical. Really strange.

Really hope some can see whats wrong

Thanks you so mutch.

Here is my CSS code.

#topmenu{background-color:#407d9c; height:25px;padding:0px;margin-left:-5px;}
#topmenu ul {margin:0px;padding:0px}
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1,5;
}
#topmenu li:hover, #topmenu li.hover {
  position:static;
  }
#nav a {
display: block;
font-size:.65em;
color:#FFFFFF;
text-decoration:none;
padding:5px;
height:15px;
}
#nav a:hover{ background-color:#01507b}
#nav li { /* all list items */
float: left;
margin-left:6px;margin-right:6px
}
#nav li ul { /* second-level lists */
position: absolute;
margin-left:-7px;
width: 12em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#nav li li a{ background-color:#d4dc87; color:#00517b;border:1px solid #FFFFFF; width:12em}
#nav li li a:hover{ background-color:#b5bb54}
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

[SuzyUK]

Hi patrickipsen and Welcome to WebmasterWorld!

it's the height on the links.. it's triggering hasLayout to true for IE and IE6 doesn't like that when there's no width on the float it makes the link 100% wide and stretches the floated parent.

anyhow once the height is removed it shows that the #topmenu's height is not enough either the link is naturally about 1-2 px taller than the bar.

rather than set a height on the bar you can just make it contain it's floated children if that's any easier than trying to guesstimate heights.

there is also the double margin float bug appearing in IE6 the child drop lists would need more than the -7px margin you have in the drops but again adding display: inline; sorts that. ..

then if you want to only feed the sf javascript to IE6 and below because IE7 works without it, there's yet another foible whereby ie7 doesn't like hasLayout triggering properties on the AP drop lists

anyhow here's the CSS which I think should cover all eventualities

#topmenu{
background-color:#407d9c;
padding:0px;
margin-left:-5px;
/*height: 25px;*/
width: 100%; /* to contain floats <=IE6 */
overflow: auto; /* contain floats for other browsers */
}
#topmenu ul {
/*list-style: none; margin:0; padding:0; */ /* covered in rule below*/
}

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1.5;
}

#nav a {
display: block;
font-size:.65em;
color:#FFFFFF;
text-decoration:none;
padding:5px;
/*height:15px;*/ /* this makes IE6 display vertically */
}

#nav a:hover{ background-color:#01507b}
#nav li li a{ background-color:#d4dc87; color:#00517b;border:1px solid #FFFFFF; width:12em;}
#nav li li a:hover{ background-color:#b5bb54}

#nav li { /* all list items */
float: left;
display: inline; /* add to avoid duplicate margins in IE6 */
margin-left:6px;
margin-right:6px
}

#nav li ul { /* second-level lists */
position: absolute;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
margin-left:-7px;
}

#nav li:hover, #nav li.sfhover {
/*position:static;*/
position: relative; /* so drop menus are positioned relative to their parent li */
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
width: 12em; /* move width to here for IE7 without SF script */
}

hth
-Suzy