Hi all,

I've setup my solpartmenu so each root item has a fixed size and background image. When you click on an item it changes its background image.

I thought i'd sorted it until i clicked on a submenu item.  The root menu item for that submenu item changes width, cutting off the edge of the background image. Heres my css code:

/** SolPartMenu CSS **/
.MainMenu_MenuContainer{ background-color: transparent; float:left; }
.MainMenu_MenuBar { cursor: pointer; height: 25px; }
.MainMenu_MenuItem {
    cursor: pointer;
    color: white;
    font-family: Arial, Helvetica;
    font-size: 12px;
    /*font-weight: bold;*/
    font-style: normal;
    border: none;   
    padding: 2px 4px 2px 4px; }
.MainMenu_MenuItemSel {
    font-family: Arial, Helvetica;
    font-size: 12px;
    font-weight: bold;
    font-style: normal;
    /*background-color: #254C83; /* The selected colour of each item */   
    border: none;
    color: White;
    padding: 2px 4px 2px 4px; }
.MainMenu_RootMenuItem  {
    background-color: Transparent;
    background-image: url(../Images/menuUp.png);
    background-repeat: no-repeat;}
.MainMenu_RootMenuItem td { width:90px; text-align:center; } /* Sets width of all root menu items */
.MainMenu_RootMenuItemSel  {
    width:90px;
    background-color: #254C83;
    font-weight:bold;
    background-color: Transparent;
    background-image: url(../Images/menuDown.png);
    background-repeat: no-repeat; }
.MainMenu_RootMenuItemActive  {
    color: #2A7DA0;
    background-color: Transparent;
    background-image: url(../Images/menuActive.png);
    background-repeat: no-repeat; }
.MainMenu_RootMenuItemBreadcrumb {}
.MainMenu_RootMenuArrow { display: none; }
.MainMenu_SubMenu { background-color: #5F9AB8; color: #254C83; border: none; background-image: none; }
.MainMenu_SubMenuItem { padding: 2px 4px 2px 4px; background-image: none; }
.MainMenu_SubMenuItemSel { background-color: #254C83; }
.MainMenu_SubMenuItemSelected { background-color: #254C83; }
.MainMenu_MenuArrow { display: none; }
.MainMenu_MenuBreak { background-color: Transparent; border: none; }
.MainMenu_MenuIcon { display: none; }

Heres the paramters used with the menu:

<dnn:SOLPARTMENU runat="server" ID="dnnSOLPARTMENU"
userootbreadcrumbarrow="false"
usearrows="false" moveable="false"
MenuEffectsMouseOverExpand="true" Display="horizontal"
FontBold="true" ControlAlignment="right"
rootmenuitemcssclass="MainMenu_RootMenuItem"
rootmenuitemselectedcssclass="MainMenu_RootMenuItemSel"
rootmenuitemactivecssclass="MainMenu_RootMenuItemActive"
rootmenuitembreadcrumbcssclass="MainMenu_RootMenuItemBreadcrumb"
submenuitemcssclass="MainMenu_SubMenuItem"
submenuitemselectedcssclass="MainMenu_SubMenuItemSel"                                                                                                        
submenuitembreadcrumbcssclass="MainMenu_SubMenuItemBreadcrumb"                                                                                        submenuitemactivecssclass="MainMenu_SubMenuItemActive"                                                                                                                                   
separator=""/>

Any ideas?

...Now i find that out, just as i get it close to how i wanted.  Thanks for letting me know anyway

Nevermind figured out the padding bit seconds after i posted.  Need a .NavMenu_MenuItem td {} class.  As for the width of each item i still can't figure that out yet.

EDIT:

Well nearly there.  Seems the NAV bar is just as buggy and strange as the solpart menu.  Got the root items width set correctly in ie but not ff.

EDIT #2:

Ok figured it out needed: span { display:inline-block; }

.NavMenu