Click here to Skip to main content
15,510,087 members
Articles / Web Development / CSS
Tip/Trick
Posted 27 Jul 2012

Stats

84.3K views
168 downloads
5 bookmarked

ASP.NET Menu Control Issue in Chrome and Safari

Rate me:
Please Sign up or sign in to vote.
4.94/5 (11 votes)
27 Jul 2012CPOL1 min read
ASP.NET menu control not shown properly in Chrome and Safari

Introduction

While using ASP.NET menu control at that time, Safari as well as Chrome did not render that control properly. That’s the reason why mouse over does not work properly in Chrome and Safari with ASP.NET menu control as shown in the below images.

Safari

Chrome

While it's working perfectly with Mozilla Firefox and Internet Explorer.

IE9

Mozilla Firefox

Solutions

As you can see, the look and feel of the main menu is different. Submenu does not show up. So what is the solution for this? I searched Google and found that these 3 solutions work perfectly.

Method 1

  1. Go to Solution Explorer in Visual Studio and add “ASP.NET Folder” named “APP_Broswers”.
  2. Add new item “Browser File” to this special folder and name it “safari.browser” for both browser Chrome as well as Safari.
  3. Now delete all per-added data from safari.browser file.
  4. Now add the following tags to that browser file:
    XML
    <browsers> 
        <browser refID="safari1plus"> 
            <controlAdapters> 
              <adapter controlType="System.Web.UI.WebControls.Menu" 
              adapterType="" /> 
            </controlAdapters> 
        </browser> 
    </browsers>
  5. Now, the only thing is that you need to save that file.

Steps

Method 2

The other solution is using Server side code. For fixing bug, we need to write these two lines of code to each and every Page's Page_PreInit event, or if MasterPage file is used, then there is no need to add these lines to each and every page, just copy and paste these lines to only MasterPage's Page_PreInit event. This code works for both Safari as well as Chrome.

C#
protected void Page_PreInit(object sender, EventArgs e)
{
    if(Request.ServerVariables["http_user_agent"].IndexOf
    ("Safari",StringComparison.CurrentCultureIgnoreCase) != -1)
    {
        Page.ClientTarget = "uplevel";
    }
}

OR Use this alternate code

C#
protected void Page_PreInit(object sender, EventArgs e)
{
  if (Request.UserAgent.Contains("AppleWebKit")) 
     Request.Browser.Adapters.Clear();
}

After applying any of these changes, ASP.NET menu works properly in all browsers like Mozilla Firefox, Internet Explorer, Safari and Chrome.

Chrome

Safari

Enjoy the trick!!!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
PraiseAwesome! Pin
Member 134620362-Aug-18 6:26
Member 134620362-Aug-18 6:26 
QuestionIs it any change required for Safari in iPod? Pin
Member 824462518-Mar-15 0:56
Member 824462518-Mar-15 0:56 
AnswerRe: Is it any change required for Safari in iPod? Pin
Tejas Vaishnav18-Mar-15 5:45
professionalTejas Vaishnav18-Mar-15 5:45 
QuestionMenu not displaying properly in google chrome Pin
Member 112887005-Dec-14 2:48
Member 112887005-Dec-14 2:48 
AnswerRe: Menu not displaying properly in google chrome Pin
Tejas Vaishnav5-Dec-14 20:16
professionalTejas Vaishnav5-Dec-14 20:16 
I have added, source code, so you can check that out, and you can also refer below article as well http://www.asp.net/cssadapters/walkthru/walkthrough.aspx[^]
Tejas Vaishnav
Find me on Facebook | Blog

QuestionThanks Pin
zanyar201031-Mar-14 9:34
zanyar201031-Mar-14 9:34 
AnswerRe: Thanks Pin
Tejas Vaishnav31-Mar-14 20:44
professionalTejas Vaishnav31-Mar-14 20:44 
GeneralGreat post Pin
tyczo20-Jan-14 4:42
tyczo20-Jan-14 4:42 
GeneralRe: Great post Pin
Tejas Vaishnav20-Jan-14 19:01
professionalTejas Vaishnav20-Jan-14 19:01 
GeneralMy vote of 5 Pin
Rowen Gonzales23-Sep-13 22:19
Rowen Gonzales23-Sep-13 22:19 
QuestionThanks but it gives an error Pin
GaryParkin5-Sep-13 5:06
GaryParkin5-Sep-13 5:06 
GeneralMy vote of 5 Pin
kurle.nitin15-Mar-13 0:00
kurle.nitin15-Mar-13 0:00 
QuestionConext menu Pin
Member 812804019-Dec-12 20:34
Member 812804019-Dec-12 20:34 
Questionthrown error.. Pin
ravi teja .k18-Dec-12 5:38
ravi teja .k18-Dec-12 5:38 
AnswerRe: thrown error.. Pin
Tejas Vaishnav18-Dec-12 23:24
professionalTejas Vaishnav18-Dec-12 23:24 
GeneralMy vote of 4 Pin
Rajendra Bhandari12-Dec-12 0:16
Rajendra Bhandari12-Dec-12 0:16 
GeneralRe: My vote of 4 Pin
Tejas Vaishnav12-Dec-12 23:17
professionalTejas Vaishnav12-Dec-12 23:17 
GeneralMy vote of 5 Pin
Rockstar_16-Nov-12 20:22
professionalRockstar_16-Nov-12 20:22 
GeneralRe: My vote of 5 Pin
Tejas Vaishnav19-Nov-12 23:45
professionalTejas Vaishnav19-Nov-12 23:45 
GeneralNon-intuitive Pin
callcopse9-Nov-12 2:23
callcopse9-Nov-12 2:23 
GeneralRe: Non-intuitive Pin
Tejas Vaishnav19-Nov-12 23:45
professionalTejas Vaishnav19-Nov-12 23:45 
GeneralMy vote of 5 Pin
Abdul Quader Mamun13-Aug-12 18:07
Abdul Quader Mamun13-Aug-12 18:07 
GeneralRe: My vote of 5 Pin
Tejas Vaishnav16-Aug-12 1:06
professionalTejas Vaishnav16-Aug-12 1:06 
GeneralRe: My vote of 5 Pin
Abdul Quader Mamun16-Aug-12 1:46
Abdul Quader Mamun16-Aug-12 1:46 
GeneralRe: My vote of 5 Pin
Abdul Quader Mamun16-Aug-12 1:46
Abdul Quader Mamun16-Aug-12 1:46 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.