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):
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">
3: <style type="text/css">
6: background-color: Silver;
9: <style type="text/css">
12: z-index: 100;
17: <form id="form1" runat="server">
19: <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1">
20: <DynamicMenuStyle CssClass="IE8Fix" />
22: <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
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:
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" />
5: <title>IE8 ASP.NET Fix</title>
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.
To summarize with one picture the great recap of the Compatibility View written by Scott on the IE blog…
…you can make your site compatible with IE8 just adding the META tag:
Internet Explorer Compatibility Center: msdn.com/iecompat
About one year ago, almost at this same time, I’ve been given the opportunity to attend MIX 08. I’ve been in many places and conferences…but that was my first, ever, MIX: I don’t think to have the words to describe the super-extra-gorgeous-awesome-fantastic experience I had there! I can say – without any doubt – that MIX 08 changed my point of view, my career, my life.
This year I’d like to offer the same experience to someone out there. I will give away 1 FREE pass to MIX (FYI, the pass include the conference ticket, breakfast, lunch, parties, bag, bits, …but not the hotel and the flight). Btw, the value of the ticket, according to the latest stock report, is about $1400 :)
If you are interested (to change your life, OR just to get a free ticket :))…this is what you need to do:
“Share a creative picture about Internet Explorer”
The following rules apply:
On February 24th, I will review all the entries and choose the best one. My criteria will be:
If you are looking for inspiration, you can start from the IE website or the new IE Add-on Gallery.