ASP.NET Menu and IE8 rendering white issue
If you are using the ASP.NET Menu control, you might encounter under certain circumstances an issue where the menu appears as a white box in IE8 Standards Mode.
What IE8 is doing IS correct (by design), in the sense that in Standards mode IE8 is following the standards. Specifically, (element).currentStyle.zIndex returns "auto" in Standards mode when zindex has not been set. The ASP.NET Menu control assumes a different value.
I’d like to suggest a few possible workarounds to solve quickly the issue (note, you can use either one of them, depending on your scenario):
- Overriding the z-index property
- Using CSS Friendly Control Adapters
- Adding the IE7 META tag to the website
1 – Overriding the z-index property
You can manually set the z-index property of the Menu items using the DynamicMenuStyle property of the asp:Menu control (note lines 9-14 and 20). Full source code is:
1: <head runat="server">
2: <title></title>
3: <style type="text/css">
4: body
5: { 6: background-color: Silver;
7: }
8: </style>
9: <style type="text/css">
10: .IE8Fix
11: { 12: z-index: 100;
13: }
14: </style>
15: </head>
16: <body>
17: <form id="form1" runat="server">
18: <div>
19: <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1">
20: <DynamicMenuStyle CssClass="IE8Fix" />
21: </asp:Menu>
22: <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
23: </div>
24: </form>
25: </body>
This solution is the least intrusive, but it require a page-by-page update (unless your menu is a Master Page).
2 – Using CSS Friendly Control Adapters
Thanks to Tim for this solution. In order to add the CSS Friendly adapter to your project, you will need to:
- Download CSSFriendly.dll and CSSFriendlyAdapters.browser from here.
- Inside your project, add a reference to CSSFriendly.dll.
- Add the special folder App_Browsers to your project, and copy the file CSSFriendlyAdapters.browser.
The CSS Friendly Control Adapters will render all the listed controls (Menu, TreeView, DetailsView, …) using CSS and HTML standards.
3 – Add the IE7 META tag to the project
By default, Windows Internet Explorer 8 will attempt to display content using its most standards-compliant mode, the IE8 Standards mode. However you can still switch to the IE7 Standards mode adding a particular META TAG to the head of the page:
1: <html xmlns="http://www.w3.org/1999/xhtml">
2: <head runat="server">
3: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
4:
5: <title>IE8 ASP.NET Fix</title>
6: </head>
7: <body>
Using the tag, the website in IE8 will look and work in the same way as it does in IE7.
You can do a “live test” of this feature without the need to modify the page, using the new IE8 Developer Toolbar (press F12 to open the toolbar, and switch the Document Mode to IE7 Standards).
Note that you can set up the META tag at page level, at web.config level, or in IIS, or in Apache, …
What happens next?
The ASP.NET team is currently working on this issue and we will most likely create an official KB to address this issue before IE goes RTW.
EDIT: Hotfix are now available. Check here.
Thanks to all the community feedbacks we received so far.
Technorati Tags:
ASP.NET,
Menu,
IE8
