This is a migrated thread and some comments may be shown as answers.

Menu Z-index Issue IE 8 and 9

5 Answers 187 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Karl
Top achievements
Rank 1
Karl asked on 15 Jan 2013, 05:52 PM
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.

5 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 16 Jan 2013, 07:50 AM
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!
0
Karl
Top achievements
Rank 1
answered on 16 Jan 2013, 03:05 PM
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.
0
Karl
Top achievements
Rank 1
answered on 16 Jan 2013, 08:04 PM
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.
0
Kamen Bundev
Telerik team
answered on 17 Jan 2013, 09:19 AM
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!
0
Karl
Top achievements
Rank 1
answered on 17 Jan 2013, 02:24 PM
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
Tags
Menu
Asked by
Karl
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Karl
Top achievements
Rank 1
Share this question
or