XF 1.4 Problem with z-index of #AccountMenu and xenOverlay in Chrome

Folks, this works perfectly in Firefox where opening the account menu and clicking Preferences opens the preferences overlay on top of the account menu.

Code:

<div id="AccountMenu"...

has this css defining the z-index

Code:

#AccountMenu, #ConversationsMenu, #AlertsMenu {
    z-index: 8000000;
}

(note that we have to have z-indexes ridiculously high so they open over the top of banner adverts)
The xenOverlay div in Firefox has a z-index set in the element style of:

Code:

<div class="xenOverlay" style="z-index: 10000000; 

so it opens on top of the menu.

Whereas in Chrome the css which influences the z-index is different:

Code:

.Menu {
  -webkit-box-shadow:rgba(0, 0, 0, 0.298039) 0 5px 5px;
  border:3px solid #9D2362;
  box-shadow:rgba(0, 0, 0, 0.298039) 0 5px 5px;
  display:none;
  font-size:13px;
  min-width:200px;
  overflow:hidden;
  position:absolute;
  z-index:5999999;
}

and the element style of the xenOverlay is also different:

Code:

<divclass="xenOverlay" style="display: block; z-index: 9999; ...

All of which means that in Chrome the xenOverlay is underneath the menu.

What the hell is going on?!!

 

Looking at it, I don't see why you can't use the default values for the Menu and Overlay. In chrome if I change the values manually to default the banner ads still show properly for me, unless I'm not seeing certain ones that affect this.

Also there is a z-index: 8002; on #heaverMover #header which I think caused you to have a high z-index on Menu as it is 7500 by default.

Changing z-index on #headerMover #header to 101 seemed to work absolutely fine for me and having the Menu and Overlay default.

 

Thanks Steve, but I'm just wondering why there would be different values in Chrome?

 

It's a WebKit bug of sorts with stacking elements and using positions. Safari does the same thing.

The point of my post is your using some high numbers that I found to be unnecessary. Lots of people use ads from various sources and I haven't seen any with z-index values so high. I would start over especially with the unrealistic values because it is only causing confusion between browsers.

 

Thanks for the input.
I'm taking queues from this document: http://www.iab.net/guidelines/508676/508767/displayguidelines (open the Z-index portion) which means we need drop-down menus and overlays with a z-index more than 4999 but in reality I've seen ads with a z-index of over a million which appear in front of the menus.
I'll have a good look at things, thanks.