jQuery sidebar css problem

[Snitz]

Hello,

I'm using a jquery sidebar that loads an embed flash mp3 player. The problem is, even though all dimensions are set correctly, the flash file won't load inside the slidebar when it opens, instead will load beneath it. (view screenshot below)

This is the css

#samisideBar2{z-index:999;position: fixed;width: 35px;height: 300px;bottom: 30px;left:-7px;background-image:url(../images/background.gif);background-position:top left;background-repeat:repeat-y;}
#samisideBar2 form{z-index:999;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}
#samisideBar2 a{z-index:999;color:#ccc}
#samisideBar2 fieldset{z-index:999;padding:5px;margin:10px 20px;border:none;}
#samisideBar2 ul{z-index:999;margin:0px 20px;}
#samisideBar2 label{z-index:999;color: #fff;}
#sideBarTab2{z-index:999;float:left;height:137px;width:28px;}
#sideBarTab2 img{z-index:999;border:0px solid #FFFFFF;}
#sideBarContents{z-index:999;overflow:hidden !important;}	
#sideBarContentsInner{z-index:999;width:600px;}

This is side-bar.js

var isExtended = 0;

//window.addEvent('load', function(){init()});

function samislide(){

			if(isExtended == 0){

				var src = jQuery("#sideBarTab2 img").attr("src").replace(".gif", "-active.gif");



				jQuery("#sideBarTab2 img").attr("src",src);

				jQuery("#samisideBar2").animate({ "width" : "600px", "heigth" : "300px" }, 1200);

				jQuery("#sideBarContents").animate({ "width" : "600px", "heigth" : "300px" }, 1200);

				isExtended = 1;

			}else{

				var src = jQuery("#sideBarTab2 img").attr("src").replace("-active.gif", ".gif");



				jQuery("#sideBarTab2 img").attr("src",src);

				jQuery("#samisideBar2").animate({ "width" : "35px", "heigth" : "137px" }, 1200);

				jQuery("#sideBarContents").animate({ "width" : "0", "heigth" : "0" }, 1200);

				isExtended = 0;

			}

	}

And this is the code where the flash file should be loaded.

<div id="samisideBar2">
	<a id="sideBarTab2" onclick="samislide();"><img src="<?php echo JURI::base().'modules/mod_samilogin2/'; ?>images/slide-button.gif" alt="sideBar" title="sideBar" /></a>
	
	<div id="sideBarContents" style="width:0px;">
		<div id="sideBarContentsInner">

		<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,40,0' width=500 height=300 >
	<param name=allowFullScreen value='true' />
	<param name=FlashVars value="pathToFiles=&settingsPath=http://localhost/r1/index.php?option=com_jxtcalbumplayer%26format=raw%26cmd=cfg%26ref=OTF8aHR0cDovL2xvY2FsaG9zdC9yMS8=%26rnd=8819&xmlPath=http://localhost/r1/index.php?option=com_jxtcalbumplayer%26format=raw%26cmd=xml%26ref=OTF8aHR0cDovL2xvY2FsaG9zdC9yMS8=%26rnd=4476&stageW=500&stageH=300"/> 
	<param name=movie value="http://localhost/r1/modules/mod_jxtc_albumplayer/FlashMP3.swf">
	<embed src="http://localhost/r1/modules/mod_jxtc_albumplayer/FlashMP3.swf"
		width=500
		height=600
		allowfullscreen='true' 
		flashvars="pathToFiles=&settingsPath=http://localhost/r1/index.php?option=com_jxtcalbumplayer%26format=raw%26cmd=cfg%26ref=OTF8aHR0cDovL2xvY2FsaG9zdC9yMS8=%26rnd=8819&xmlPath=http://localhost/r1/index.php?option=com_jxtcalbumplayer%26format=raw%26cmd=xml%26ref=OTF8aHR0cDovL2xvY2FsaG9zdC9yMS8=%26rnd=4476&stageW=500&stageH=300"
		align='center' 
		type='application/x-shockwave-flash'
		pluginspage='http://www.macromedia.com/go/getflashplayer'>
	</embed>
</object>

</div></div></div>

Thank you in advance.

[AndrewGSW]

How do we get to the page of concern?

The embed/object are contained within a div of 0 width?

<div id="sideBarContents" style="width:0px;">

Is this correct?