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> <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> <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> <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> <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> <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> <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> <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??