Sorry... another question about the [NAV] menu... (.xml and .css code snippets at the bottom of post)
Neither the Hover nor Selected classes were being applied to the Root menu nodes... even though they were working fine on the Sub Nodes...
So I tried adding a ":hover" class to the .css file... this now works great in Safari and Chrome...
but IE 7 and IE 8 change the background, but they also lose the text formatting. It reverts to plain black left-aligned text
Firefox does not pick up any of the hover changes at all.
I've tried adding the specific Node values in the xml and creating the corresponding .css entries (i.e. "CSSNodeRoot," "CSSNodeSub," etc...), but this has no effect.
I've also tried adding the text formatting pieces explicitly to the hover classes, but this also has no effect.
As always... if anyone can provide any insight whatsoever, I'm extremely grateful... such a stupidly easy thing becomes ridiculous with DNN... I just don't get what I'm doing wrong. Thanks a lot,
*frustrated*
here is my skin.xml file:
<Object>
<Token>[NAV]</Token>
<Settings>
<Setting>
<Name>ControlAlignment</Name>
<Value>Justify</Value>
</Setting>
<Setting>
<Name>CSSControl</Name>
<Value>MenuBar</Value>
</Setting>
<Setting>
<Name>CSSNode</Name>
<Value>MainMenu</Value>
</Setting>
<Setting>
<Name>CSSNodeHover</Name>
<Value>MainMenuHover</Value>
</Setting>
<Setting>
<Name>CSSNodeSelected</Name>
<Value>MainMenuSelected</Value>
</Setting>
<Setting>
<Name>CSSIcon</Name>
<Value>MainMenu_MenuIcon</Value>
</Setting>
</Settings>
</Object>
and here is my stylesheet:
.MainMenu,
.MainMenu_Hover,
.MainMenu:hover,
.MainMenu_Selected
{
height:50px;
font-family:Trebuchet MS;
color:White;
font-weight:bold;
font-size:11pt;
text-align:center;
cursor:pointer;
}
.MainMenu
{
background:url('images/Menu_On.gif') repeat-x center left;
}
.MainMenu:hover,
.MainMenuHover,
.MainMenuSelected
{
background: url('images/Menu_Off.gif') repeat-x top left;
height:50px;
}