Problem displaying a menu in Firefox

[BigGee]

Hello Everyone,

Please excuse any newbie mistakes - I've only just registered & this is my first post. I haven't yet had a chance to familiarise myself with the forums. I'm not even sure if I'm posting on the correct forum right now!

Can anyone help me with a problem I have displaying a menu in Firefox. The menu displays fine in IE but is all over the shop in FF. I know FF is more accurate in what it displays (IE lets you get away with very sloppy coding), what I basically need a hand with is editing the code to display properly in both Browsers.

I've attached a txt file of the coding that I originally got from Dynamic Drive.

Any suggestions would be gratefully accepted.

Thanks,

G

[rangana]

Could you link us to the page in DD :)

...Also, the error in your script is highlighted:


startMenu = function() {
if (document.all&&document.getElementById) {
cssmenu = document.getElementById("csstopmenu");
for (i=0; i<cssmenu.childNodes.length; i++) {
node = cssmenu.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function(){
this.className=this.className.replace(" over", "")
}
}
}
}
}


Highlighted does'nt exists yet ;)

[BigGee]

Could you link us to the page in DD :)

...Also, the error in your script is highlighted:


startMenu = function() {
if (document.all&&document.getElementById) {
cssmenu = document.getElementById("csstopmenu");
for (i=0; i<cssmenu.childNodes.length; i++) {
node = cssmenu.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function(){
this.className=this.className.replace(" over", "")
}
}
}
}
}


Highlighted does'nt exists yet ;)
Thanks Rangana, sorry I didn't post a reply sooner, been away unfortunately with no access to the forum.

Anyway, you ask if I could link you to the page in DD - do you mean the page where I originally got the coding? If so, I'll try, but I've had this coding for an awful long time & I don't know if I can find it, however I will try.

I incorporated the change you suggested, but it still plays up in Firefox. I thought the coding was cross browser compatible, but it only seems to display correctly in IE. You also say "Highlighted does'nt exists yet ;)" Can you explain?

Any further suggestions?

G

[rangana]

Sorry to confuse you :)

I mean that csstopmenu div is not present in your page...which means that it does'nt exist.

Also, a link to DD where you find this script could be useful too..

[BigGee]

Thanks Rangana - sorry to appear obtuse!

So if it doesn't exist what do I need to write to put it in?

I'll hunt around to see if the original code is still on DD - if I find it I'll post a link, however as I said it was a long time (at least two year) ago that I picked it up.

Regards,

G.

[rangana]

Thanks Rangana - sorry to appear obtuse!

So if it doesn't exist what do I need to write to put it in?


Create a div having that id ;)


<div id="csstopmenu">

</div>

[BigGee]

Hi Rangana - tried that but it has no effect at all. The menu still works fine in IE but is not functioning properly in FF.

I can't find the original script on DD but I have attached a txt file of the exact coding that was copied from DD.

The big question is why does FF not reproduce it correctly?


G.

[Medyman]

1. Validate (http://validator.w3.org/) your code. You're using a whole host of deprecated/unrecommended techniques.

2. That bit of code isn't from DD. It's from javascriptkit.com. Not that it matters...just thought I'd fill you in. Interestingly, Javascriptkit.com has updated that particular script to this: http://www.javascriptkit.com/script/script2/csstopmenu.shtml

Probably because it was buggy to begin with.

3. I suggest that you change out that menu for the replacement one I linked to above. Looking at the CSS, you can see how many hacks are in place for "non-IE" browsers. This means that the CSS was optimized for IE. Since IE has a screwed up CSS model to begin with, it means that the original CSS is buggy (by design). It's much better practice to code for standards compliant browsers (e.g. Fx) and add a hack or two to account for the IE bugs.

[BigGee]

I think you've hit on it Medyman!

I should have realised it was from javascriptkit.com & not DD (the default URL links point to javascript's site) stupid me!!!

Anyway, what you say about the "buggy" content of the original code is probably spot on.

I'll scrap what I've got & I'll have a play with the updated version that's available from the link you so kindly provided - THANK YOU VERY MUCH.

Kind Regards,

G.