Hi All
I trust that my query will be met by the familiar "faces" of the skinning forum.
- I'm using DNN 4.9.2
- I'm developing a skin using the ascx method
- I'm using predominantly DIV XHTML & CSS markup
- Yes, I do have a DocType
I need to align the dnnNav Menu to the right of my layout, in a tab-style. Works in IE7, FF3.0.7, Chrome, and Opera. But not in IE6, and Safari.
Below, please find relevant html snippet, and css:
HTML:
<div class="dnavmenu_outer">
<div class="dnavmenu_inner">
<div class="dnavmenu_pane">
<dnn:NAV runat="server" id="dnnNAV" providername="DNNMenuNavigationProvider" indicatechildren="False" controlorientation="Horizontal" cssnoderoot="dnavmenu_rootitem" cssnodehoverroot="dnavmenu_rootitem_hover" cssnodeselectedroot="dnavmenu_rootitem_selected" cssbreadcrumbroot="dnavmenu_rootitem_selected" csscontainersub="dnavmenu_submenu" cssnodehoversub="dnavmenu_itemhover" cssnodeselectedsub="dnavmenu_itemselected" csscontainerroot="dnavmenu_container" csscontrol="dnavmenu_bar" cssbreak="dnavmenu_break" cssicon="dnavmenu_icon" />
</div>
</div>
</div>
CSS:
.dnavmenu_outer {
float: right;
padding-left: 5px;
margin: 0px 20px 0px 30px;
background-image: url('images/dnavmenu_l.gif');
background-position: left top;
background-repeat: no-repeat;
}
.dnavmenu_inner {
padding-right: 5px;
background-image: url('images/dnavmenu_r.gif');
background-position: right top;
background-repeat: no-repeat;
}
.dnavmenu_pane {
height: 40px;
background-image: url('images/dnavmenu_m.gif');
background-position: center top;
background-repeat: repeat-x;
}
In IE6, the "outer" div spans the full width of the layout, but keeps its margins.
In Safari, the "outer" div is floated right, but with about 120px of padding / margin somewhere to the right (weird).
Any suggestions on how to do this..? Shout if you require more html / css to work from... I can send files if need be. Don't have live link just yet.
Thanks
Jon