StaticSelectedStyle for Menu not working in Master page

[Gary]

From: "Gary" <[email protected]>
Subject: StaticSelectedStyle for Menu not working on Master page
Date: Monday, October 27, 2008 11:11 AM

<StaticSelectedStyle Font-Bold="true" ForeColor="White" />

It does partially work. The font is bolded for selected MenuItem but the
color of the font doesn't change. Is some CSS style overriding? How to debug
this?

Thanks

 

[Nathan Sokalski]

What is the generated html? Also, something that often helps me when solving
problems related to CSS is the IE Developer Toolbar:
http://www.microsoft.com/downloads/...-BB3E-2D5E1DB91038&mg_id=10120&displaylang=en

 

[Gary]

Nathan,

Thanks for the tip on the Developer Toolbar. It's going to be a great help.

I sort of solved my problem but still don't fully understand my solution. My
menu was inside a div

<div id="navigation">

<asp:Menu ID="Menu2" runat="server"
DataSourceID="SiteMapDataSource1"
Height="20px" Width="139px" StaticDisplayLevels="2"
StaticSubMenuIndent="">

<StaticSelectedStyle Font-Bold="true" ForeColor="White" />

</asp:Menu>
</div>

and I did have

#navigation a {color: #402640;}

defined in a css file.

I guess the #navigation a {color: #402640;} was being applied after the
<StaticSelectedStyle Font-Bold="true" ForeColor="White" />. I wish it were
the other way around -- shouldn't it be? I removed 'color: #402640;' from
'#navigation a' and the menu worked the way I wanted. Shouldn't
StaticSelectedStyle be applied after anything in the css file? Is there a
good link to a reference of the order that styles are applied?

Thanks

 

[Nathan Sokalski]

I don't know of any good online references for that, but a wonderful (and
cheap) book that contains a good explanation of it is:

O'Reilly CSS Pocket Reference by Eric A. Meyer
http://oreilly.com/catalog/9780596515058/

I have found this book to be very helpful. But here is something to take a
look at. When your code renders the styles from StaticSelectedStyle, where
does it place them? Are they specified in a style="" attribute of an <a> tag
(I am unfamiliar with the Menu control, but since you used #navigation a as
a selector I am assuming the tag you want styled is an <a> tag) or an
ancestor/parent of that <a> tag? If it is a style attribute in the <a> tag
itself, then that will take priority. But if the style attribute is in an
ancestor or parent, the styles from the #navigation a selector will take
priority because they are more specific to the <a> tag. Here is an
undetailed list from highest to lowest priority:

style="" attribute
#navigation a in stylesheet
style="" attribute in parent or ancestor
#navigation

The things to think about that probably will make it clearer are inheritance
and which style specification is most specific to that tag? The style=""
attribute is the most specific, then comes the class="" attribute, then
selectors in the stylesheet, and then inheritance. I'm probably a little
unclear (or possibly in some cases partially inaccurate) on some of this,
but I think you'll understand it if you get the book, and hopefully what I
have said will help you at least a little. Good Luck!