Asp Menu controls lacks to render its items which are set with dynamic visibility in Internet Explorer 8. Microsoft has also confirmed at Microsoft Support that this particular issue resides in some of their products [1]. After a systematic testing Microsoft has found that IE is not faulty for this, but the asp menu control surely is [2]. The issue happens because the asp menu control assumes the value of CSS property z-index wrongly for its dynamic items. The control works as expected with other browsers like IE-7, IE-6, Firefox and others.
There are a few workarounds for this problem;
Microsoft Hotfix for Asp Menu control problem
Soon after the release of IE-8, this bug was reported and Microsoft released a Hotfix to address this issue. This is available for both Windows XP and Windows Vista.
The Knowledge Base for this Hotfix can be found here;
http://support.microsoft.com/kb/962351
http://support.microsoft.com/?id=981201
The Hotfix itself can be downloaded from these locations;
http://code.msdn.microsoft.com/KB962351/Release/ProjectReleases.aspx?ReleaseId=2294
http://code.msdn.microsoft.com/KB967535/Release/ProjectReleases.aspx?ReleaseId=2328
This Hotfix although is available for applications built in Framework 2.0. For the later Frameworks the Knowledge Base (KB981201) suggests to contact Microsoft Support to obtain this HotFix.
Overriding the z-index property for dynamic items
As the problem is due to bad z-index assumption, we can set the z-index of dynamic items as a highest value than all control’s z-index. This solves the problem for the asp menu control and the given z-index value is used.
To achieve this solution, add a CSS class for the z-index of asp menu dynamic items, in the CSS file
.DynamicItemZIndex
{
z-index:1000;
}
Use this CSS class as the DynamicMenuStyle-CssClass for the asp menu control, in the skin file
<asp:Menu
<%-- some other properties --%>
DynamicMenuStyle-CssClass="DynamicItemZIndex"
<%-- some other properties --%>
>
</asp:Menu>
This workaround is very good, as we do not need to compromise on any browser or control level functionality. Moreover, using this technique does not incorporate any external resources.
Emulating IE-7 in IE-8
IE-6 and IE-7 does not bother asp menu control for the rendering of its dynamic items. So, an alternate solution is to add a Meta tag for emulating IE-7 in IE-8. This also, fixes the problem.
To achieve this solution, add a Meta tag at the page level for emulating IE-7
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<%--Emulating IE-7--%>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Menu ID="Menu1" runat="server" >
<%-- some properties --%>
</asp:Menu>
</div>
</form>
</body>
</html>
This Meta tag can also be added at the application level in web.config file
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<add name="X-UA-Compatible" value="IE=EmulateIE7" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
Using CSS Friendly Control Adapters
CSS friendly adapters have been set up according to the HTML and XHTML standards. These render many asp controls (Menu, TreeView, DetailsView etc) as per the standards, thus lessening the controls rendering and browser compatibility issues.
To achieve this solution [3]
- Download the CSS Friendly Adapters assembly and browser file from codeplex from http://cssfriendly.codeplex.com/
- Add a reference to this assembly in your project.
- Add the App_Browsers folder and put the adapter’s browser file there.
This way the CSS adapter will work to render the controls in a correct manner. CSS Friendly Adapters are good when one wants to build a site as per the standards and want to keep it standard compliant for the new browsers also, but using these adapters also lessen the performance particularly in the rendering phase of a page.
Another noticeable point is that currently the CSS friendly adapters can be used with ASP.NET 2.0 only. The new version is in the development process although.
Solution for Other Browsers
IE-8 has now been made the highest standards compliant browser (100%). But the other browsers still are running non-compliant. Firefox 3 is 90%, whereas Opera 9 is 85% standards compliant [4]. The ratio for Chrome and Safari is not perfect too.
Asp menu control happens to be faulty in some of these browsers as well, like Safari on top.
The solution to this problem in the browsers like Chrome and Safari can be achieved by clearing the control adapters (as in Page_Load event) or rendering the page as the previous browsers (as in Page_PreInit event)
protected void Page_Load(object sender, EventArgs e)
{
if (Request.UserAgent.Contains("AppleWebKit"))
{
Request.Browser.Adapters.Clear();
}
}
protected void Page_PreInit(object sender, EventArgs e)
{
if (Request.UserAgent.Contains("Safari"))
{
Page.ClientTarget = "uplevel";
}
}
