asp:Menu rendering problems in IE8, Safari and Chrome

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);

    }