The ASP.NET Menu controls in my application display correctly in all browsers but Apple's Safari and Google's Chrome. After researching the problem this afternoon, I'm documenting the fix I used.
ASP.NET Menu Control Renders Correctly in IE, Firefox, and Opera
ASP.NET Menu Control Renders Incorrectly in Safari and Chrome
The Fix:
- Create the following PageBase class which inherits System.Web.UI.Page and define a Page_PreInit method which contains the fix:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MyProject.WebSite
{
public class PageBase : System.Web.UI.Page
{
protected void Page_PreInit(object sender, EventArgs e)
{
// This is necessary because Safari and Chrome browsers don't display the Menu control correctly.
// All webpages displaying an ASP.NET menu control must inherit this class.
if (Request.ServerVariables["http_user_agent"].IndexOf("Safari", StringComparison.CurrentCultureIgnoreCase) != -1)
Page.ClientTarget = "uplevel";
}
}
}
- Change ALL of your webpages to inherit from your new PageBase class instead of the usual Page class. It's easiest to do a global replace of ": System.Web.UI.Page" with ": PageBase". Unfortunately, you can't just add the fix to your Master Page, it doesn't contain a PreInit method as it's a web control not a web page.
Alternate Fix:
- if (Request.UserAgent.Contains("AppleWebKit")) Request.Browser.Adapters.Clear();
- I'm not sure which is "better", but I used the first solution above and it works for me.
References
- http://forums.asp.net/t/941229.aspx?PageIndex=1
- http://weblogs.asp.net/dannychen/archive/2005/11/21/using-device-filters-and-making-menu-work-with-safari.aspx