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.
