Hi folks,
first of all I have to say that DNN is the best CMS I've ever used. I'm currently implementing my first skin and now facing a problem I'm unable to solve.
I use a horizontal menu style with submenus. In Opera, Firefox or IE7 it renders very well, but in IE8, there's a huge gap between the menu itself and its submenus. I identified the submenus get placed by a javascript which calculates values for top and left, however, in IE8, the value for top is horribly wrong (1500pixels and more instead of about 150 pixels).
Relevant ascx:
<div class="menuframe">
<dnn:NAV id="dnnNAV" runat="server" controlorientation="Horizontal" csscontrol="mainMenu" indicatechildren="false" providername="DNNMenuNavigationProvider">
<customattributes>
<dnn:CustomAttribute Name="RenderMode" Value="UnorderedList"/>
</customattributes>
</dnn:NAV>
</div>
Relevant CSS:
menuframe {
font: normal 16px Arial, Helvetica, sans-serif;
background: url('images/menu_bg.png') repeat-x;
}
.mainMenu {
margin: 0;
padding: 0;
}
.mainMenu .root.mi a span {
display: table-cell !important;
vertical-align: middle;
height: 40px;
padding: 0 4px 0 4px;
}
.menuframe ul li a {
color: #3c3c3c;
text-decoration: none;
}
.menuframe .m span {
height: auto;
padding: 2px;
}
.menuframe .m {
background-color: #f6a800;
}
.menuframe .m li {
padding: 0 4px 2px 4px;
}
/* menu container css */
.mainMenu {font-family: Verdana, Arial, Helvetica, sans-serif; cursor: pointer; font-size: 15px; /*height: 40px;*/}
/* root menu css */
.mainMenu .root {text-align: center; color: #1c1c1c; /*height: 40px;*/}
/* general submenu css */
.mainMenu .m {width: 160px; font-size: 11px; z-index: 1000; line-height: 2em;}
.mainMenu .m .mi {background-color: #f6a800;}
.mainMenu .m .icn {padding-left: 5px; width: 20px;}
.mainMenu .m .mi .txt {color: #1c1c1c; margin-right: 5px;} /* change * to .txt with latest webcontrols */
.mainMenu .m .sel a, .mainMenu .sel a {
color:#c2c2c2;
}
.mainMenu .m .hov a span {
color:#fff;
}
.m .break .icn {font-size: 1px; height: 1px; } /*ensure that all menu breaks are only 1px high */
and
.menuframe .hov a span, .menuframe .m .hov {
background: url('../images/blue/menu_bg_blue_hov.png') repeat-x left top;
color: #FFF;
}
.mainMenu .hov span, .mainMenu .bc span {background: url(../images/blue/menu_bg_blue_hov.png) repeat-x top left; color:#c2c2c2;}
.mainMenu .m .sel, .mainMenu .m .bc {background: url(../images/blue/menu_bg_blue_hov.png) repeat-x top left; color:#c2c2c2;}
.mainMenu .m .hov, .mainMenu .hov span {background: url(../images/blue/menu_bg_blue_hov.png) repeat-x top left; color: #fff;}
Thank you in Advance.