Suckerfish Menu and IE 7 Compatibility Issues (of course)

[sailingfree]

I've been happily designing my site in FF and also checking in IE 6 and all has been fine with my 3 level suckerfish menu. Then I jumped on someone's computer to view it in IE 7, and of course there are the usual compatibility issues!

To view the work in progress please check out:

http://www.spannerheadz.com/new ftb/

If you roll-over the third menu option (missing image) that says 'sailing log' you'll see 'Log-Esper' and 'Log-Other Boats'. These have another two levels under them but the upper one is about 200 pixels to the right of the main drop-down, meaning you can't roll-over the next level options.

Now if you roll over 'sailing fun' missing menu image all levels appear correctly because this drop down only contains one additional sub menu level.

Any clues? Here is the CSS:

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 0.75;
font-size: 12px;

}

#nav a {
display: block;
text-decoration: none;

}

/* TOP LEVEL MENU ITEM */

#nav li a:hover {
background-color: #DAE5ED;
font-style: italic;
}

#nav li.home {
float: left;
position: relative;
width: 98px;
text-align: LEFT;
cursor: default;
}

#nav li.about {
float: left;
position: relative;
width: 105px;
text-align: LEFT;
cursor: default;
}


#nav li.log {
float: left;
position: relative;
width: 88px;
text-align: LEFT;
cursor: default;
}


#nav li.fun {
float: left;
position: relative;
width:85px;
text-align: LEFT;
cursor: default;

}

#nav li.forum {
float: left;
position: relative;
width: 104px;
text-align: LEFT;
cursor: default;
}

#nav li.library {
float: left;
position: relative;
width: 114px;
text-align: LEFT;
cursor: default;
}

#nav li li a {
display: block;
font-weight: normal;
color: #000000;
padding: 0.2em 0.52em;
}

#mhead {
display: block;
font-weight: normal;
padding: 0.2em 0.52em;
}

#arrow {
background-image: url(../images/a.gif);
background-repeat: no-repeat;
background-position: right;
}

#mheadarrow {
display: block;
font-weight: normal;
padding: 0.2em 0.52em;
background-image: url(../images/a.gif);
background-repeat: no-repeat;
background-position: right;

}


/* ROLLOVER (TWO SIDE STRIPS) PROPERTIES */
#nav li li a:hover {
padding: 0.2em 0.2em;
border-left: 5px solid #6190B4;
}


#nav li ul { /* second-level lists */
position: absolute;
width: 11.5em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
background: #FFFFFF url(../images/m.gif) no-repeat left bottom;
padding: 0.5em 0 1em 0;
border-right: solid 1px #6190B4;
border-top: solid 1px #6190B4;
}



#nav li ul ul { /* third-and-above-level lists */
margin: -1.5em 0 0 10em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

 

[mkrausnick]

#nav li ul ul { /* third-and-above-level lists */
    margin: -1.5em 0 0 10em;
}

I'd play with this definition - in particular the '10em' value. I had similar trouble with implementing suckerfish. Thread215-1305768 describes my issue with things being mis-aligned. In my case, the culprit was my specification of 'text-align:center'.

Also, I note in the CSS that your 'text-align:LEFT' is capitalized. Depending on your DTD, it might need to be lower case.

Hope this helps.

Mike Krausnick
Dublin, California

 

[sailingfree]

Thank you, Mike. I'm away from my dev computer at the moment so I'll look into this as soon as I get back to it.

[]

http://www.followtheboat.com

[]
*tales from the high seas*

 

[sailingfree]

I've since followed Mike's suggestion and have even created seperate <ul> values for each drop-down. The problem now, however, is that whilst I've managed to align it in IE7, it's incorrectly aligned in FF!!!!!! If you have both browsers, please take a look at:

http://www.spannerheadz.com/new ftb/

Click the Log image and check out 'Log - Esper' and 'Log-Other Boats'.

Any other suggestions anyone???

[]

http://www.followtheboat.com

[]
*tales from the high seas*