Very strange HTML/CSS/JavaScript oddity [Archive]

VIPStephan

07-14-2006, 11:10 PM

Now here's a funny thing...

I was going to add a small sub menu (suckerfish style) to the current menu of a friend's website. And as always it's beautiful in all browsers (even IE 7) with li:hover and this png alpha transparency. I mean I even got it to work in IE 6 with a trimmed down 8 bit png (through conditional comment) but at some point it stopped working (and I didn't notice at which point! :rolleyes: )

So I took the HTML apart, I took the stylesheet apart, I got rid of everything and it took me hours to figure out what the issue was.
Take a look with IE 6 at the navigation where it's working (http://fortissimoband.de/index.shtml) and then look at the example with the sub nav not showing up at all: http://fortissimoband.de/index2.shtml. And now tell me where the difference is...

Ok, to relieve you from the work and not tax your patience I'm gonna tell you why it's not working. It's this line:
<body id="index" onload="preloadimages('images/bg_submenu_32.png','images/bg_submenu_8.png');">

or - to be more precise - this snippet that's causing the issue:
<body id="index" onload="preloadimages('images/bg_submenu_32.png','images/bg_submenu_8.png');">

It's so aggravating that it's already funny again. :)
I mean I've solved it eventually but does any of you wise fellows have an explanation for that?

It's really working everywhere (and for the real beauty you should look at it in "not IE 6").

Cheers mates! :)

_Aerospace_Eng_

07-15-2006, 07:11 PM

Okay the script used to call the submenu has an onload call in it. You can't have two instances of an onload call. The first page works well simply because your body onload errors out because you left off the perenthese on the function call. I'm going to guess if you change this
<body id="index" onload="preloadimages('images/bg_submenu_32.png','images/bg_submenu_8.png');">
to this
<body id="index">
Then change this
// JavaScript for IE (flyout menu)
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
to this
// JavaScript for IE (flyout menu)
function startList() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload = function()
{
startList();
preloadimages('images/bg_submenu_32.png','images/bg_submenu_8.png');
}
Now the menu should work as well as the preload.