Menu control builds and renders differently between environments

Question

I put the following Menu control on my page:

<div class="Phase2MenuContainer">
    <asp:Menu runat="server" ID="mnuHome" Orientation="Vertical"
        StaticMenuStyle-CssClass="Phase2Menu">
        <Items>
            <asp:MenuItem Selectable="true" Text="Download Sketch Sheet" NavigateUrl="~/Documents/Sketch Sheet.pdf" Target="_blank"></asp:MenuItem>
            <asp:MenuItem Selectable="true" Text="Create Data Sheet" NavigateUrl="CreateDataSheet.aspx"></asp:MenuItem>
            <asp:MenuItem Selectable="true" Text="Personalize Data" NavigateUrl="Personalize.aspx" Enabled="false"></asp:MenuItem>
        </Items>
    </asp:Menu>
</div>

When I run this on my localhost, it builds with tables which is fine because I knew this when I wrote my css.

The problem here is that when I copied it to the live environment, it builds with spans and divs, so all my css broke.

Here's the css (the live copy just removes the margin: 5px 0; lines)

.Phase2MenuContainer
{
    width: 250px;
    margin: 15px auto;
}
.Phase2Menu a, .Phase2Menu span a
{
    display: block;
    padding: 10px;
    margin: 5px 0;
    color: #fff;
    height: 30px;
    line-height: 30px;
    width: 200px;
    background: #018CD2;
    border: 1px solid #0159a0;
}
.Phase2Menu a[disabled=true], .Phase2Menu span[disabled=disabled]
{
    display: block;
    padding: 10px;
    margin: 5px 0;
    color: #fff;
    height: 30px;
    line-height: 30px;
    width: 200px;    
    background: #c1c1c1;
    border: 1px solid #0159a0;
}
.Phase2Menu a:not([disabled=true]):hover
{
    background: #3B3486;
}

It took me about half an hour to fix it , but I got it working now (although the live stylesheet is different to my test one).

Can anyone explain to me why the menu built differently between my localhost and the live server? I'm sure this shouldn't actually happen if it's been done correctly...

score 2 · Accepted Answer · answered May 14 '13 at 10:08

2

Set the RenderingMode of Menu To Table..like this. So it will always render your Menu as table...

<asp:Menu runat="server" ID="mnuHome" Orientation="Vertical" RenderingMode="Table"
        StaticMenuStyle-CssClass="Phase2Menu">

answered May 14 '13 at 10:08

Amit Singh

8,039
20
29

awesome tip :) somehow I figured there was an attribute that would do that. Just didn't know what it was – Ortund May 14 '13 at 10:28
@Ortund it defines in rendering mode of your menu item on your browser.....if you set to table than your menu will b render on browser as table always .... – Amit Singh May 14 '13 at 10:29

score 0 · Answer 2 · answered Jul 07 '14 at 05:32

I have faced the same solution two days ago and unfortunately, RenderingMode was not working in my project, because of ASP.NET supported version. Therefore, as a alternative solution, I put menu in div control and set the style sheet as below.

.div br {
    display: none;
}

Hope this may helpful.

Menu control builds and renders differently between environments

2 Answers2