Giorgio Sardo Blog

Senior Director of Windows, Windows Phone & XBOX Technical Evangelism & Development at Microsoft Corporation

ASP.NET Menu and IE8 rendering white issue

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.

image

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
  2. Using CSS Friendly Control Adapters
  3. 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:

  1. Download CSSFriendly.dll and CSSFriendlyAdapters.browser from here.
  2. Inside your project, add a reference to CSSFriendly.dll.
  3. 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).

image

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: ,,
  • Thanks Giorgio!!!, very helpful article! :D

  • Giorgio:

    Buon lavoro,

    Grazie millie!

  • While I appreciate the workaround, I find it unacceptable that MS would release a browser that breaks applications developed using their own framework.  You guys need to get it together and work with the .NET team so you don't have thousands of developers wasting their time on issues like this.  My site is now viewable in every browser EXCEPT IE 8.  It's ludicrous.

  • Hi John,

    if we look at what we did back in the past, moving from IE5 to IE6 to IE7...is exactly what you say: "Releasing a new product that don't break any previous application". Or, in other words, support legacy code.

    With IE8 we took a different direction: being standards compliant by default. We did *a lot* of testing either with Microsoft applications and public websites. Unfortunately we are aware of a few things (like this) that could break, but:

    1) We built an (IMHO) amazing compatibility support in IE8, that allows you to opt-in for the IE7 rendering engine. This is something that no other browser has ever done. Other browsers will just pretend you to update all of your code, if they do some breaking change....

    2) We are releasing free tooling support, to help investigate and make sure website standard compliant.

    We are aware that this will require some extra work from your side. At the same time, as we move forward, having IE8 being standards compliant will make your future website development experience much easier, thus will reduce development costs...

    As I've written previously in this post we will release an hotfix for ASP.NET (note, not for IE...) that will fix this issue. The hotfix will also be included in future SP versions and finally in the next ASP.Net/OS releases.

    Please keep on reporting your issues and feedbacks; our final goal is to make the developer community code faster across browsers and platforms ;)

    Thanks,

    Giorgio

  • Hi Giorgio,

    I tried all fixes and non worked, my menue is still not visible at all (asp:Menu VS 2005). No white square or anything. In IE 7 or FF it works just fine.

    Any ideas?

    Thanks for the help.

    Kassian

  • Ciao Giorgio,

    Was the hotfix on ASP.net included in the update that came through not last night, but the night before? (European time). Servers went down, but anyway :-)

    Or is it still pending?

    Great to have a direct line with you in this way!

    Mille grazie!

    Karlo

  • Hotfix are available for download here:

    http://weblogs.asp.net/bleroy/archive/2009/03/23/asp-menu-fix-for-ie8-problem-available.aspx

  • Hi, Thank you so much for this info! I added the IE8 css fix to my master pages/css file and it works without flaw.

    Thanks!

    hunzonian

  • Internet Explorer 8 and ASP:Menu Control

  • Giorgio, thanks so much for the post.  I added the DynamicMenuStyle tonight in my master pages and it worked like a charm. I noticed this as a problem in the beta but thought it would be fixed before IE8 went live.

    Thanks!

    Sherlock Ossa

  • Thanks Shelock. In fact the ASP.Net team did a great job releasing the hotfix one week before IE8 went RTW. :-)

  • I was able to fix the problem with solution number 1 (Overriding the z-index property). Thanks for the example. I'm glad my menus were in master pages!

    I remember having to fix the Safari problem with a addition to the AppBrowsers folder. The CSS Friendly Adaptor seems like a similar fix but you have to add the dll. Are people using this solution for other problems as well?

  • Ha a standard ASP.NET Menu vezérlőnek használjuk a dinamikusan kinyíló funkcióit, akkor készüljünk fel

  • Wow, thanks same me bunch of time

  • Solution no. 1 works for me on my Windows server 2003 machine but does not work on my Windows Server 2003 R2 Machine.

    Solution No. 3 worked just fine for me on both the machines.

Page 2 of 7 (101 items) 12345»