Hi,
I am using JQuery tabs and I have a problem as I want to sets of tabs
on the same page, I need to specify 2 different css styles for the
tabs specifically the container width.
I read a reply by your to a similar issue in google groups but didnt
understand it as im quite new to css and JQuery.
Here is my CSS and script for the 1st set which is working
.tabs-container {
margin-top:0px;
margin-left:2px;
/* declare background color for container to avoid distorted fonts in
IE while fading */
background-color:transparent;
width:636px;
}
<script type="text/javascript">
$(function() {
$('#container-1').tabs();
});
</script>
<div id="container-1">
<ul style="margin-top:167px;">
<li><a href="#fragment-1"><span style="width:55px;"></
span></a></li>
<li><a href="#fragment-2"><span style="width:60px;"></
span></a></li>
</ul>
<div id="fragment-1">
Test
<div>
</div>
Here is my CSS and script for the ndt set which is working
.tabs-container2 {
margin-top:0px;
margin-left:2px;
/* declare background color for container to avoid distorted fonts in
IE while fading */
background-color:transparent;
width:100px;
}
<script type="text/javascript">
$(function() {
$('#container2').tabs();
});
</script>
<div id="container2">
<ul style="margin-top:50px;">
<li><a href="#fragment-1"><span style="width:15px;"></
span></a></li>
<li><a href="#fragment-2"><span style="width:15px;"></
span></a></li>
</ul>
<div id="fragment-1">
Test 2
<div>
</div>
The 2nd tabs take the css defined for the 1st tabs with the contaier
width set to 646 instead of the desired 150px
f you could point out my error or give me an example of how to achieve
this i would be very grateful.
Thanking You
Mike Walshe
