• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

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

Stuart Wright

Well-known member
#1
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?!!
 

Steve F

Well-known member
#2
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.
 

Steve F

Well-known member
#4
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

Well-known member
#5
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.