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...
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">