title: asp.net menu control not rending correctly in safari
body: <p>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. </p>
  
  <p><strong>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?</strong></p>
  
  <pre><code>&lt;!-- This is how the menu control is defined --&gt;
  &lt;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"&gt;
      &lt;DataBindings&gt;
          &lt;asp:MenuItemBinding DataMember="MenuItem" NavigateUrlField="NavigateUrl" TextField="Text"
              ToolTipField="ToolTip" /&gt;
      &lt;/DataBindings&gt;
      &lt;StaticSelectedStyle BackColor="#0066CC" HorizontalPadding="5px" VerticalPadding="2px"
          Font-Names="Verdama" CssClass="left_menuTxt1" Font-Bold="true" /&gt;
      &lt;StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="8px" /&gt;
      &lt;DynamicMenuStyle BackColor="#fbfbfb" BorderColor="#989595" BorderStyle="Inset" BorderWidth="1"
          Width="80px" VerticalPadding="1" /&gt;
      &lt;DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" Font-Name="Verdama"
          ForeColor="#c6c4c4" CssClass="left_menuTxt1" Font-Bold="true" /&gt;
      &lt;DynamicSelectedStyle BackColor="#cccccc" HorizontalPadding="5px" VerticalPadding="2px"
          Font-Names="Verdama" CssClass="left_menuTxt1" Font-Bold="true" /&gt;
  &lt;/asp:Menu&gt;
  &lt;!-- From Safari View Page Source (Chrome source very similar) --&gt;
  &lt;span title="Order" class="ctl00_leftNav_menu_4"&gt;
  &lt;a class="ctl00_leftNav_menu_1 ctl00_leftNav_menu_3" 
    href="javascript:__doPostBack('ctl00$leftNav$menu','oMy Order')"&gt;
  My Order
  &lt;img src="/WWW/WebResource.axd?d=glUTEfEv7p9OrdeaMxkMzhqz2JugrMr8aE43O2XGHAA1&amp;amp;t=633590571537099818" 
  alt="Expand My Order" 
  align="absmiddle" 
  style="border-width:0px;" /&gt;&lt;/a&gt;&lt;/span&gt;&lt;br /&gt;
  
  
  &lt;!-- From Firefox View Page Source (IE View page similar) --&gt;
  &lt;table&gt;
  &lt;tr onmouseover="Menu_HoverStatic(this)" 
      onmouseout="Menu_Unhover(this)" 
      onkeyup="Menu_Key(event)" 
      title="Order" 
      id="ctl00_leftNav_menun0"&gt;
    &lt;td&gt;
      &lt;table class="ctl00_leftNav_menu_4" cellpadding="0" cellspacing="0" border="0" width="100%"&gt;
       &lt;tr&gt;
         &lt;td style="white-space:nowrap;width:100%;"&gt;
            &lt;a class="ctl00_leftNav_menu_1 ctl00_leftNav_menu_3" 
               href="../Order/OrderList.aspx"&gt;
  My Order
            &lt;/a&gt;
         &lt;/td&gt;
         &lt;td style="width:0;"&gt;
             &lt;img src="/WWW/WebResource.axd?d=glUTEfEv7p9OrdeaMxkMzhqz2JugrMr8aE43O2XGHAA1&amp;amp;t=633590571537099818" 
                  alt="Expand My Order" style="border-style:none;vertical-align:middle;" /&gt;
         &lt;/td&gt;
       &lt;/tr&gt;
    &lt;/table&gt;
   &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>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. :)</p>