Suckerfish IE7 offset

strider

11-06-2008, 01:49 PM

I have a sons of suckerfish dropdown here http://viperdesign.co.uk/dev/ese/defaultcopy.asp and it works well in every browser except IE7 which makes the submenus appear too far to the right.

Here is my code:
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 147px; }

#nav li { /* all list items */
position : relative;
float : left;
line-height : 1.25em;
margin-bottom : -1px;
width: 147px; }

#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 148px;
margin-top : -32px; }

#nav li ul ul { /* third-and-above-level lists */
left: -999em; margin-left:120px; border-left: 1px solid #e5e5e5; }

#nav li a {
width: 112px;
w\idth : 111px;
display : block;
color : #fff;
text-decoration : none; text-align:left;
background: #00466d url(images/arrow.gif) no-repeat 8px 8px;
padding-top: 9px; padding-bottom:9px; padding-left:35px;
border-top: 1px solid #e5e5e5; }

#nav li a:hover {
color: #ccc; background: #333 url(images/arrow.gif) no-repeat 10px 8px; }

#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: 0; }

#content {
margin-left : 12em; }

/* VIPER MODS */

#nav li ul li a { background: #333; padding-left:8px; /*margin-left:-100px;*/ } /* Sub Menu style */
#nav li ul li a:hover { background: #333; color:#ccc; } /* Sub Menu hover */

.menutop { background-image:url(images/menu-top.gif); height:18px; margin-bottom:0; }
.menubase { background-image:url(images/menu-base.gif); height:18px; margin-top:1px; }

doctype is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Having been trying to fix this for days now and would really appreciate some help!

Thanks

abduraooft

11-06-2008, 02:19 PM

Is it OK in FF(2) at your end?

strider

11-06-2008, 04:21 PM

Hi

Yeah looks fine in Mac Safari and FF and PC FF but not IE7

Apologies I was messing with it around the time you posted so it may have looked different. I have put it back to how it was now.

Any ideas?

abduraooft

11-07-2008, 08:07 AM

Alright. I think the best way to deal with a multilevel drop down is to initially determine the required widths of each level. Then apply the corresponding left margins for the next level elements. Then apply display: block; to the anchors.

Everything over! Now no need to apply display, margin-left properties for any of the other elements as all other elements inherit the widths and margins of it's parents.
Have a try with

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}
#nav{width:147px;}
#nav ul{width:130px; margin-left:148px;}
#nav ul ul{width:120px; margin-left:131px;}
* html #nav li{
height:1%; /* */
}

#nav li { /* all list items */
position : relative;
margin-bottom : -2px;
}

#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
top:0; /* the top of every sub group*/
}

#nav li ul ul { /* third-and-above-level lists */
left: -999em;
border-left: 1px solid #e5e5e5;
}

#nav li a {
/*width: 120px;*/
display : block;
color : #fff;
text-decoration : none; text-align:left;
background: #00466d url(arrow.gif) no-repeat 8px 8px;
/*padding-top: 9px;
padding-bottom:9px;
*/
height:32px;
line-height:32px; /* to centre the text, apply line-height, and remove all top& bottom paddings */
padding-left:35px;
border-top: 1px solid #e5e5e5;
}

strider

11-07-2008, 09:37 AM

ok thanks for that - I have made the changes and it helps bring the subs into place but it has made the menu look 'odd' in IE7 so I'll have a play and see if I can get it to look right without breaking it!

Cheers

strider

11-07-2008, 09:44 AM

Oops my bad! Missed a 't' off the end of one of the heights - looks good now except the 3rd level butts into the second.

strider

11-07-2008, 10:05 AM

Right, after a few tweaks it seems to work perfectly in Mac safari,FF and PC FF and IE7 - not sure about IE6 as I don't have it but I'm happy now :)

Thanks for sorting this out :thumbsup:

abduraooft

11-07-2008, 10:15 AM

Umm.. if all of them have the same width, then things would become much simplified :)
It should work in IE6 as well, as I'd tested in it. Get an IE tester (http://www.my-debugbar.com/wiki/IETester/HomePage) now.

strider

11-07-2008, 10:20 AM

Thanks, but I made the widths different because some of the titles were a lot longer in the submenus than the main categories and they were going on two lines :(