Well, it can't work because nowhere in your HTML is a class named
"tabs-container2". The plugin itself (older versions) adds the class
"tabs-container" to the tab panels - that's why you're not seeing it
in the initial HTML and why that width is applied to both tab sets.
You can see that class though if you use Firebug to inspect the
(altered) HTML source.
Try using the already existing ids to apply styles by context:
#container-1 .tabs-container {
width: 636px;
}
#container2 .tabs-container {
width: 100px;
}
Or, even less, just apply the width to the outer containers and simply
let the content inside expand:
#container-1 {
width: 636px;
}
#container2 {
width: 100px;
}
The special fix for IE doesn't work with background-color:
transparent, thus you can as well remove it. I also recommend to
remove inline styles...
--Klaus
On 9 Dez., 14:18, toopix <[EMAIL PROTECTED]> wrote:
> 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
