PDA

View Full Version : Multiple Suckerfish Menus on One Page



jenny_jane
Feb 15th, 2008, 04:06 PM
I'm having problems getting my two Suckerfish menus to show up in internet explorer. Currently none of the drop downs work. I believe something is wrong with the JavaScript, but I'm not sure what. I have two versions of the code where I use different JavaScript:

http://www.kittentaboo.com/forest.html

http://www.kittentaboo.com/forest1.html

Neither are working for me, so obviously I've done something wrong and don't know how to fix it. Please excuse if my code looks horrendous, I'm fairly new at this.

Thanks for any feedback or guidance.

jenny_jane
Feb 15th, 2008, 07:18 PM
Okay, I think I fixed the JavaScript issue:

http://www.kittentaboo.com/forest3.html

Although now on Firefox everything looks weird... Maybe it's now a CSS issue I'm having. Any advice is appreciated!

bazz
Feb 15th, 2008, 07:22 PM
Just looked at in in FF and don't see what is particularly weird.
Can you explain what it is doing that is not how you want it to be.

oh, I just looked at it in IE6. Your flyouts from the left, seem not to work and this may be because you have assingned the sfhover1 in the JS, yet the css doesn't have it. It simply has sfhover.

You might also wish to consider optimising your css where each nav (nav1 nav2 nav3 nav4), has a lot of similar code. make the css for nav1, work for all and then, add a class to each <ul> to make the background color different for each.

Not bad for someone who is new :) I have learnt something form your code too in that, one piece of js can be used for each menu with several 'getElementByID'.

Also, you might like to put your css into a separate file so that it can be cached and so, use less bandwidth.

bazz

jenny_jane
Feb 15th, 2008, 08:04 PM
I've been working on it since I posted, so I fixed most of the issues. I added a style to remove the line-height where the images are, and that seems to have fixed the major alignment issues in FF.

The only problem I have now is in Firefox the 3rd level drop downs aren't lining up vertically. They are slightly off. Right now I'm 95% content as it looks fine in IE, which is what most of the audience will use... but it would be nice to know why the alignment is a hair off in FF.

Thanks for looking.

bazz
Feb 15th, 2008, 08:44 PM
Not suggesting that you must but, are youignoring the people who use IE6? It doesn't seem to work in IE6 so, if you are aiming your site at ie7 users, then you can forget the js. ie7 supports the necessary hover elements, for js not to be required.

I shall try to ake a look at your remaining issue tomorrow. long day today and my brain is fried again :(

bazz

jenny_jane
Feb 15th, 2008, 11:07 PM
Umm, no, I didn't know it didn't work on IE6. The PC in the office has IE7, and that's what I've been testing it on.

I assumed that if it works on IE7, it works on IE6. Man, what a pain!

bazz
Feb 16th, 2008, 04:09 AM
ok. basically, if it works in ie7 it is similar to FF but for the css layout.

In ie6 it requires the JS and you aren't too far away from it working in ie6. I outlined what's required above, I think.

basically, you need to make sure that each menu has the JS script in the html and you may like to make sure that for each menu down the left hand side you use the same css and, possibly, the same js code (seems you have achieved that). Having got the same js code itr would be good to make sure that the html is relative to the css code and the js code.

hth
bazzz