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 up code in Safari and Chrome. Below is the code that was sent to each browser. I've tested it a few browsers, and they are all pretty similarly rendered, so I am only posting the two variations on the rendering source.

My question is: How do I get ASP.NET to send the same html and javascript to Chrome and Safari as it does to Firefox and IE?

<!-- This is how the menu control is defined -->
<asp:Menu ID="menu" runat="server" BackColor="#cccccc"
    DynamicHorizontalOffset="2" Font-Names="Verdana" StaticSubMenuIndent="10px" StaticDisplayLevels="1"
    CssClass="left_menuTxt1" Font-Bold="true" ForeColor="#0066CC">
    <DataBindings>
        <asp:MenuItemBinding DataMember="MenuItem" NavigateUrlField="NavigateUrl" TextField="Text"
            ToolTipField="ToolTip" />
    </DataBindings>
    <StaticSelectedStyle BackColor="#0066CC" HorizontalPadding="5px" VerticalPadding="2px"
        Font-Names="Verdama" CssClass="left_menuTxt1" Font-Bold="true" />
    <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="8px" />
    <DynamicMenuStyle BackColor="#fbfbfb" BorderColor="#989595" BorderStyle="Inset" BorderWidth="1"
        Width="80px" VerticalPadding="1" />
    <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" Font-Name="Verdama"
        ForeColor="#c6c4c4" CssClass="left_menuTxt1" Font-Bold="true" />
    <DynamicSelectedStyle BackColor="#cccccc" HorizontalPadding="5px" VerticalPadding="2px"
        Font-Names="Verdama" CssClass="left_menuTxt1" Font-Bold="true" />
</asp:Menu>
<!-- From Safari View Page Source (Chrome source very similar) -->
<span title="Order" class="ctl00_leftNav_menu_4">
<a class="ctl00_leftNav_menu_1 ctl00_leftNav_menu_3" 
  href="javascript:__doPostBack('ctl00$leftNav$menu','oMy Order')">
My Order
<img src="/WWW/WebResource.axd?d=glUTEfEv7p9OrdeaMxkMzhqz2JugrMr8aE43O2XGHAA1&amp;t=633590571537099818" 
alt="Expand My Order" 
align="absmiddle" 
style="border-width:0px;" /></a></span><br />


<!-- From Firefox View Page Source (IE View page similar) -->
<table>
<tr onmouseover="Menu_HoverStatic(this)" 
    onmouseout="Menu_Unhover(this)" 
    onkeyup="Menu_Key(event)" 
    title="Order" 
    id="ctl00_leftNav_menun0">
  <td>
    <table class="ctl00_leftNav_menu_4" cellpadding="0" cellspacing="0" border="0" width="100%">
     <tr>
       <td style="white-space:nowrap;width:100%;">
          <a class="ctl00_leftNav_menu_1 ctl00_leftNav_menu_3" 
             href="../Order/OrderList.aspx">
My Order
          </a>
       </td>
       <td style="width:0;">
           <img src="/WWW/WebResource.axd?d=glUTEfEv7p9OrdeaMxkMzhqz2JugrMr8aE43O2XGHAA1&amp;t=633590571537099818" 
                alt="Expand My Order" style="border-style:none;vertical-align:middle;" />
       </td>
     </tr>
  </table>
 </td>
</tr>
</table>

Update: My solution post is correct.. but i can't mark my own as correct... so if anyone wants to copy it so I can close this. :)

Answer 1

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 2

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 3

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 4

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.

Answer 5

Mayank Sharma found a solution that works with master pages, rather than editing individual pages. All pages that use the master page are fixed seamlessly. It's still a hack, but you do what you have to. Here's a barebones example master page code behind.

using System;
using System.Web.UI;

/// <summary>
/// Summary description for ExampleMasterPage
/// </summary>
public class ExampleMasterPage : MasterPage
{    
    public ExampleMasterPage() { }

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