Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,678
    Thanks
    6
    Thanked 1,009 Times in 982 Posts

    Lightbulb Very strange HTML/CSS/JavaScript oddity

    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! )

    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:
    Code:
    <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:
    Code:
    <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!

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    Code:
    <body id="index" onload="preloadimages('images/bg_submenu_32.png','images/bg_submenu_8.png');">
    to this
    Code:
    <body id="index">
    Then change this
    Code:
    // 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
    Code:
    // 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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •