display problems IE6+ nested tabs

the nested column works fine in both chrome and firefox 3 but breaks in IE 6+ i have my code like this

[CODE]

<div id="container-1">

<ul>

<li><a href="#fragment-1"><span>Hindi </span></a></li> <li>

<a href="#fragment-2"><span>English</span></a></li>

</ul> <div id="fragment-1">

<div id="container-2">

<ul>

<li><a href="brtesthin1.html"><span>Section 1a</span></a></li> <li><a href="brtesteng.html"><span>Section 1b</span></a></li>

</ul> <div id="fragment-1a">

</div> <div id="fragment-1b">

</div>

</div>

</div> <div id="fragment-2">

<div id="container-2">

<ul>

<li><a href="braj2.html"><span>Section 1a</span></a></li> <li><a href="brtesteng.html"><span>Section 1b</span></a></li>

</ul> <div id="fragment-1a">

</div> <div id="fragment-1b">

</div>

</div>

</div>

[CODE]

And i have this to set it up

[CODE] <script src="jquery-1.2.6.js" type="text/javascript"></script>

<script src="ui.core.js" type="text/javascript"></script> <script src="ui.tabs.js" type="text/javascript"></script> <script type="text/javascript">

$(function() {

$('#container-1 ul').tabs();

});

</script>

[CODE]

basically i have N no of nested tabs in Hindi Tabs and as well in English Tabs, it works fine in chrome and Firefox but IE6 + fails. it loads properly but i click on Hindi Section 1b nothing opens, same in English Section 1b but ia everything is displayed properly .

any help is widely appreciated

thanks in advance