I'm working on a custom skin using DNNMenu instead of SolPartMenu for some vertical navigation. I'm trying to use CSS to control all of my navigation elements, but the one element that I can't get to function is the separator graphic. I was using this line in my .ascx code, which correctly inserted the graphic but resulted in all kinds of alignment problems between the graphic and the menu items:

SeparatorHTML="<img src=&quot;images/leftNavSep.gif&quot;>"

Following pg. 14 in the DotNetNuke Navigation WebControls document, I have this in my .ascx file:

            <dnn:NAV runat="server" id="dnnNAV"
            CssClass="leftNav"
            ProviderName="DNNMenuNavigationProvider"
            CSSContainerRoot="menucontainercssclass"
            CSSControl="menubarcssclass"
            CSSNode="menuitemcssclass"
            CSSNodeRoot="rootmenuitemcssclass"
            CSSBreadCrumbRoot="breadcrumbrootcssclass"
            CSSBreadCrumbSub="breadcrumbsubcssclass"
            CSSNodeSelectedRoot="rootmenuitemactivecssclass"
            CSSNodeHoverRoot="rootmenuitemselectedcssclass"
            CSSNodeSelectedSub="selectedsubmenucssclass"
            CSSNodeHoverSub="hoversubmenucssclass"
            CSSContainerSub="submenucssclass" 
            CSSSeparator="rootmenuseparatorcssclass" />

Everything is working, including the CSS, except for the CSSSeparator. Here's the CSS I have for that:

.leftPane .rootmenuseparatorcssclass {display:block; background-image:url(images/leftNavSep.gif); height:17px;}

The graphic URL path is working, I've checked that. When I view the source code of the page, it doesn't even look like my custom "rootmenuseparatorcssclass" is being put in there.

Any idea where I'm going wrong? Unfortunately this site is still on a local server so I can't post a URL or anything, sorry.

I am having the same issue, I've tried both the seperatorHTML and CSSSeparator approaches. Does anyone have any sample code for putting image separators between menu items?

you guy can ignore my above comment since I had find the way, you just add the style in you rootitemof the menu, for example:

.main_dnnmenu_rootitem  { /*TD if menu option for using tables is on*/
    cursor: pointer;
    cursor: hand;
    color: #345A98;
    font: 18px Arial;
    text-decoration: none;
   font-weight: bold;
   text-transform: uppercase;
   background-color: Transparent;
    white-space: nowrap;  /*Word wrapping menu item now optional*/    
    padding: 0px 12px 0px 5px;   /*explicitly set padding for root menu items*/
    margin-left:10px;
    border-right: 2px solid #fff;/* What I need exactly */
}

Ultimate Blogging Module for DotNetNuke Platform
The professional provider of DotNetNuke support, skin design and custom module development.