asp.net menu control not rending correctly in safari

Question

The site I\'m working on is using a Databound asp:Menu control. When sending 1 menu item it renders HTML that is absolutely correct in Firefox (and IE), but really messed u

Answer 1

The issue with Chrome and Safari not rendering the menu control properly is due to the navigation skiplink image box being rendered by Chrome and Safari.

If you do a css display: none; on the image for the skiplink then the menu control positions itself like it should.

I've tested this on a simple 1 level menu and not nested menus.

http://www.s-t-f-u.com/2011/05/05/asp-net-menu-control-positioning-in-safari-google-chrome/

Answer 2

Here's the easiest way to fix this issue for both chrome and safari if you have multiple web apps:

Create a file named safari.browser in "%SystemRoot%\Microsoft.NET\Framework[version]\CONFIG\Browsers" that contains the following:

<browsers>
    <browser refID="Safari1Plus">
        <controlAdapters>
            <adapter controlType="System.Web.UI.WebControls.Menu"
                     adapterType="" />
        </controlAdapters>
    </browser>
</browsers>

This will tell asp.net not to use an adapter when rendering the menu control for safari. Safari1Plus is defined at the end of the mozilla.browser file in the same directory. This works for chrome as well because they both use webkit which is how asp.net identifies Safari1Plus.

Next run %SystemRoot%\Microsoft.NET\Framework[version]\aspnet_regbrowsers -i

this will compile all the browser files into an assembly and add it to the GAC.

now the asp.net menu will render correctly in safari and chrome.

Alternatively you can add the file the the App_Browsers directory in each of your web apps.

Answer 3

I've had problems with the asp:menu control and webkit as well. Plus it's hard to style exactly the way I want. My recommendation is to use the CSS Friendly Control Adapters:

• http://www.asp.net/cssadapters/
• http://www.asp.net/CSSAdapters/Menu.aspx

This converts the menu's table into much more modern and SEO-friendly markup. Your menu will look more like this:

<ul class="AspNet-Menu">
  <li class="Leaf Selected">
    <a href="Orders.aspx" class="Link Selected">Orders</a></li>
  <li class="ALeaf">
    <a href="MyOrders.aspx" class="Link">My Orders</a></li>
</ul>

In my testing, the markup is the same in all browsers.

Answer 4

I found this solution from a comment on weblogs.asp.net. It might be a hack, but it does work.

This cross browser compatibility struggle is getting upsetting.

 if (Request.UserAgent.IndexOf("AppleWebKit") > 0)
    {

        Request.Browser.Adapters.Clear();

    }

If anyone has a better solution that's not so much a hack, I would be grateful if you posted it. And from my extensive web searches, it looks like I'm not alone with this problem with the menu control, so some good references would help out others in the same situation.

Answer 5

Here's the @Mayank Sharma / @jball C# version converted to VB.NET. Thanks for the fix guys, been bugging me for months. My problem was every browser on MAC and PC worked except IE8 and Chrome. But then Chrome, much as I like it, often fails to run Google Docs - work that out!!!

Protected Overrides Sub AddedControl(ByVal control As Control, ByVal index As Integer)
    If Request.ServerVariables("http_user_agent").IndexOf("fake_user_agent", StringComparison.CurrentCultureIgnoreCase) <> -1 Then
      Me.Page.ClientTarget = "uplevel"
    End If
    MyBase.AddedControl(control, index)
  End Sub

You'll note that I had to check for "fake_user_agent", not "Safari".

Answer 6

I just wanted to submit an alternate option. This works for ASP.NET 3.5.

• Add the "App_Browsers" ASP.NET folder to your project
• Create a Browser file within this folder

• In the browser file, add the following code between the <browsers> tag:

  <browser id="Chrome" parentID="Safari1Plus">
<controlAdapters>
<adapter controlType="System.Web.UI.WebControls.Menu" adapterType="" />
</controlAdapters>
</browser>

That should properly render the menu control in Chrome/Safari.