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.
