I was caught off-gaurd today when a user of one my applications reported that the asp:Menu was not rendering properly in her IE browser. I checked the version and it was IE8. I changed the application to compatibility view and the menu rendered just fine.
Since I cannot tell each and every user to view the app in compatibility view when in IE8, i started digging for solutions. It looked like a z-index problem to start with. The problem was that since the new IE8 is moving closer to standards, the z-index value was set to "auto" when not specified. I tried changing it something bigger than its container's z-index value woo-hoo...it worked.
I just added this line in the CSS class definition:
z-index : 100; /* Setting z-index because of an IE8 bug */
Since it is a bug, there are some hotfixes available from MS here.
This problem prompted me to look for rendering in Chrome and Safari also.
The asp:Menu control looks horrible in Chrome. There are no popups, just plain static text. I stumbled upon this thread which discusses this problem. I did not use the method posted in that thread, instead, I used a solution posted by user Mark Perkins which to me looked like the simplest and cleanest solution. Here is what he posted:
Put this piece of code in your Master page code file:
// Adding this override so that the asp:Menu control renders properly in Safari and Chrome
protected override void AddedControl(Control control, int index)
{
if (Request.ServerVariables["http_user_agent"].IndexOf("Safari", StringComparison.CurrentCultureIgnoreCase) != -1)
{
this.Page.ClientTarget = "uplevel";
}
base.AddedControl(control, index);
}