I am facing an issue with setting the title in tabs, as the title is appearing behind the background. If I set background: transparent; in the #tabss .ui-tabs-nav class, then my title shows up properly. Otherwise, it gets displayed behind the background.
Here is the CSS code:
#tabss {
padding: 0px;
background: none;
border-width: 0px;
position: relative;
width:100%;
height:100%;
zoom:1;
}
#tabss .ui-tabs-nav {
background: url("img/top-bg-column.gif") repeat;
border:0px;
//background: transparent;
text-align: right;
zoom:2;
height:30px;
border-radius: 4px 4px 0px 0px;
}
#tabss .ui-tabs-nav li { display: inline-block; float: none; border-color:#dfdfdf; position: relative; top: 1px; margin: 1px 0 0 0; white-space: nowrap; }
#tabss .ui-tabs-nav li a { color:#222; background: url("img/top-bg-column-hover.gif"); font-weight:normal; padding:2px 10px 4px 10px; }
#tabss .ui-tabs-nav li a:hover { color:#666; background:#f7f7f7; }
#tabss .ui-tabs-nav li.ui-tabs-selected a { background:#f7f7f7; color:#666; }
#tabss .ui-tabs-nav li.ui-tabs-selected { top:3px; }
#tabss .ui-tab-title { position: absolute; left: 0px; top: 0px; font-size:18px; color:red; zoom:3; }
#tabss .ui-tabs-panel {
background-color:#f7f7f7;
border-color:#dfdfdf;
border-width: 0px 1px 1px 1px;
-moz-border-radius: 0px 0px 4px 4px;
-webkit-border-radius: 0px 0px 4px 4px;
border-radius: 0px 0px 4px 4px;
padding: 10px;
}
And here is the HTML code:
<div id="tabss" class="tabs">
<p class="ui-tab-title">My Title</p>
<ul>
<li><a href="#tabs-1">Tab 1</a></li>-->
<li><a href="#tabs-2">Tab 2</a></li>
</ul>
<div id="tabs-1">
// data
</div>
<div id="tabs-2">
// data
</div>
</div>