Menu Z-index Issue IE 8 and 9

6 posts, 0 answers
  1. Karl
    Karl avatar
    15 posts
    Member since:
    Dec 2012

    Posted 15 Jan 2013 Link to this post

    I have a menu on my footer that is set to open above the footer when opened:  $("#footer").kendoMenu({ direction: "top left" });

    I can see the menu opening fine but the part of the menu that goes above the footer is not visible and all you can see is the main content of the page.

    The footer is positioned absolutely. You would think this is just a simple z-index issue but I have tried adding the following styles to all parent elements of the menu (including the footer) to no avail:

    z-index: 2147483647;
    
    overflow: visible; zoom: 1; I should add that it works fine in IE 10 and Chrome.

  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 16 Jan 2013 Link to this post

    Hello Karl,

    There can be several reasons for your issue. One of them is that z-index only applies to positioned elements (with position different than the default static).

    Another reason can be the z-index stacking - this means that if parent elements have z-index (or position), their child elements can't override the z-index of the parent. To avoid this, you need to check if the parent element of the Menu that has common parent with the main view also has higher z-index (this is especially important in IE6-7, where the z-index stacking order is broken).

    You can also check the following article for more information about z-index and its quirks.

    Kind regards,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Karl
    Karl avatar
    15 posts
    Member since:
    Dec 2012

    Posted 16 Jan 2013 Link to this post

    Yes I'm aware of how z-index works which is why I said I set the z-index for _all_ parents of the menu, not just the footer.

    Sure, I didn't specify that I only set it on elements that weren't positioned: static, but it's not like setting it on those as well would have an averse effect anyways.

    I'll keep looking into this.
  5. Karl
    Karl avatar
    15 posts
    Member since:
    Dec 2012

    Posted 16 Jan 2013 Link to this post

    I'm not sure why, but removing this background gradient in the CSS fixes the issue: 

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#03477a, endColorstr=#56a0ce, GradientType=0);

    I made a demo where you can see the behavior in IE 8. For some reason this one works in IE 9.
    http://jsfiddle.net/YJ5jt/

    Any insight on why this might be happening would be appreciated.
  6. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 17 Jan 2013 Link to this post

    Hello Karl,

    At first looks like the answer is hidden in the first comment in the article I linked - some filters in old IE browsers do seem to create a new z-index stacking context. I'm not at all surprised considering the amount of bugs that litter the old IE filters - from breaking of font and image alpha blending to drilling holes through iframes (this was later fixed in Windows 7 and now can be only reproduced in XP).

    However there seems to be something else involved here - when you open the Menu, the dropdown is still there, just invisible (if you hover it, your pointer changes to hand). Adding position: relative to the #footer improves the things a bit - the dropdown shows but sometimes stops while animating, also the item hovers seldom work. All this seems like one of the aforementioned filter bugs in IE.

    The solution I can offer you is to avoid placing anything inside a filtered element in IE. In this case, just add an element that can hold the gradient - check the updated jsFiddle.

    Greetings,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Karl
    Karl avatar
    15 posts
    Member since:
    Dec 2012

    Posted 17 Jan 2013 Link to this post

    Thanks Kamen, that definitely is useful information. I ended up just using an image for the gradient but your solution is a good idea as well.

    Thanks
Back to Top
Kendo UI is VS 2017 Ready