View Full Version : Suckerfish Drop Down

05-23-2007, 06:11 AM
Alright, well this is my first time even attempting a drop down menu (never even thought of using Lists!) So I'm trying a suckerfish drop down menu.
As odd as it may seem... Firefox is having issues with it this time :eek: !!! It's not a big issue, but it's messing up some margins between the navigation and the content. Here's a link:
I've tested in IE7, and FF and IE7 works fine, while FF is giving me the problem.
StyleSheet: http://eggheadtutor.com/fastimports/style.css (the dropdown stuff is at the end)

Edit: BTW, I haven't added the JS for IE6 and below yet.

05-23-2007, 06:56 AM
Your #navigation li's seem to be inheriting a line-height from somewhere. You'll need to reset the line-height. line-height:normal; should work.

05-23-2007, 07:22 AM
Thanks, I forgot to take that out. I was trying to vertically align the #navLogin, so I had put the whole thing under a div w/ line-height of 35px, but I guess I never took it out after it didn't work. While I'm on the topic, do you know a better way of v-aligning? I've had to battle this beast for a while. Right now I have it set to relative positioning w/ 17.5px from the top.

05-23-2007, 07:28 AM
Vertical aligning single lines of text is possible by setting the line-height equal to the height of the element so if no height is set then your previous problem would occur. Just remember that padding counts for overall height.

05-23-2007, 02:24 PM
Alright, well I've got that all sorted out, but the suckerfish menu still doesn't work in IE. I have to leave right now, but here's a link:

05-23-2007, 08:32 PM
Its because you have two onload calls. You can't have more than one. The last one will override the first one. Change this

if (window.attachEvent) window.attachEvent("onload", sfHover);

<body onLoad="MM_preloadImages('images/buttons/buttons_r1_c1_f3.jpg','images/buttons/buttons_r1_c1_f2.jpg','images/buttons/buttons_r1_c1_f4.jpg','images/buttons/buttons_r1_c2_f3.jpg','images/buttons/buttons_r1_c2_f2.jpg','images/buttons/buttons_r1_c2_f4.jpg','images/buttons/buttons_r1_c4_f3.jpg','images/buttons/buttons_r1_c4_f2.jpg','images/buttons/buttons_r1_c4_f4.jpg','images/buttons/buttons_r1_c6_f3.jpg','images/buttons/buttons_r1_c6_f2.jpg','images/buttons/buttons_r1_c6_f4.jpg'); setContentHeight();">

to this

window.onload = function()

05-24-2007, 08:48 AM
Hmmm, I tried replacing my two onloads with a single one that combines the functions as you suggested, but still to no avail. The code has been reuploaded to reflect the latest changes if you feel like taking a look.

05-24-2007, 09:00 AM
#navigation li:hover ul, #navigation li.over ul{ display: block; }
And what is up with the spans in your links? They aren't necessary. They seem like they are there just to change background colors. You can change the background color of the links as well as make them display:block. You will need to set a width on them so they take up the whole width of the li.

05-29-2007, 01:21 PM

I have a similar problem with suckerfish CSS not working in Firefox.

When I have not set in the DIV class of the menu anything except
padding: 0px;
width: 100%;

the suckerfish drop down menu div space had 0 height and despite
of it showing the layout was broken (below lying DIVs overlapped).

So when I tried to use height: fixed px; parameter in the menu DIV class
everything was fine again. The issue is though because the height problem
also concerns CSS suckerfish menu buttons with text spanning in 2 rows
(in that case the button has height of only 1 row).

In IE everything works fine.

You can see it on our main web page: www.compwww.pl (http://www.compwww.pl)
(the height of the whole menu is fixed now but height
of buttons are not fixed and therefore are breaking layout).

Could you please provide me with a solution to those problems?


05-29-2007, 06:46 PM
if its any help, opencube has a free software tool and cssplay.co.uk has lots of such menus that you can freely download and play with.

compwww - cool site, but i found your flyout menu down the left a bit difficult to read (i use ff).