Hi

I am currently working on a DNN menu. I have nearly got it looking how i want it except I can not get the outer cell for the ROOT MENU SEPARATOR to the same color as the other parts of the menu. This is what i mean...See the I for the separator is not level with the other menu items.

Here is my css. It is really mess any suggestions on how to clean it up would be great. It has been a trial and error thing so far, hopefully next time it will be a bit easier. I need some in depth documentation so i can understand what is going on.

.MainMenu_MenuContainer {
    background-color: #666666;
}


.MainMenu_MenuBar {
    cursor: pointer;
    cursor: pointer;
    background-color: #666666;
}
 
/*main menu text */
.MainMenu_MenuItem
{
    border: 0;
    /*border-left: #00ff33 0px solid;
    border-bottom: #00ff33 0px solid;
    border-top: #00ff33 0px solid;
    border-right: #00ff33 0px solid;*/
    cursor: pointer;
    cursor: hand;
    color: #FFFFFF;
    font-size: 8pt;
    font-weight: normal;
    font-style: normal;
    background-color: transparent;
    font-family: Tahoma, Arial, Helvetica;
    height: 18px;
}
/* Roll over for the Menu Selection*/
.MainMenu_MenuItemSel {
  background-color: transparent;
    background-color: #6699CC;
    cursor: pointer;
    cursor: hand;
    color: white;
    font-family: Tahoma, Arial, Helvetica;
    font-size: 8pt;
    font-weight: normal;
    font-style: normal;
    height: 18px;
}

/* The icon for the menu button */
.MainMenu_MenuIcon {

    background-color: #666666;
    border-left: #00ff33 0px solid;
    border-bottom: #00ff33 0px solid;
    border-top: #cad5ea 0px solid;
    cursor: pointer;

    text-align: center;
    width: 5px;
    height: 16px;
}

.MainMenu_Separator
{
    background-color: #666666;
    color: #FFFFFF;
    font-size: 8pt;
    font-family: Tahoma, Arial, Helvetica;
    height: 16px;
}


/* The sub menu for the main menu, text */
.MainMenu_SubMenu {
/*cad5ea */
  /*background-color: #008AE6;*/
    background-color: #666666;
   
    z-index: 1000;
    cursor: pointer;
    /*cursor: hand;*/
    filter:progid:DXImageTransform.Microsoft.Shadow(color='#696969', Direction=135, Strength=3);
}
.MainMenu_MenuBreak {
    height: 1px;
}


.rootmenuitemselected, .MainMenu_BreadcrumbActive{
    background-color: #6699CC;
    color: #fff;
}

.SelectedTab {
    color: lightblue;   
    font-size: 8pt;
    font-family: Tahoma, Arial, Helvetica;
    font-decoration: none;
}



/*CSS for the right of the menu */
.MainMenu_MenuArrow {
      color: #666666;
    border-right: #00ff33 0px solid;
    border-bottom: #00ff33  0px solid;
    border-top: #00ff33 0px solid;
    font-family: webdings;
    font-size: 8pt;
    cursor: pointer;
    /*cursor: hand;*/
}

.MainMenu_RootMenuArrow {
    font-family: webdings;
    font-size: 8pt;
    cursor: pointer;
    cursor: hand;
}

Here is my template settings:

<tr><td><table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr bgcolor="#666666" >
        <td >
            <dnn:MENU runat="server" id="dnnMENU" usearrows="false" iconwidth="0" 
                separatorcssclass="MainMenu_Separator"
                rootmenuitemselectedcssclass="rootmenuitemselected"
                separator="|"
                userootbreadcrumbarrow="false"
                 rootmenuitembreadcrumbcssclass="MainMenu_BreadcrumbActive"

            />
        </td>
    </tr>
    </table></td></tr>

I have the same issue if anyone has a solution please email me at jdjohnson12@cableone.net