DHTML menu - trouble with the z-index property

Discussion in 'HTML & Website Design' started by jpmad4it, Mar 30, 2007.

  1. #1
    Hello everyone,

    I have built a DHTML & Javascript menu using the Deluxe Menu (www.deluxe-menu.com) software package.

    The problem is that in IE7 the menu works fine, yet in Firefox it is displayed behind everything.

    If you look here using IE and Firefox you can see the difference when you drop down the 'services' box in the menu:

    www.boxroom-media.com/test/johnny3

    I tried to resolve this by using CSS. I set the 2 classes 'flash' and 'menu', and I then set the Flash z-index to -1 and the menu z-index to 1 ( I also set the positioning for both of these to absolute). This didnt work

    So I then tried to edit the Javascript file that controls the menu. This has all the variables that are needed for the menu. In the script I added the following under the positoning section:

    var zIndex="1";
    Code (markup):
    I also kept the flash z-index to -1, but again this didnt work!

    Finally, i tried to add a javascript function directly into the code to try and change the z-index of the menu when the page loaded up. I used the following code:

    <script type="text/javascript">
    function changeStackOrder()
    {
    document.getElementById("menu").style.zIndex="1";
    }
    </script>
    Code (markup):
    I then set the function to execute on the load of the body:

    <body onLoad="changeStackOrder()">
    Code (markup):
    I also made sure the ID of the menu was set to 'menu' so that the function executed on the menu. Again this didnt work.

    Can anyone help me out? Is it just a problem with Firefox and that it can't handle the z-index property?

    Any help would be greatly appreciated.

    regards,
    Jp
     
    jpmad4it, Mar 30, 2007 IP
  2. conceptcrew

    conceptcrew Active Member

    Messages:
    547
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    60
    #2
    it is not the menu that you have to put to the back it is the flash. If you have a z-index -1 for the flash you really shouldnt need one for the menu
     
    conceptcrew, Mar 30, 2007 IP
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #3
    Add the attribute wmode="opaque" to the embed element.

    cheers,

    gary
     
    kk5st, Mar 30, 2007 IP
  4. jpmad4it

    jpmad4it Peon

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I had to add wmode= "transparent" to both the object and embed elements.......it now works fine ;)
     
    jpmad4it, Apr 2, 2007 IP
  5. Rasczak

    Rasczak Peon

    Messages:
    131
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #5
    trying that too, but none of those options works - what am i doing wrong? i'm using IE6, so that's probably the problem :))



     
    Rasczak, Apr 2, 2007 IP