In IE7 or IE8 in compatibility mode some menu items are showing behind page elements. I have seen that this might be to do with z-index settings that are not handled correctly in IE.
Is there anything that can be done?
Hello,
I created a sample solution and I was able to recreate circumstances as you describe here. Upon testing I agree that this appears to be a bug. I have gone ahead and logged a bug with our developers on your behalf. The bug was logged with the following issue number is 67726.
Sincerely,TroyDeveloper Support Engineer
Regarding the development issue (#67726) pertaining to the webDataMenu control items hiding behind other page elements when using IE7; this is a known issue specific to IE7 and is not a development issue pertaining to the WebDataMenu control. IE7 doesn't recognize the z-index properly. There isn't anything that can be done in the control to correct for this IE7 bug.
I am seeking a work around and will return to you by Thursday if a workaround can be provided.
My menu is in a User control. I worked round the problem by doing a check on the browser version and presenting my old version of the user control which uses WebMenu, when the browser is IE7 or older.
That, for me, is an easier solution than the one you suggest.
So thanks, but I don't need further assistance.
Regards
Nick
I just wanted to check and see if there is any further assistance you needed on this matter.
There is a work around for the IE7 z-index bug in our on-line samples for the WebDataMenu.
Navigate to samples.infragistics.com --> WebDataMenu ->Scrolling -> Menu Scrolling. In the source code section, focus on the below section of the source code:
// ensure that menus are not corrupted and transparent. IE7 has a well known bug with the z-indexes and reseting the stacking index whenever there is a
// an element with position relative or absolute in the control's dom hierarchy
function IE7ZIndexAdjust()
{
var div1 = $get('div1');
var div2 = $get('div2');
if ($util.IsIE7)
div1.style.zIndex = '10';
div1.style.position = 'relative';
div2.style.zIndex = '1';
div2.style.position = 'relative';
}
Also menu container is wrapped by a DIV: <div id="div1" style="margin-left:20px;position:relative;">
I hope this helps.