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

jpmad4it · 03-30-2007, 12:17 PM

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:

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

aversion · 03-30-2007, 05:03 PM

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.

**catbert303** · 03-31-2007, 04:20 PM

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.

1407 · 04-01-2007, 06:29 AM

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

jpmad4it · 04-02-2007, 06:35 AM

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!

03-30-2007, 12:17 PM	#1
jpmad4it Junior Member Join Date: Aug 2002 Posts: 6	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 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 Last edited by jpmad4it; 03-30-2007 at 12:19 PM.

03-30-2007, 05:03 PM	#2
aversion Retired Mod Join Date: Jun 2000 Location: insomnia Posts: 7,917	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, 04:20 PM	#3
catbert303 Moderator Join Date: Aug 2001 Location: uk Posts: 11,221	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. __________________ Antonetti in '09

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

04-01-2007, 06:29 AM	#4
1407 Junior Member Join Date: Mar 2007 Posts: 21	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)...