I am actually migrating websites to ASP.NET 4.0, having problems with the new rendering of menu controls. My websites make heavy use of nested menus. Hover effects are used and the layout is defined by a combination of themes and skins with linked CSS.
If I remove the pages controlRenderingCompatibilityVersion attribute, they are no longer rendered as nested tables, but as ul/li Tags. This breaks my layout in many ways. Any recommendations for a migration of a complex ASP.NET menu layout are very welcome.
Edited: Markup and CSS details as response to comment
Relevant section of the skin file
<asp:Menu runat="server" DynamicHorizontalOffset="2" Orientation="Horizontal" SkipLinkText="" StaticPopOutImageUrl="~/App_Images/Themes/arrow_down.gif" DynamicPopOutImageUrl="~/App_Images/Themes/arrow_right.gif"> <StaticMenuItemStyle CssClass="MenuDefaultMenuItemStyle" /> <DynamicMenuItemStyle CssClass="MenuDefaultMenuItemStyle" /> <StaticSelectedStyle CssClass="MenuDefaultSelectedStyle" /> <DynamicSelectedStyle CssClass="MenuDefaultSelectedStyle" /> <StaticHoverStyle CssClass="MenuDefaultHoverStyle" /> <DynamicHoverStyle CssClass="MenuDefaultHoverStyle" /> </asp:Menu> <asp:Menu runat="server" SkinId="MenuVertical" DynamicHorizontalOffset="2" SkipLinkText="" StaticPopOutImageUrl="~/App_Images/Themes/arrow_right.gif" DynamicPopOutImageUrl="~/App_Images/Themes/arrow_right.gif"> <StaticMenuItemStyle CssClass="MenuVerticalMenuItemStyle" /> <DynamicMenuItemStyle CssClass="MenuVerticalMenuItemStyle" /> <StaticSelectedStyle CssClass="MenuVerticalSelectedStyle" /> <DynamicSelectedStyle CssClass="MenuVerticalSelectedStyle" /> <StaticHoverStyle CssClass="MenuVerticalHoverStyle" /> <DynamicHoverStyle CssClass="MenuVerticalHoverStyle" /> </asp:Menu>
Stylesheet
.MenuDefaultMenuItemStyle { background-color: #D5DCE1; color: #234875; padding: 2px; width: 100%; } .MenuDefaultSelectedStyle { background-color: #3C5778; color: #FFFFFF; padding: 2px; width: 100%; } .MenuDefaultHoverStyle { background-color: #666666; color: #FFFFFF; padding: 2px; width: 100%; } .MenuVerticalMenuItemStyle { background-color: #FFFFFF; border: 1px solid #D5DCE1; color: #234875; height: 30px; padding: 2px; width: 100%; } .MenuVerticalSelectedStyle { background-color: #003366; border: 1px solid #D5DCE1; color: #FFFFFF; height: 30px; padding: 2px; width: 100%; } .MenuVerticalHoverStyle { background-color: #EEEEEE; border: 1px solid #000000; color: #234875; height: 30px; padding: 2px; width: 100%; }
If you remove the controlRenderingCompatibilityVersion
attribute from web.config the default mode for menu rendering changes implicitely from Table
to List
. If you still want to have your menu rendered with table tags you need to specify this explicitely in your asp:menu control by adding the RenderingMode
attribute:
<asp:Menu runat="server" RenderingMode="Table" ... > ... </asp:Menu>
(s. also the remarks section here in MSDN: http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.menu.renderingmode.aspx)
I had issues where a published menu rendered oddly. Adding RenderingMode="List" to the menu markup resolved my issues.
<asp:Menu runat="server" RenderingMode="List" ... > ... </asp:Menu>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With