Here's what works for me in the default skin plus 2 different skins I've designed:
body of html template:
< div class="MainDemoArea" >
< div class="dnnForm" id="tabs-demo" >
< ul class="dnnAdminTabNavNEW" >
< li>
News and Events
< li>
Latest Tweets
< /ul >
< div class="dnnClear" id="NewsandEvents" >
< div class="dnnLeft" >
< h1>Christopher Columbus
< p>Italian navigator, colonizer and explorer whose voyages led to general European awareness of the American continents.
< /div >
< /div >
< div class="dnnClear" id="LatestTweets" >
< div class="dnnLeft" >
< h1>Isaac Newton
< p>English physicist, mathematician, astronomer, natural philosopher, alchemist, and theologian. His law of universal gravitation and three laws of motion laid the groundwork for classical mechanics.
< /div >
< /div >
< /div >
< /div >
< style >
.dnnForm .ui-tabs .ui-tabs-nav li,
ul.dnnAdminTabNavNEW li {
list-style: none;
float: left;
position: relative;
top: 1px;
margin: 0 .2em 1px 0;
border-bottom: 0 !important;
padding: 0;
white-space: nowrap;
height:50px;
}
.dnnForm .ui-tabs .ui-tabs-nav li a,
ul.dnnAdminTabNavNEW li a {
float: left;
padding: .5em 1em;
text-decoration: none;
font-weight: bold;
color: #000000;
text-decoration: none;
display: block;
margin: 0;
letter-spacing: -0.03em;
background: #ffffff;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
text-shadow: 0px 1px 1px #000;
height:37px;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
< /style >
page --> settings --> page header tags:
< script type="text/javascript" >
jQuery(function ($) {
$('#tabs-demo').dnnTabs();
});
jQuery(function ($) {
$('#tabs-demo').dnnTabs({selected: 0});
});
< /script >
Mark