Now that IE8 has become an important download from Microsoft, I expect to see the asp:menu bug raising its head more frequently. Mostly the asp.Net controls seem to work well in IE8. Unfortunately there is a bug in the menu control that is highlighted when using a standards compliant browser (like IE8, but interestingly Firefox does not comply with this particular standard).
The symptom is that the dynamic portion of an asp:menu is rendered entirely in white (i.e. unreadable) in IE8. There are several solutions:
- View the site in compatibility mode
- Download the hotfix from Microsoft
- Use a CSS adapter for your controls
- Add a z-order to the CSS for your dynamic menu
- Add a meta tag to the web site
Personally, I went for the z-order solution as it was the quickest to implement (am I not Agile?). To implement this, change the CSS class of your Dynamic menu. I do this using the DynamicMenuStyle-CssClass attribute of the asp:menu control.
e.g.
<asp:Menu ID="Menu1" runat="server" DataSourceID="StdSiteMapDataSource" Orientation="Horizontal"
StaticMenuStyle-CssClass="StaticMenu" StaticMenuItemStyle-CssClass="StaticMenuItem"
DynamicMenuItemStyle-CssClass="DynamicMenuItem" DynamicMenuStyle-CssClass="DynamicMenu"
StaticHoverStyle-CssClass="StaticMenuHover" StaticSelectedStyle-CssClass="StaticMenuSelected"
OnMenuItemDataBound="Menu1_MenuItemDataBound" StaticEnableDefaultPopOutImage="False">
<StaticMenuItemStyle ItemSpacing="0" />
</asp:Menu>
In my CSS file I have this:
.DynamicMenu
{
background-color: #3e6fc8;
margin-top: 1px;
z-index: 100; /* IE 8 menu fix */
}
Check this blog entry out for some futher information about this.