Hey,
I'm trying to upgrade a website for work and it has a color-specific navigation. This means, each element in the top level is a certain hover color (red, blue, green.. http://www.lakecountyymca.com/) and so is each elements children in the dynamic nav. "Well", I thought, "this looks like a job for DynamicItemTemplate". Place some conditionals in it and call it a day. No, you see, Internet Explorer blatantly decides not to display so much as a spacing difference. Firefox I can get anything and everything to display without issue, IE doesn't even throw an error. Sample code is below, please let me know what the heck is going on at least. I would LOVE an error right about now so I could debug at least.
The static item template works like a charm, the dynamic is the miscreant. This is a usercontrol embedded in a MasterPage.
<table style="text-align: left; width: 750px;" cellpadding="0" cellspacing="0">
<tr>
<td>
<asp:Menu runat="server" ID="nav_menu" CssSelectorClass="mnuMain" DynamicEnableDefaultPopOutImage="False" StaticEnableDefaultPopOutImage="False" Orientation="Horizontal">
<Items>
<asp:MenuItem Text="Central YMCA" ImageUrl="~/images/nav1.gif" navigateURL="FillerURL">
<asp:MenuItem Text="Central YMCA" ImageUrl="~/images/nav1.gif" navigateURL="FillerURL"></asp:MenuItem>
<asp:MenuItem Text="Central YMCA" ImageUrl="~/images/nav1.gif" navigateURL="FillerURL"></asp:MenuItem>
<asp:MenuItem Text="Central YMCA" ImageUrl="~/images/nav1.gif" navigateURL="FillerURL"></asp:MenuItem>
<asp:MenuItem Text="Central YMCA" ImageUrl="~/images/nav1.gif" navigateURL="FillerURL"></asp:MenuItem>
<asp:MenuItem Text="Central YMCA" ImageUrl="~/images/nav1.gif" navigateURL="FillerURL"></asp:MenuItem>
<asp:MenuItem Text="Central YMCA" ImageUrl="~/images/nav1.gif" navigateURL="FillerURL"></asp:MenuItem>
<asp:MenuItem Text="Central YMCA" ImageUrl="~/images/nav1.gif" navigateURL="FillerURL"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="East End YMCA" ImageUrl="~/images/nav2.gif" navigateURL="FillerURL">
<asp:MenuItem Text="East End YMCA" Value="blue" navigateURL="FillerURL"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="West End YMCA" ImageUrl="~/images/nav3.gif" navigateURL="FillerURL"></asp:MenuItem>
<asp:MenuItem Text="Outdoor Family Center" ImageUrl="~/images/nav4.gif" navigateURL="~/article/article_view.aspx?UID=D2B95234-02EE-4EE4-9712-9D72EA462E39"></asp:MenuItem>
<asp:MenuItem Text="Childcare" ImageUrl="~/images/nav5.gif" navigateURL="FillerURL"></asp:MenuItem>
<asp:MenuItem Text="Dream House" ImageUrl="~/images/nav6.gif" navigateURL="FillerURL"></asp:MenuItem>
<asp:MenuItem Text="General Info" ImageUrl="~/images/nav7.gif" navigateURL="FillerURL"></asp:MenuItem>
</Items>
<StaticItemTemplate>
<table style="text-align: left; border: 0px;" cellpadding="0" cellspacing="0">
<tr>
<td><a runat="server" href="<%#container.dataitem.navigateURL%>"><img alt="" runat="server" onmouseover="this.src=this.src.toString().replace('.gif', '_f2.gif');" onmouseout="this.src=this.src.toString().replace('_f2.gif', '.gif');" src="<%#container.dataitem.ImageUrl%>"/></a></td>
</tr>
</table>
</StaticItemTemplate>
<DynamicItemTemplate>
<table style="text-align: left; border: 0px;" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 200px;height: 200px;"><a runat="server" href="<%#container.dataitem.navigateURL%>"><img alt="" runat="server" onmouseover="this.src=this.src.toString().replace('.gif', '_f2.gif');" onmouseout="this.src=this.src.toString().replace('_f2.gif', '.gif');" src="<%#container.dataitem.ImageUrl%>"/></a></td>
</tr>
</table>
</DynamicItemTemplate>
</asp:Menu>
</td>
</tr>
</table>
CSS:
.mnuMain ul.AspNet-Menu /* Tier 1 */
{
width: 100%;
font-family: Arial;
display: block;
font-size: 10pt;
text-align: center;
COLOR: #FFFFFF;
TEXT-DECORATION:none;
white-space: nowrap;
}
.mnuMain ul.AspNet-Menu ul /* Tier 2 */
{
top: 200px;
}
.mnuMain ul.AspNet-Menu ul ul /* Tier 3+ */
{
}
.mnuMain li /* Dynamic and Static Items */
{
}
.mnuMain li:hover, /* Dynamic and Static Hovers */
.mnuMain li.AspNet-Menu-Hover
{
font-size: 10pt;
text-align: center;
COLOR: #414D62;
TEXT-DECORATION:none;
}
/*vvvvvvvvvvvvvvvvvv THESE ARE THE MAIN STYLES THAT ONE SHOULD NEED vvvvvvvvvvvvvvv*/
.mnuMain a, /* Static Items with Children */
.mnuMain li.AspNet-Menu-Leaf a
{
display: block;
white-space: nowrap;S
height: 60px;
text-align: center;
color: #FFFFFF;
font-size: 10pt;
font-weight: bold;
background-color: <%=company_primary_color%>;
text-decoration: none;
} /*Static Items W/O Children*/
.mnuMain li:hover a, /* hovered text */
.mnuMain li:hover span
{
color: #000000;
font-size: 10pt;
font-weight: bold;
background-color: <%=company_secondary_color%>;
text-decoration: none;
}
/*Static Hover style*/
/***************DYNAMIC STYLES****************/
.mnuMain li:hover li a, /* the tier above this one is hovered */
.mnuMain li:hover li span
{
display: block;
width: 150px;
color: #FFFFFF;
font-size: 10pt;
font-weight: bold;
background-color: <%=company_primary_color%>;
text-decoration: none;
}
/*Dynamic Item Style*/
.mnuMain li:hover li:hover a,
.mnuMain li:hover li:hover span
{
color: #000000;
font-size: 10pt;
font-weight: bold;
background-color: <%=company_secondary_color%>;
text-decoration: none;
}
/*Dynamic Hover Style*/
.mnuMain li:hover li:hover li a,
.mnuMain li:hover li:hover li span
{
border: solid 1px #011F34;
display: block;
font-size: 10pt;
text-align: left;
COLOR: #FFFFFF;
background-color: #003A62;
TEXT-DECORATION:none;
}
/*Dynamic Item Style (tier 3+)*/
.mnuMain li:hover li:hover li:hover a,
.mnuMain li:hover li:hover li:hover span
{
display: block;
font-size: 10pt;
text-align: left;
COLOR: #414D62;
background-color: #003A62;
TEXT-DECORATION:none;
}
/*Dynamic Hover Style (3rd tier and up)*/
/*^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
.mnuMain span
{
color: Black;
padding: 4px 2px 4px 8px;
border:1px solid #cccccc;
/* UNKOWN */
}
.mnuMain li.AspNet-Menu-Leaf span
{
background-image: none !important;
}
.mnuMain li.AspNet-Menu-Hover a,
.mnuMain li.AspNet-Menu-Hover span,
/*UNKOWN*/
.mnuMain li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.mnuMain li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
/*UNKOWN*/
.mnuMain li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.mnuMain li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover span
{
border: solid 1px #011F34;
display: block;
font-size: 10pt;
padding: 2px;
text-align: left;
COLOR: #FFFFFF;
background-color: #003A62;
TEXT-DECORATION:none;
}
/*UNKOWN*/
.mnuMain li.AspNet-Menu-Hover li a,
.mnuMain li.AspNet-Menu-Hover li span
{/*UNKNOWN*/}
.mnuMain li.AspNet-Menu-Hover li.AspNet-Menu-Hover li a,
.mnuMain li.AspNet-Menu-Hover li.AspNet-Menu-Hover li span
{/*UNKNOWN*/}
.mnuMain .AspNet-Menu-Selected /* this node is selected */
{
/*NO STYLE*/
}
.mnuMain .AspNet-Menu-ChildSelected /* parent to selected tier node */
{
/*NO STYLE*/
}
.mnuMain .AspNet-Menu-ParentSelected /* child to selected node */
{
/*NO STYLE*/
}