Mozilla Monitor website will be down for 2 hours starting 5/20/2025 at 6 AM PT. Visit our status site for updates.

Avatar for Username

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

CSS z-index problem with FF 14

  • 1 reply
  • 3 have this problem
  • 27 views
  • Last reply by mement0

mement0
mement0

Hi I'm a web developer and I have a CSS problem with FF 14.

I have to separate a menu (including sub menus) from the rest of a site. Therefore I place a overlay element between the menu and the rest. The sub menus and the overlay are positioned absolute. Both are placed in the body-tag. The menu is positioned relative and placed in a menu container element. The menu and all its sub menus have a higher z-index than the overlay. This works with Chrome, Safari, Opera, IE7 (yes even with IE7!), IE8, IE9 and even FF 7. But in FF 14 the menu appears below the overlay. Only the sub menus stay on top.

Here are some screens: FF 14 FF 7

The menu seems to move on top of the overlay when I add a higher z-index to the parent element of the menu (menu container). But that's a no go in this case because there 3 menus and only 1 can be active at the same time. I can't provide a link to this problem (it's a local prototyp).

Any suggestions?

Hi I'm a web developer and I have a CSS problem with FF 14. I have to separate a menu (including sub menus) from the rest of a site. Therefore I place a overlay element between the menu and the rest. The sub menus and the overlay are positioned absolute. Both are placed in the body-tag. The menu is positioned relative and placed in a menu container element. The menu and all its sub menus have a higher z-index than the overlay. This works with Chrome, Safari, Opera, IE7 (yes even with IE7!), IE8, IE9 and even FF 7. But in FF 14 the menu appears below the overlay. Only the sub menus stay on top. Here are some screens: [http://imageshack.us/photo/my-images/28/failbe.jpg/ FF 14] [http://imageshack.us/photo/my-images/194/44328495.jpg/ FF 7] The menu seems to move on top of the overlay when I add a higher z-index to the parent element of the menu (menu container). But that's a no go in this case because there 3 menus and only 1 can be active at the same time. I can't provide a link to this problem (it's a local prototyp). Any suggestions?

Chosen solution

Solved. I had a CSS 3D transformation fix to prevent flickering. Seems like -moz-backface-visibility: hidden; leads to this z-index issue. All I had to do is to remove -moz-backface-visibility: hidden; from the parent menu element.

Read this answer in context 👍 0

All Replies (1)

mement0
mement0 Question owner

Chosen Solution

Solved. I had a CSS 3D transformation fix to prevent flickering. Seems like -moz-backface-visibility: hidden; leads to this z-index issue. All I had to do is to remove -moz-backface-visibility: hidden; from the parent menu element.