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, that's very helpful.

    I'd been avoiding using the ASP.NET menu control in IE8 Standards mode since I tried it in Beta 1 - back then using the Menu caused numerous JavaScript errors, so anything that can be fixed with a simple style is a vast improvement.

    On the subject of compatibility - I just now remembered to check the AJAX control toolkit extenders - once again, the situation is now greatly improved (in fact everything I tried worked fine - the opposite of the situation the first time I checked). That's quite a relief.

  • Since I’ve run into this issue myself, I thought I’d share a blog post that offers several possible workarounds

  • THANK YOU VERY MUCH!!!

    This solution very useful to me.

    I Just apply "z-index: 100;" in CSS file. Now working good.

  • I have met with the same issue and have decided to use the CSS Friendly Adapters. However, the menu is only looking acceptable in IE8 if the Compatibility View setting is set. Otherwise the menu is rendering dynamic div over the old ones.

  • Helped me so much..Thank You..

  • Reports of broken sites are an important part of the feedback the IE team receives from the community.

  • Thanks very much. This solved my menu problem. Keep on doing and explaining related issues.

    Thanks again.

  • Setting the DynamicMenuStyle z-index worked perfect. Thanks.  I was giving up on using the menu control for sub menus after getting nowhere.

  • Dear Giorgio,

    Has this issue been adressed by the ASP.Net team, now that IE8 has gone live? I am the owner of a webbased application and would have my developers spending as little as time necessary for fixing this bug (€€€!!!)

    Would be great, thanks for your help!

    Karlo

  • Primi problemi per Internet Explorer 8

  • Il nuovo motore di rendering di Internet Explorer 8 comincia a mietere le prime vittime… Il primo a cadere

  • Hi Giorgio,

    Thanks for that. It was the only problem I had on my site with IE.

    Just to clarify, is this actually a bug in IE8 or is this IE8 being more true to THE standard ... whatever THE standard happens to be these days :)

    Thanks again.

  • Thanks Giorgio!  The DynamicMenuStyle option worked for me :)

  • Thanks all for the feedbacks.

    @Mark: IE8 by default use the new layout engine, that has been designed to be 100% standards compliant with CSS 2.1. (See more at my MIX session, A Lap around IE8).

    @Karlo: we will soon release (and distribute) an hotfix that will fix this issue.

    If I look at this issue, I think this as a clear sign that we, as Microsoft, finally committed to full interoperability with web standards. We understand that this will require an initial "extra work" for our developers, but in the long term is going to be a great return of investment for the entire community.

    Thanks!

  • Thanks so much I used the CSS solution and it works. Thanks again, you saved the day!

Page 1 of 7 (101 items) 12345»