hey lee,

i've got a solpartmenu submenu issue that i cannot solve.  the website i'm building can be viewed here - http://logrhythm.com.dnnmax.com

the menu bar height is set to be 42px, as are the root menu items.  i want the submenu to be flush with the bottom of this bar.  this is no problem in firefox, however in IE there's a pixel gap between the bottom of the bar and the top of the submenu.  when i put a -1px margin-top, the menu jumps and has a pixel overlap.  i've tried using ems, i've tried making the menu bar 41px, i've tried giving the submenu a border-top, i've tried everything i can think of - all to no avail.  no matter what i do, there seems to be a middleground that i just can't reach.

any thoughts on this issue would be much appreciated.  i've scoured the skinning toolkit, but didn't see any mentions of this.  thanks for your help.  jeff

/****************** menu styles *********************/
.MainMenu_MenuContainer {
    border: 0px;
    margin: 0px;
    background-color: transparent;
    padding: 0px;
    padding-bottom: 0px !Important;
    border-bottom: 0px !Important;
    margin-bottom: 0px !Important;
}
.MainMenu_MenuBar {
    cursor: pointer;
    height: 42px;
}
.MainMenu_MenuItem {
    background-color: #fff;
    cursor: pointer;
    color: #000px;
    font-family: Arial, Verdana, sans-serif;
    font-size: 13px;
    font-weight: normal;
    margin: 0px;
    padding: 0 11px 0 1px;
    height: 25px;
    border: 0px;
}
.MainMenu_MenuItemSel {
    background-color: #00a0e2;
    cursor: pointer;
    color: #fff;
    font-family: Arial, Verdana, sans-serif;
    font-size: 13px;
    font-weight: normal;
    margin: 0px;
    padding: 0 11px 0 1px;
    height: 25px;
    border: 0px;
}
.SubMenu, .ModuleTitle_SubMenu {
    background-color: #fff;
    margin: 0px 0 0 0px;
    padding: 0 0 0 0px;
    border: 0px solid #fff;
    position: static;
    z-index: 100px;
}
.MainMenu_MenuIcon {
    background: #fff url('images/arrow_blue.gif') no-repeat center center;
    padding: 0 3px 0 17px;
}
.separatorL {margin: 0px;padding: 0px;border: 0px;width: 0px;}
.separatorR {margin: 0px;padding: 0px;border: 0px;width: 0px;}
.rootmenuitem {   
    background: #848587 url('images/nav_bg.gif') repeat-x top;
    color: #fff;
    font-weight: normal;
    font-size: 18px;
    font-family: Arial, Verdana, sans-serif;
    padding: 0px;
    margin: 0px;
    cursor: pointer;
    display: table-cell;
    width: 10px;
    border: 0px;
    vertical-align: middle;
    height: 42px;
    text-align: left;
}
.rootmenuitemselected {
    background: #848587 url('images/nav_bg.gif') repeat-x top;
    color: #333;
    font-weight: normal;
    font-size: 18px;
    font-family: Arial, Verdana, sans-serif;
    padding: 0px;
    margin: 0px;
    cursor: pointer;
    display: table-cell;
    width: 10px;
    border: 0px;
    vertical-align: middle;
    height: 42px;
    text-align: left;
}
.rootmenuitembreadcrumb {
    background: #848587 url('images/nav_bg.gif') repeat-x top;
    color: #333;
    font-weight: normal;
    font-size: 18px;
    font-family: Arial, Verdana, sans-serif;
    padding: 0px;
    margin: 0px;
    cursor: pointer;
    display: table-cell;
    width: 10px;
    border: 0px;
    vertical-align: middle;
    height: 42px;
    text-align: left;
}
.MainMenu_MenuBreak {
    border-bottom: transparent 0px solid;
    border-left: transparent 0px solid;
    border-top: transparent 0px solid; 
    border-right: transparent 0px solid;
    background-color: transparent;
    height: 0px;
    width: 0px;
}
.MainMenu_MenuArrow {display:none;}
.MainMenu_RootMenuArrow {display: none;}

Hello,

I can't find a quick solution to this. I did some quick experimenting in Firefox to see if the submenu could be moved using absolute or relative positioning, but this had no effect.

The problem is that in IE there is not a decent troubleshooting tool such as the web developers toolbar that is available in Firefox. So, whenever I get problems like this in IE, I literally strip out all of the CSS code and then add it back in one element at a time to see if I can identify where the extra one pixel is coming from.

- This is how I would approach it.

Hope you manage to solve the problem, and the site looks good!

Thanks,

thanks for the quick response. yeah, i also tried using absolute and relative positioning, the solpart is strange mistress. do you think it's the best global nav solution for dnn, or would you recommend another - House Menu, DnnMenu? i've seen you use the house menu for pure css skins.

have you tried the IE developer toolbar? http://www.microsoft.com/downloads/...laylang=en

It's no where near as effective, but seems slightly better than nothing.

Yes the major thing that is missing from it is being able to edit the CSS live.

The menus I tend to opt for are HouseMenu and Snapsis CSSNavMenu - the Snapsis menu is more flexible and easier to configure, so it's worth a look. - Also, subscribers can get a discount here:
snapsis discount

Thanks,