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

[Stuart Wright]

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

<div id="AccountMenu"...

has this css defining the z-index

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

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

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

<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?!!

 

[Steve F]

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.

 

[Stuart Wright]

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

 

[Steve F]

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.

 

[Stuart Wright]

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.