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

If you put ClientTarget="uplevel" in the page directive <%@ Page ClientTarget="uplevel" ......%> Safari works totally!!!!!

Answer 5

Hi there!

I am new to web development and I am actually, at this stage regretting getting into it. After failing to manage with First Page HTML editor I got Visual Web Developer Express and managed to build the website (for a friend of mine) with ease. After hundreds of hours I managed to upload the new site on the server. To my utmost horror we discovered that the site does not display correctly on APPLE SAFARI & GOOGLE CHROME (menus does not display). I want to die!!

I have tried to employ the above mentioned patched but I am too inexperienced to do it so that it works properly. Can somebody please help me out on giving me detailed pointers on how to employ the patches. I would appreciate it very much.

Kind regards Deltavektor, South Africa

Answer 6

yup...microsoft and a jazillion nested tables. that's how we roll... and who would've ever thought that a web designer might actually know how to use proper css which breaks when you push those jazillion tables into one browser and some crazy divs into another which don't take the css styles added to the asp:Menu item? and then how the heck are you supposed to be able to add any javascript front-end interaction to any of that business?

Keltex - you are awesome for pointing me to the CSSAdapters. Saving grace in digital. I even like Microsoft, but this is a little silly. Web standards...someday we will all be there.

Answer 7

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

Answer 8

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".