ASP.NET 4.0 Rendering problems with the menu control after removing of controlRenderingCompatibilityVersion="3.5"

Question

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

Solution 1

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)

Solution 2

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>

Comments

[Tim Trout]

I have the same problem on a fairly simple menu. The CSS background-color seems to be ignored for menu elements that have children, and my padding (I have Horizontal orientation set) is also being ignored for elements on the main menu except for between the first two.

[synhershko]

Does this happen also for .net 3.5 when this attribute is removed? if not, then .net 4.0 may be taking a different (healthier) approach to HTML/CSS. As a general rule, do not trust ASP.NET on generating your markup. Assume full control over it, and know your way around it. If you could just rewrite what you have as a simple XHTML/CSS, I'd recommend this path instead of hacking .net controls.

[Dirk Brockhaus]

@synhershko: What do you mean with "Does this also happen for .net 3.5?" In .net 3.5 this attribute is senseless and doesn't exist! Hacking .net controls is nobody’s intent here. Tim and I followed yesterdays best practices (Built your design using themes, skins and CSS). There should be an easy migration path to nowadays best practices.

[synhershko]

I wasn't familiar with this attribute, so I figured I'd ask this in a comment. Regarding an easy migration path - well, it usually doesn't exist in the ASP.net world. WebForms are so non-standard and producing such an ugly markup (at least in 2.0 which I'm more familiar with), I'd be surprised if you find an easy way to do this.

[ACP]

could you post the mark up of your menu with controlRenderingCompatibilityVersion attribute set and also the css..