Dynamic HTML menu....Z-index trouble with Firefox

Printable View

03-30-2007, 11:17 AM
jpmad4it

Dynamic HTML menu....Z-index trouble with Firefox

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 :confused:

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:

Code:

var zIndex="1";

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:

Code:

<script type="text/javascript"> function changeStackOrder() { document.getElementById("menu").style.zIndex="1"; } </script>

I then set the function to execute on the load of the body:

Code:

<body onLoad="changeStackOrder()">

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 :)
03-30-2007, 04:03 PM
aversion

It's the flash that's the problem, I think you'll find that if you had any other content type there it would work. In some browsers flash will push itself to the top of the stack.

There must be something different about your implementation of the menu though, there is a page about how the menu will avoid this problem on the site you got the menu from in the first place, find it here. You can see they have it working, I suggest seeing if there's anything different with the way they've implemented the menu, or the flash of course.

it even says on their FAQ page:
"Q: How does Deluxe Menu works with flash, select, iframe and other objects on page? Do submenus drop down over these objects?
A: Yes, submenus drop down over all objects of a page."

I imagine it's something simple that you've missed or they haven't made clear.
03-31-2007, 03:20 PM
catbert303

In the embed tag try adding the attribute

wmode="transparent"

though, I'm not sure, you may still have problems with the menu items that appear over the movie not being clickable.
04-01-2007, 05:29 AM
1407

I might suggest you go back to your "deluxe" website, search a little, they know about the "Firefox issue", they even posted a fix (Seamless integration -> Visible)...
04-02-2007, 05:35 AM
jpmad4it

Quote:

Originally Posted by catbert303

In the embed tag try adding the attribute

wmode="transparent"

though, I'm not sure, you may still have problems with the menu items that appear over the movie not being clickable.

Thanks, this worked :)

I had to add it to both the object and embed elements!