Oh, yes...tried lots of stuff.
Of course, that's not to say there might not be something obvious that I'm missing. I've done lots of custom DNN skinning but usually I either static code a custom menu, or use one of the menu modules. This just seems like something so simple that the solpart menu should be able to do it. Plus, it's working in Netscape and Firefox.
I've got a horizontal menu layout and the code you pasted in there applies, on the horizontal layout, to the separators between categories at the root.
I tend to think that, when I'm using an image as the background like I'm doing, perhaps IE has trouble rendering the borders between the submenu items. I get that feeling because it's easy to make this work when I don't us an image as the background, and because I'm not finding any examples of solpartmenu in usage with an image background used in this way.
Here's the css code I'm using:
.MainMenu_MenuContainer {
width:100%;
background: url(/portals/9/spacer.gif);
height: 24px;
}
.MainMenu_MenuBar {
cursor: hand;
background-color: Transparent;
}
.MainMenu_MenuItem {
color: black;
cursor: hand;
font: lighter 10px Verdana;
background-color: transparent;
BORDER: #FFFFFF 0px solid;
}
.MainMenu_MenuIcon {
BORDER-RIGHT: #F2F3F5 0px solid;
BORDER-TOP: #F2F3F5 0px solid;
BORDER-LEFT: #F2F3F5 1px solid;
BORDER-BOTTOM: #F2F3F5 0px solid;
background: url(/portals/9/skins/KJSKIN/submenubg.gif);
cursor: hand;
text-align: center;
width: 5px;
height: 24px;
}
.MainMenu_SubMenu {
z-index: 1000;
cursor: hand;
font: lighter 10px Verdana;
background: url(/portals/9/skins/KJSKIN/submenubg.gif);
BORDER-RIGHT: #C6C5C5 1px solid;
BORDER-TOP: #E1E0E0 1px solid;
BORDER-LEFT: #E1E0E0 1px solid;
BORDER-BOTTOM: #C6C5C5 1px solid;
}
.MainMenu_MenuBreak {
height: 1px;
BORDER-TOP: #F2F3F5 0px solid;
BORDER-BOTTOM: #F2F3F5 0px solid;
background-color: transparent;
}
.MainMenu_MenuItemSel {
color: black;
background-color: transparent;
cursor: hand;
font: lighter 10px Verdana;
BORDER: #FFF 0px solid;
}
.MainMenu_MenuArrow {
border-right: #F2F3F5 1px solid;
border-bottom: #F2F3F5 0px solid;
border-top: #A2A3A3 0px solid;
font: lighter 10px Verdana;
cursor: hand;
padding-left: 10px;
}
.MainMenu_RootMenuArrow {
font-family: lighter 10pt webdings;
cursor: hand;
padding-left: 5px;
}
.MM_Sel {
color: purple;
background: url(/portals/9/skins/KJSKIN/submenubg.gif);
height: 24px;
}
.MM_Sub {
color: black;
height: 24px;
font-weight:bold;
}
Here's the skin object with its attributes:
<
dnn:MENU runat="server" id="dnnMENU" rootmenuitemactivecssclass="MM_Sel" submenuitemactivecssclass="MM_Sub" menualignment="center" Separator="<img src="separator.gif" border=0 />" />