Even though this thread is a couple of months old, I hope somebody can help me figure this one out:

I'm fairly proficient with CSSing and I nailed down the design for the menu but its not being rendered right in Mozilla. Attached are the screenshots. Its driving me nuts. I've tried padding, margins, positioning it right, left... nothing works. All menu items are crammed together in Mozilla.

Here's the code I use for default.css (not overriden by my skin.css since there's nothing declared in skin.css for those classes):

.MainMenu_MenuContainer {
    background-color: transparent;
}
.MainMenu_MenuBar {
    height:16px;
    background-color: Transparent;
}
.MainMenu_MenuItem {
    margin-right:10px;
    cursor: pointer;
    color:#FFFFFF;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
    font-weight:bold;   
    text-transform: lowercase;
    background-color: Transparent;
}
.MainMenu_MenuIcon {
    display: none;
}
.MainMenu_SubMenu {
    z-index: 1000;
    margin-top:1px;   
    background-color:#7F8400;
    cursor: pointer;
}
.MainMenu_MenuBreak {
    display:none;
}
.MainMenu_MenuItemSel {
    margin-right:10px;
    cursor: pointer;
    color:#FFFFFF;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    text-transform: lowercase;
    background-color:#C8CF68;   
}
.MainMenu_MenuArrow {
    display:none;
}
.MainMenu_RootMenuArrow {
    display:none;
}