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

Discussion in 'Troubleshooting and Problems' started by Stuart Wright, Oct 6, 2014.

  1. Stuart Wright

    Stuart Wright Well-Known Member

    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?!!
     
  2. Steve F

    Steve F Well-Known Member

    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.
     
  3. Stuart Wright

    Stuart Wright Well-Known Member

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

    Steve F Well-Known Member

    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.
     
  5. Stuart Wright

    Stuart Wright Well-Known Member

    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.
     

Share This Page