This has me really stumped. I'm creating a skin in html with css stylesheet and xml. Everything works great except that the mainmenu_itemhover class only works on the root menu, it does not highlight hovered menu items in the submenus. However, if I comment out the menuitemcssclass in the xml (which is the mainmenu_item class in the stylesheet), then all the highlighting works in both root and submenu, they just obviously don't have the styling wanted in the inactive state. I have no clue what is wrong, if it is something with the mainmenu_item class or something else. This is a copy of the menu settings in the stylesheet:


.mainmenu_container {
background-color: transparent;
}
.mainmenu_bar {
cursor: pointer;
cursor: hand;
height:16px;
background-color: Transparent;
}

.mainmenu_item td { /*TD if menu option for using tables is on*/
cursor: pointer;
cursor: hand;
color: #edc97b;
font-size: 10pt;
font-weight: bold;
font-style: normal;
background-color: Transparent;
font-family: Arial, Verdana, sans-serif;
white-space: nowrap; /*Word wrapping menu item now optional*/
padding: 2px 1px 2px 1px;
}

.mainmenu_rootitem { /*TD if menu option for using tables is on*/
cursor: pointer;
cursor: hand;
color: #edc97b;
font-size: 10pt;
font-weight: bold;
font-style: normal;
background-color: Transparent;
font-family: Arial, Verdana, sans-serif;
white-space: nowrap; /*Word wrapping menu item now optional*/
padding: 2px 1px 2px 1px; /*explicitly set padding for root menu items*/
}

.mainmenu_itemhover {
color: #bbc492;
background-color: transparent;
font-size: 10pt;
font-weight: bold;
font-style: normal;
font-family: Arial, Verdana, sans-serif;
white-space: nowrap; /* word wrapping menu item now optional */
padding: 2px 1px 2px 1px; /* explicitly set padding for root menu items */
}

.mainmenu_itemhover td {
color: #bbc492;
background-color: transparent;
font-size: 10pt;
font-weight: bold;
font-style: normal;
font-family: Arial, Verdana, sans-serif;
white-space: nowrap; /* word wrapping menu item now optional */
padding: 2px 1px 2px 1px; /* explicitly set padding for root menu items */
}

.mainmenu_icon {
display: none;
}

.mainmenu_submenu {
background: #6f5c35 url('bg_dark.jpg') repeat scroll left top;
border: solid 2px #82930f;
z-index: 1000;
cursor: pointer;
cursor: hand;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#696969', Direction=135, Strength=3);
padding: 2px 1px 2px 1px; /*explicitly set padding for sub-menus */
}

.mainmenu_break {
height: 1px;
font-size: 1px;
}

.mainmenu_arrow {
display: none;
}

.mainmenu_rootmenuarrow {
display: none;
}

.menu_separator {
padding: 0;
margin: 0;
border: 0;
}



And the xml:



I have tried to reorder the classes in the stylesheet, rename them, reorder them in the xml and rename them in the xml. I tried setting the delayload on and off and deleting the setting altogether. I've tried using different titles for the attributes in the xml - several websites have different attribute names for the xml data and I am not sure what information to use other than the dotnetnuke skinning guide which appears to outdated by a few years and a few version upgrades. I have version 4.5.5 installed and have the same problem on a localhost as well as live test site, in IE7 and FireFox2. Am I using the wrong attributes for the xml? They all seem to work, just not all of them at the same time. If there is a better way to use solpart let me know. I haven't had this problem with the dnnNavigation provider, but was under the impression that it does not handle menu separators.

Thanks,
Rick

---

JOHN GIESY
DotNetNuke Hosting Expert

DotNetNuke 7 Hosting $70 /year
DNN4Less.com Team DotNetNuke  

I did some more tweaking and got everything working properly. But I'm even more stumped and perplexed than before because the solution shouldn't have fixed problem. Basically, I replaced ".mainmenu_menubreak" with these settings: {border:none; height:0px; background-color:Transparent;}, and nothing happened. I left it that way. Then I added "border-right: #f0f0f0 0px solid;" to the mainmenu_bar class. Nothing changed, but I left it that way (I was basically comparing to another stylesheet and changing the differences). Then I added "border-left: #f0f0f0 0px solid; border-bottom: #f0f0f0 0px solid; border-top: #f0f0f0 0px solid; border-right: #f0f0f0 0px solid;" to each of the following: mainmenu_item, mainmenu_rootitem, mainmenu_itemhover, mainmenu_itemhover td. And after all that everything works fine. I'm not sure if it was just the last change, or if it was the last change in combination with one of the first two changes, or all three together that did the trick. I'm not about to change anything at all now that it's working properly. It just seems odd that something like a border setting would affect a mouseover effect, and I've seen menus work without border settings. Any gurus out there have any idea why this fixed the problem with the highlight/selected classes not working in the submenu but worked fine in the root menu? I like to learn from my mistakes, but this has left me more confused than before...

Rick

---

JOHN GIESY
DotNetNuke Hosting Expert

DotNetNuke 7 Hosting $70 /year
DNN4Less.com Team DotNetNuke  

Well, now I am really really stumped.  I made a copy of the skin.  Changed the skin.css and skin.xml back to what I had when the submenu highlight was not working, and I can't reproduce the problem.  Previously I had reparsed the skin, restarted the app, cleared temp files and cache, etc and the problem would not go away.  Now I can't get it to come back, but I suppose that is a good thing.  I just wish I knew what I had done so that I could avoid doing it again...

Thanks for offering your help, though, Jon.  Much appreciated.

Rick

---

JOHN GIESY
DotNetNuke Hosting Expert

DotNetNuke 7 Hosting $70 /year
DNN4Less.com Team DotNetNuke