Page 250 static over styles

kiwibrit · March 26th, 2010, 05:57 PM

Referring closely to the book, I have been working up a site with a vertical menu - and text-only buttons - no images or background color for the static menu.

Master page:

Code:

<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" StaticEnableDefaultPopOutImage="False">
                <StaticMenuItemStyle CssClass="StaticMenuItemStyle" />
                <StaticHoverStyle CssClass="StaticHoverStyle" />
            </asp:Menu>
                    <asp:SiteMapDataSource ID="SiteMapDataSource1" ShowStartingNode="False" runat="server" />

CSS

Code:

.StaticHoverStyle
{
    /* Defines the look of active and hover menu items */
    color:Blue;
    background-color:#3a3a3a;
}

There is a change to the expected background color when hovering. BUT the color of the font does NOT change. Any suggestions as to why not?

Imar · March 26th, 2010, 06:10 PM

Maybe some other rule is more specific? Consider this:

#MainMenu a
{
color: red;
}

.StaticHoverStyle{
color: green;
}

In this case, the rule from #MainMenu a is said to be more specific as it contains an ID and a tag selector (101), instead of just a class selector (10). This means the former rule wins.

Possible ways to fix:

1. Make the other rule less specific

2. Make the hover rule more specific (maybe use .MainMenu .StaticHoverStyle, provided you assigned a class name of MainMenu to the Menu control)

3. Add: !important to the property value:

color: green !important;

You can read more about specificity here:

http://htmldog.com/guides/cssadvanced/specificity/

Hope this helps,

Imar

kiwibrit · March 26th, 2010, 08:03 PM

Thanks, Imar. Following on from your post this has done the trick:

Code:

<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" StaticEnableDefaultPopOutImage="False" CssClass="MainMenu">
              <StaticSelectedStyle CssClass="StaticSelectedStyle" />
            </asp:Menu>

with CSS

Code:

.MainMenu a, .MainMenu a:visited
{
color: red;
}
        
.MainMenu a:hover
{
color:green;
 background-color:#3a3a3a;
}    

.StaticSelectedStyle{
color: Blue !important;
background-color: Fuchsia;
}

Interesting HTML dog article.

kiwibrit · March 27th, 2010, 04:35 AM

For those who may have come across this is a search, in the end, for the effect I actually wanted, this did for me:

Code:

.MainMenu 
{
margin:5px 5px;
}
        
 .StaticMenuItemStyle, .StaticMenuItemStyle a, .StaticMenuItemStyle a:visited
 {
   color:White;
   padding:4px 4px;
 }      
 
.StaticHoverStyle
{
    background-color:#AFAFAF;
}

.StaticSelectedStyle
{
    background-color: #404040;
}

Had I wanted a different selected text color, !important after the color property would have been needed.