[jQuery] Multiple Jqueries, multiple <ul> elements not behaving well

Hi all,

I am attempting to use two different Jquery scripts on my page and
they each have their own <ul> css declarations which I'm having a hard
time getting around. I tried using an iframe to contain the other
elements and while it worked, it was not an elegant approach for what
I ultimately needed to do. I'm not sure exactly what the issue is. The
site with the iframe can be viewed here:

web.me.com/neechi.mosha/R-L

which is how I want it to look. However, when I try to bring the tabs
onto the main page inside the horizontal accordion I get the tabs
appearing below the accordion, looking very strange. This is my code:

<div id="indexmain">
<table cellpadding="0" cellspacing="0" align="left"
height="100%">
<tr height="100%">
<td
height="100%">
<ul>
<li>
<a>
<!--<img src="images/nav-1.gif" style="opacity:
0.45;filter:alpha(opacity=45)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.45;this.filters.alpha.opacity=45" />--
>
<object style="position:absolute;top:
50%;margin-top:-40px;" width="30" height="80">
<param name="movie" value="images/release-
button.swf">
<embed src="images/release-button.swf"
width="30" height="80">
</embed>
</object>
<p>
<ul class="tabs">
<li><a href="#release"><img src="images/release.gif" /></a></
li>
<li><a href="#about"><img src="images/about.gif" /></a></li>
<li><a href="#gallery"><img src="images/gallery.gif" /></a></
li>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://
www.torelease.blogspot.com/" target="_parent"><img src="images/
blog.gif" onmouseover="this.style.opacity=.
75;this.filters.alpha.opacity=75"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"/></a>
<li><a href="#contact"><img src="images/contact.gif" /></a></
li>
</ul>

<div class="tab_container">
<div id="release" class="tab_content">
<img src="images/release-txt.gif" />
<div style="position:absolute;right:0px;bottom:0px;"><img
src="images/dance.gif" /></div>
</div>
<div id="about" class="tab_content">
<!--Content-->
</div>
<div id="gallery" class="tab_content" style="padding-left:
20px;">
<a id="single_1" title="" href="images/photogal/Antonio-
Martorell-b.jpg"><img style="padding:0px;border:1px solid #c7c6c6;"
src="images/photogal/Antonio-Martorell-s.jpg"></
a>&nbsp;&nbsp;&nbsp;&nbsp;
<a id="single_2" title="" href="images/photogal/Boal-
Harvard2-b.jpg"><img style="padding:0px;border:1px solid #c7c6c6;"
src="images/photogal/Boal-Harvard2-s.jpg"></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a id="single_3" title="" href="images/photogal/
ConflictosSocialesdelosAshaninkas-b.jpg"><img style="padding:
0px;border:1px solid #c7c6c6;" src="images/photogal/
ConflictosSocialesdelosAshaninkas-s.jpg"></a><br /><br />
<a id="single_4" title="" href="images/photogal/Milagros-y-
Javier-b.jpg"><img style="padding:0px;border:1px solid #c7c6c6;"
src="images/photogal/Milagros-y-Javier-s.jpg"></
a>&nbsp;&nbsp;&nbsp;&nbsp;
<a id="single_5" title="" href="images/photogal/PedroReyes-
b.jpg"><img style="padding:0px;border:1px solid #c7c6c6;" src="images/
photogal/PedroReyes-s.jpg"></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a id="single_6" title="" href="images/photogal/
Boal_Harvard-b.jpg"><img style="padding:0px;border:1px solid #c7c6c6;"
src="images/photogal/Boal_Harvard-s.jpg"></a>&nbsp;&nbsp;<br /><br />
<a id="single_5" title="" href="images/photogal/PedroReyes-
b.jpg"><img style="padding:0px;border:1px solid #c7c6c6;" src="images/
photogal/PedroReyes-s.jpg"></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a id="single_6" title="" href="images/photogal/
Boal_Harvard-b.jpg"><img style="padding:0px;border:1px solid #c7c6c6;"
src="images/photogal/Boal_Harvard-s.jpg"></a>
</div>
<div id="blog" class="tab_content">
<!--Content-->
</div>
<div id="contact" class="tab_content">
<!--Content-->
</div>
</div>
</p>
</a>
</li>
</ul>
</td>
</tr>
</table>
</div>

Any ideas??