Asp.net horizontal menu displayed as a vertical list

Question

http://i44.tinypic.com/5ureav.png

Sometimes, when my pages are rendered, a horizontal menu is displayed like this. Why?

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" ClientIDMode="AutoID"> <Items></Items> </asp:Menu> 

This usually happens when a page loads a large amount of data, but when the data ends, the load never returns to the horizontal.

Testing with IE 7, 8, and 9 and Chrome.

I looked around the internet and found that some people say that this is a z-index, but the setup did not help.

I use the "developer tools" in IE8 to further troubleshoot and search for some javascript calls that failed. I have no idea what they mean.

 <script type="text/javascript"> //<![CDATA[ Sys.WebForms.PageRequestManager._initialize('ctl00$MainContent$tsmgrEmployees', 'aspnetForm', ['tctl00$MainContent$uPanelEmployees',''], ['ctl00$MainContent$btnClear','','ctl00$MainContent$txtEUID','','ctl00$MainContent$txtFirstName','','ctl00$MainContent$txtLastName',''], [], 90, 'ctl00'); //]]> </script> 

Error created

'Sys.WebForms.PageRequestManager' is null or not an object

 <script type='text/javascript'>new Sys.WebForms.Menu({ element: 'ctl00_NavigationMenu', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script> 

Error created

'Sys.Webforms.Menu' is null or not an object

I believe that the remaining errors are all cascades of these two. Do you think I should replace jscript libraries with updated ones? Perhaps this is due to the browser since I am using IE8 (not in compatibility mode).

Another odd bit of information that can help is that when I create a solution in Visual Studio 2010 on WinXP Pro in my development environment, it works fine, but when I publish it on a server (IIS 7.5, Server 2008 R2) breaks. At first, I thought it might be data lag, but the connection string on the server should be faster than the connection string in my dev environment. The server uses Localhost as the target, my dev workstation uses the server path ... so I don't think this is data lag.

Answer 1

I had the same problem. This turned out to be caused by the following line in the Global.asax file:

 RouteTable.Routes.MapPageRoute("", "{*dummy}", "~/Default.aspx") 

I wanted to send users a request for non-existent routes to the Default.aspx page. Apparently this has an undesirable side effect that the browser cannot find the JS file needed to render the menu horizontally.

Answer 2

I had the same problem. I solved this by doing RenderingMode = "Table" in the asp: Menu control.

Example:

 <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" RenderingMode="Table"> <StaticMenuItemStyle CssClass="menuitem" /> <DynamicMenuItemStyle CssClass="menuitem" /> 

You will need to play a little with css (removing the attributes 'ul' and 'li' in your css).

Creature

  <StaticMenuItemStyle CssClass="menuitem" /> <DynamicMenuItemStyle CssClass="menuitem" /> 

The menu control (as shown above) also helps with css formatting.

For some reason, the menu list creates this problem. This is at least a workaround.

Answer 3

As in Visual Studio 2010 / .NET 4.0, ASP:Menu displayed as bullet lists ( ul ), not table s. You should have CSS that affects ul , which overrides the expected menu design.