I'm working on a web application that uses ASP.NET 3.5 and C#. Structurally, I have a master page with a menu control on it. The control serves as my navigation, and it gets its items from a SiteMapDataSource control and a corresponding Web.sitemap file.
The problem is that some styles do not render properly when you specify the CssClass property. More specifically, the selected and hover styles don't respond to css styles. Consider the code below:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>A webpage</title>
</head>
<body>
<form id="form1" runat="server">
<div id="page">
<asp:Menu
ID="navMenu"
Orientation="Horizontal"
StaticMenuStyle-CssClass="staticMenu"
StaticMenuItemStyle-CssClass="staticMenuItem"
StaticSelectedStyle-CssClass="staticSelectedItem"
StaticHoverStyle-CssClass="staticHoverItem"
runat="server">
</asp:Menu>
<asp:SiteMapDataSource ID="srcSiteMap" runat="server" ShowStartingNode="false" />
<br />
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Suppose I had a corresponding .css file with the following:
.staticMenuItem { background-color:Red; }
.staticSelectedItem { background-color:Green; }
.staticHoverItem { background-color:Blue; }
What will happen is that my item backgrounds will properly be red, but my selected item will not be green and the item I'm hovering my mouse over will not be blue. This seems true regardless of whether or not I include the style in the head of the master page or in an external file in default theme as specified in the web.config file.
If I specify the styles in the asp.net xml like so:
<asp:Menu
ID="navMenu"
Orientation="Horizontal"
runat="server">
<StaticSelectedStyle
BackColor="Green"
Font-Underline="True"
Font-Bold="True" />
<StaticHoverStyle
BackColor="Gray" />
</asp:Menu>
It appears to work properly in Firefox, but the style is never embedded in the html in Internet Explorer. Odd.
Does anybody have any insight into what is causing this problem and how to neatly work around it? I'm aware I might be able to programmically determine the current page and select the corresponding menu item manually so it receives the proper style class, but before I resort to hacking C# and Javascript together to fix this functionality, I'm open to ideas.