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.