Horizonta; Accordin jumping & centering

I've been fooling with this all night.. I love the script but its just not working right.
It behaves a little different in MSIE, FF and Chrome, Chrome is the worse IE & FF not pretty either.

In either case I'd like the whole thing centered in the table cell and I would love for the table to stop jumping around. I;m REALLY old school as far as coding and I will confess I just dont grasp the whole floating thing..

http://www.nailtech.com/index.htm <<--this one is live and my preferred layout
http://www.nailtech.com/index2.htm <<--this one doesn't jump around, but I either have to remake all the images wider and or center the images in that cell

Like I said I have been messing with it for almost 2 hours so I might have made things worse here..

thanks!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <link rel="stylesheet" type="text/css" href="http://www.nailtech.com/haccordion.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://www.nailtech.com/haccordion.js"> /*********************************************** * Horizontal Accordion script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more ***********************************************/ </script> <style type="text/css"> /*CSS for example Accordion #hc1*/ #hc1 UL{ position:absolute;left:0px;top:0px; /*Spacing between each LI container*/ } #hc1 li{ margin:0 5px 0 0; /*Spacing between each LI container*/ } #hc1 li .hpanel{ padding: 5px; /*Padding inside each content*/ background: #f3b429; } </style> <script type="text/javascript"> haccordion.setup({ accordionid: 'hc1', //main accordion div id paneldimensions: {peekw:'35px', fullw:'340px', h:'210px'}, selectedli: [0, true], //[selectedli_index, persiststate_bool] collapsecurrent: false //<- No comma following very last setting! }) </script> </head> <body> <div id="hc1" class="haccordion" style="position:relative;left: 100px; top:100px;width:530px;height:210px;border:solid red 1px;"> <ul> <li> <div class="hpanel"> <a target="_blank" href="shoppe/index.php"><img src="http://www.nailtech.com/images/slider_dazzlingglitters.jpg" /></a> </div> </li> <li> <div class="hpanel"> <a target="_blank" href="empower/index.php"> <img src="http://www.nailtech.com/images/slider_empower2.jpg" width="340" height="200" /></a> </div> </li> <li> <div class="hpanel"> <a target="_blank" href="shoppe/index.php"><img src="http://www.nailtech.com/images/slider_postcard1.jpg"></a> </div> </li> <li> <div class="hpanel"> <a target="_blank" href="shoppe/index.php"><img src="http://www.nailtech.com/images/slider_canes3.jpg"></a> </div> </li> <li> <div class="hpanel"> <a target="_blank" href="shoppe/index.php"><img src="http://www.nailtech.com/images/slider_so_easy1.jpg"></a> </div> </li> </ul> </div> </body> </html>

to truly centre

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <link rel="stylesheet" type="text/css" href="http://www.nailtech.com/haccordion.css" /> <style type="text/css"> /*Overall CSS for each Horizontal Accordion. Most settings should be kept as it. Customize each Accordion by styling each Accordion's ID attribute instead. */ .haccordion{ padding: 0; } .haccordion ul{ margin: 0; padding: 0; list-style: none; overflow: hidden; /*leave as is*/ } .haccordion li{ margin: 0; padding: 0; display: block; /*leave as is*/ width: 200px; /*For users with JS disabled: Width of each content*/ height: 200px; /*For users with JS disabled: Height of each content*/ float: left; /*leave as is*/ } .haccordion li .hpanel{ width: 340px; /* the size of the accordian item */ height: 200px; /*For users with JS disabled: Height of each content*/ } /*CSS for example Accordion #hc1*/ #hc1 UL{ position:absolute;left:0px;top:0px; /*Spacing between each LI container*/ } #hc1 li{ height:210px; margin:0 0px 0 0; /*Spacing between each LI container*/ } </style> </head> <body> <input type="button" name="" value="Open 0" onmouseup="zxcAccordionOpen('hc1',0);"/> <input type="button" name="" value="Open 1" onmouseup="zxcAccordionOpen('hc1',1);"/> <input type="button" name="" value="Open 2" onmouseup="zxcAccordionOpen('hc1',2);"/> <input type="button" name="" value="Open 3" onmouseup="zxcAccordionOpen('hc1',3);"/> <input type="button" name="" value="Open 4" onmouseup="zxcAccordionOpen('hc1',4);"/> <input type="button" name="" value="Close" onmouseup="zxcAccordionClose('hc1');"/> <div id="hc1" class="haccordion" style="position:relative;left: 100px; top:100px;width:550px;height:210px;border:solid red 1px;"> <ul> <li> <div class="hpanel"> <a target="_blank" href="shoppe/index.php"> <img src="http://www.nailtech.com/images/slider_dazzlingglitters.jpg" /> </a> </div> </li> <li> <div class="hpanel" style="width:240px;" > <a target="_blank" href="empower/index.php"> <img src="http://www.vicsjavascripts.org.uk/StdImages/2.gif" width="240" height="200" /> </a> </div> </li> <li> <div class="hpanel"> <a target="_blank" href="shoppe/index.php"> <img src="http://www.nailtech.com/images/slider_postcard1.jpg"> </a> </div> </li> <li> <div class="hpanel"> <a target="_blank" href="shoppe/index.php"> <img src="http://www.nailtech.com/images/slider_canes3.jpg"> </a> </div> </li> <li> <div class="hpanel"> <a target="_blank" href="shoppe/index.php"> <img src="http://www.nailtech.com/images/slider_so_easy1.jpg"> </a> </div> </li> </ul> </div> <script type="text/javascript"> // Accordion (08-March-2013); // by Vic Phillips - http://www.vicsjavascripts.org.uk/ function zxcAccordionOpen(id,nu){ var o=zxcAccordion['zxc'+id]; o&&o.ary[nu]?o.open(nu):null; } function zxcAccordionClose(id){ var o=zxcAccordion['zxc'+id]; o?o.close():null; } function zxcAccordion(o){ var id=o.ID,obj=document.getElementById(id),m=o.Mode,oi=o.OpenIndex,psz=o.PeekWidth,ms=o.Speed,days=o.Persistence,t=o.OpenEvent,c=o.CloseEvent,ctr=o.Centre; if (obj&&obj.getElementsByTagName('UL')[0]){ var m=typeof(m)=='string'&&m.charAt(o).toUpperCase()=='V'?['height','offsetHeight','top']:['width','offsetWidth','left'],ul=obj.getElementsByTagName('UL')[0],lis=ul.getElementsByTagName('LI'),days=(typeof(days)=='number'&&days>0)||days=='session'?days:-1,ck=this.getcookie(id),oi=days!=-1&&ck?ck*1:typeof(oi)=='number'&&oi>=0?Math.floor(oi):-1,psz=typeof(psz)=='number'&&psz>5?psz:30,sz,a,ary=[],d,z0=0; for (;z0<lis.length;z0++){ d=lis[z0].getElementsByTagName('DIV')[0]; if (d){ sz=d[m[1]]; a=[lis[z0],d,sz,ary.length!=oi?psz:sz]; lis[z0].style[m[0]]=d.style[m[0]]=a[3]+'px'; d.style.overflow='hidden'; t!==false?this.addevt(lis[z0],t!='click'?'mouseover':'click','open',ary.length):null; ary.push(a); } } c=='mouseout'||c=='click'?this.addevt(c=='click'?document:obj,c,'close'):null; zxcAccordion['zxc'+id]=o=this; o.id=id; o.psz=psz; o.m=m[0]; o.sz=obj[m[1]]; o.ul=ul; o.mde=m; o.ctr=ctr===true; o.ary=ary; o.lst=ary[ary[oi]?oi:0]; o.ms=typeof(ms)=='number'&&ms>20?ms:1000 o.days=days; o.centre(); } } zxcAccordion.prototype={ open:function(nu){ var o=this,a=o.ary[nu]; o.close(); this.animate(a,a[3],a[2],new Date(),o.ms); o.lst=a; o.cookie(nu); return false; }, close:function(){ var o=this; o.animate(o.lst,o.lst[3],o.psz,new Date(),o.ms); o.cookie(-1); }, animate:function(a,f,t,srt,mS){ clearTimeout(a[4]); var o=this,ms=new Date()-srt,n=(t-f)/mS*ms+f; if (isFinite(n)){ a[3]=Math.max(n,0); a[1].style[o.m]=a[0].style[o.m]=a[3]+'px'; o.centre(); } if (ms<mS){ a[4]=setTimeout(function(){ o.animate(a,f,t,srt,mS); },10); } else { a[3]=t; a[1].style[o.m]=a[0].style[o.m]=t+'px'; o.centre(); } }, centre:function(){ var o=this,sz=0,z0=0; for (;z0<o.ary.length;z0++){ sz+=o.ary[z0][3]; } o.ctr?o.ul.style[o.mde[2]]=(o.sz-sz)/2+'px':null; }, addevt:function(o,t,f,p){ var oop=this; if (o.addEventListener){ o.addEventListener(t,function(e){ return oop[f](p);}, false); } else if (o.attachEvent){ o.attachEvent('on'+t,function(e){ return oop[f](p); }); } }, cookie:function(nu){ var o=this; document.cookie=o.id+'='+nu+(typeof(o.days)=='number'?';expires='+(new Date(new Date().getTime()+o.days*86400000).toGMTString())+';path=/;':';'); }, getcookie:function(nme){ var re=new RegExp(nme+'=[^;]+','i'); return document.cookie.match(re)?document.cookie.match(re)[0].split("=")[1]:null; } } new zxcAccordion({ ID:'hc1', // the unique ID name of the parent DIV. (string) Mode:'Horizontal', //(optional) the display type, 'Horizontal' or 'Vertical'. (string, default = 'Horizontal') PeekWidth:30, //(optional) the minimum size of the closed accordian item. (number, default = 30) OpenIndex:0, //(optional) the index number of the initial open accordian item. (number, default = 0) Speed:1000, //(optional) the animation duration in milli seconds. (number, default = 1000) OpenEvent:'mouseover', //(optional) the event type to open an item, 'mouseover' or 'click'. (string, default = 'mouseover') //(optional) false = no event calls to be added. (boolean, default = inline event calls) CloseEvent:'mouseout', //(optional) the event type to open an item, 'mouseout' or 'click'. (string, default = no close event) Persistence:1, //(optional) the number of days to restore the last display. (number, default = -1) //(optional) 'session' = restore the last display for the browser session. (number, default = -1 days) Centre:true //(optional) true = centre the UL in the parent DIV. (boolean, default = no centring) }); </script> </body> </html>