Need some assistance, small UI kinks

Need some assistance, small UI kinks

<div>To all,</div>
<div> </div>
<div>I am working on a new project and so far everything seems to be working"mostly".</div>
<div>I do have a few kinks I am attempting to work out but am having trouble doing so,</div>
<div>you can see the project:</div>
<div> </div>
<div><a onclick="return top.js.OpenExtLink(window,event,this)" href="http://kennethbice.awardspace.com/test/index.html" target="_blank">http://kennethbice.awardspace.com/test/index.html</a></div>
<div> </div>
<div>You will notice in firefox that when a tab is clicked it drops down while all other tabs</div>
<div>stay in place. In internet explorer6 that is not the case though, I can only get the tabs</div>
<div>on one side to mainttain their position, the tabs to the left of whatever tab is clicked </div>
<div>are covered when the content div slidesDown. I have been trying to achieve the affect</div>
<div>that is working in firefox in internet explorer but have been unsuccessful so far.</div>
<div> </div>
<div>The other issue I am having is that once a tab has been clicked and the content div</div>
<div>slidesDown, if you click any other tab you must double-click it to get that tab to slideDown.</div>
<div>I have been trying to work around that but have been unsuccessful as well.</div>
<div> </div>
<div>I need some fresh insight, thanks to anyone who can give me a bit.</div>
<div> </div>
<div> </div>
<div>The Code:</div>
<div>//////==================================HTML====================================//////</div>
<div>
<div>

<html>
<head>
<title>test 2</title>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="js/brwsrdtct.js"></script>
<script>





$(document).ready(function(){


if(BrowserDetect.browser=="Firefox"){
 $('#placeholder').css('left','390px');
 $('#placeholder').css('position','absolute');
 $('#theMenu').css('position','inherit');
 $('#content').css('position','relative');
 $('#tab').css('position','inherit');
 $('#one').css('marginLeft','0px');
 $('#two').css('marginLeft','23px');
 $('#three').css('marginLeft','72px');
 $('#four').css('marginLeft','119px');
 $('#five').css('marginLeft','165px');
 $('#six').css('marginLeft','209px');












}
if(BrowserDetect.browser=="MSIExplorer"){
 $('#placeholder').css('left','390px');
 $('#one').css('marginLeft','0px');
 $('#two').css('marginLeft','23px');
 $('#three').css('marginLeft','72px');
 $('#four').css('marginLeft','119px');
 $('#five').css('marginLeft','165px');
 $('#six').css('marginLeft','209px');









}


 $("div.content").hide();
 
 //begin double click bug script segments
 
 //$("div.tab").mouseover(focus);
 //focus( function() { alert("Hello"); } )
 //$('#one').hover('focus', function() { alert("Hello"); } );
 //$('#five').hover('focus', function() {$(this).focus();}  );
 /*$("div.tab").mouseover(function() {
 $(this).focus();
 });
 */
 /*
 $("#nav a.daddy").mouseout(function() {
  $(this).find("+ ul").pause(2000).fadeOut("slow");
 });*/
 
 //end double click script segments
 
 selected=0; /*true/false to control slideUp/slideDown*/



















 $('div.tab a').click(function(){
 
  if(selected==0){
   selected=1;
   $('#one').css('zIndex','99');
   $(this).parent().prev().css('zIndex','0');
   $(this).parent().parent().className="theMenu_active";
   $("div.theMenu").children("div.content").slideUp("fast");
   $(this).parent().prev().slideDown("slow");
   
   }
  else if(selected==1){
   selected=0;
   $(this).parent().parent().className="theMenu";
   $(this).parent().prev().slideUp("fast");
   
   }  
  
 return false;
 });
});
</script>
<LINK REL=StyleSheet HREF="css/css.css" TYPE="text/css" MEDIA="screen" />























</head>
<body>
<div id="background"><img border="0" align="left" width="694" height="414" hspace="0" vspace="0" src="img/bg.jpg" /></div>
<div id="placeholder">



<div class="theMenu">
<div class="content">
Imagination is only rivaled by
ignorance... <div align="right" style="padding-right:15px;">Kenneth G. Bice</div>
<div id="bio">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras vitae urna a mauris semper sodales.
Morbi sit amet odio. Maecenas semper odio nec nisl. Suspendisse potenti. In felis. Donec non tellus
non mauris porttitor condimentum. Sed at diam. Morbi dolor mauris, consequat vel, sollicitudin
condimentum, semper dignissim, urna. Nulla in metus sit amet lacus porta vulputate. Aliquam at ipsum.
Aenean velit leo, pharetra sit amet, semper nec, euismod a, arcu. Maecenas euismod fringilla pede.
Vestibulum et pede. Duis in elit at odio faucibus ornare. Cras purus. Nulla venenatis congue ligula.
Nunc nulla libero, condimentum quis, accumsan sit amet, sagittis nec, purus.











Aenean iaculis aliquet augue. Phasellus adipiscing. Sed ut tellus. Etiam porta auctor mauris. Proin
elementum lacus vel turpis. Vestibulum consectetuer dui in arcu. Nam semper ante. Nam ornare massa vitae
sapien. Phasellus non lorem at urna euismod aliquam. Nunc eros velit, congue varius, imperdiet consectetuer,
ullamcorper eget, nulla. Curabitur dapibus mollis turpis. Fusce pellentesque turpis nec quam. Maecenas egestas.
Praesent pulvinar vulputate augue. Etiam dui dolor, dignissim et, aliquet ultricies, dignissim id, nunc.
Vestibulum eget tellus vel velit commodo pretium. Sed interdum leo id nunc. Nam facilisis. Duis id nulla sed
eros sagittis faucibus. Nullam semper auctor neque.
</div>
</div><!-- hidden content-->
<div class="tab" id="one" style="z-index:1;width:26;"><a href="javascript:;">
<img border="0" align="left" width="26" height="16" hspace="0" vspace="0" src="img/bio_tab.gif" /></a></div><!-- tab to show/hide content-->
</div>











<div class="theMenu">
<div class="content">
222222222222222222222222222222
222222222222222222222222222222
222222222222222222222222222222
</div><!-- hidden content-->
<div class="tab" id="two" style="z-index:2;width:52;"><a href="javascript:;">
<img border="0" align="left" width="52" height="16" hspace="0" vspace="0" src="img/portfolio_tab.gif" /></a></div><!-- tab to show/hide content-->
</div>








<div class="theMenu">
<div class="content">
333333333333333333333333333333
333333333333333333333333333333
333333333333333333333333333333
</div><!-- hidden content-->
<div class="tab" id="three" style="z-index:3;width:50;"><a href="javascript:;">
<img border="0" align="left" width="50" height="16" hspace="0" vspace="0" src="img/contact_tab.gif" /></a></div><!-- tab to show/hide content-->
</div>








<div class="theMenu">
<div class="content">
444444444444444444444444444444
444444444444444444444444444444
444444444444444444444444444444
</div><!-- hidden content-->
<div class="tab" id="four" style="z-index:4;width:49;"><a href="javascript:;">
<img border="0" align="left" width="49" height="16" hspace="0" vspace="0" src="img/msgme_tab.gif" /></a></div><!-- tab to show/hide content-->
</div>








<div class="theMenu">
<div class="content">
555555555555555555555555555555
555555555555555555555555555555
555555555555555555555555555555
</div><!-- hidden content-->
<div class="tab" id="five" style="z-index:5;width:47;"><a href="javascript:;">
<img border="0" align="left" width="47" height="16" hspace="0" vspace="0" src="img/addme_tab.gif" /></a></div><!-- tab to show/hide content-->
</div>








<div class="theMenu">
<div class="content">
666666666666666666666666666666
666666666666666666666666666666
666666666666666666666666666666
</div><!-- hidden content-->
<div class="tab" id="six" style="z-index:6;width:73;"><a href="javascript:;">
<img border="0" align="left" width="73" height="16" hspace="0" vspace="0" src="img/picsnvids_tab.gif" /></a></div><!-- tab to show/hide content-->
</div>








</div><!-- placeholder-->


</body>
</html>

</div>
<div>//////==================================HTML====================================//////</div>
<div>//////==================================CSS  ====================================//////</div>
<div>

body{
}


a:link{color:#FFFFFF;}


#background{
position:absolute;
top:0px;
left:165px;
width:694px;
height:414px;
}







#placeholder{
position:absolute;
top:313px;
width:275px;




}



.theMenu{
position:absolute;
width:275px;



}



.content{
background-color:#7d7d7d;
position:relative;
width:275px;
height:250px;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
padding-top:20px;
padding-left:5px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#ffffff;
font-size:10px;













}


.tab{
position:inherit;
}



#bio{
height:215px;
margin-top:10px;
overflow:auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#ffffff;
font-size:10px;
}







</div>
<div>//////==================================CSS  ====================================//////</div></div>