Thursday, 25 November 2010

asp:menu - Fix submenu appearing as a white box [IE8+]

If you have an asp:menu control as part of your ASP.NET application, you will notice that the sub menu appears as a white box and your content isn't visible. This is quite crucial if this is the only access point to your web pages!

1. Add z-index: 100; within a CSS class bound to the DynamicMenuItemStyle property on the menu control. This is the easiest fix. What IE8+ browsers are doing here is in theory correct, it more of a shortfall of the control. [Best Solution]

2. Use CSS friendly adapters. Requires a total re-design, why not take a look anyway.

3. Making your browser emulate IE7 by using the following meta tag in the appropriate pages.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Note: The 3rd solution is not the best idea as it goes against the principles of moving forward with the technology!

No comments: