Friday, July 30, 2010

ASP.NET Menu issue with Safari

The popular Apple Safari browser is available on Windows since 2007. So now, the famous “I don’t have a Mac” reason is no longer acceptable when developing Web site that target everyone. This is not a big deal, unless you want to use the ASP.NET Menu control on your web site. There is as small issue with the rendering of that control inside Safari browser and prevent sub-menu items to be displayed.
Here is a sample Web page viewed with Safari 5. The page contains a Menu control and some labels to show information about the selected menu items.
image
We can see that the “Support” menu items contains sub-menu items but even when the mouse hover that menu items, the sub-menu doesn’t show. One quick and easy solution to fix this problem is to set the Page.ClientTarget property to “uplevel” in the page pre init event.
For those of you who don’t know, the Page.ClientTarget property allows you to override the automatic detection of browser capabilities and to specify how a page is rendered for a particular browser client.
More information about the ClientTarget property can be found on MSDN Web site:
http://msdn.microsoft.com/en-us/library/system.web.ui.page.clienttarget.aspx
Here is the C# code for setting the Page.ClientTarget property:
   1: protected void Page_PreInit(object sender, EventArgs e)
   2: {
   3:     if (Request.ServerVariables["http_user_agent"].IndexOf("Safari", StringComparaison.CurrentCultureIgnoreCase) != -1)
   4:     {
   5:         Page.ClientTarget = "uplevel";
   6:     }
   7: }

And the VB code:


   1: Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreInit
   2:     If (Request.ServerVariables("http_user_agent").IndexOf("Safari", StringComparaison.CurrentCultureIgnoreCase) <> –1) Then
   3:         Page.ClientTarget = "uplevel"
   4:     End If
   5: End Sub

image

Please note that this needs to be implemented on all Web pages on which the menu should be.

For those of you that would like to see how their Web sites look on Safari but doesn’t have an Apple computer, you can download the Windows version of Safari browser here:

http://www.apple.com/safari/

Best regards,

Bruno

Technorati Tags: ,,

No comments:

Post a Comment