Javascript Tooltip floating behind object

I'm using Javascript tooltips here and they pop under the video on the right: http://www.stuffit.com/win-home.html (rollover "Escape Email Attachment Limits " for example). I've tried using CSS by doing position: absolute and z-index on both the list and and video but not luck. Any ideas?

 

In which browser do this problems appear ?

 

Firefox, IE6 and IE7

 

That's probably because of the youtube video.

<div style="float:left; width:385px; height:204px; background-image:url(assets/home/home_feat_R.jpg);">
               
<p style="margin:0 0 0 10px; width:310px; font-size: 14px"><object width="225" height="198"><param name="movie" value="http://www.youtube.com/v/WoLCU2m1IuQ?fs=1&amp;hl=en_US&amp;color1=0x006699&amp;color2=0x54abd6&amp;border=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/WoLCU2m1IuQ?fs=1&amp;hl=en_US&amp;color1=0x006699&amp;color2=0x54abd6&amp;border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="225" height="198" wmode="transparent"></embed></object>

</div>

HTML:

wmode="transparent" should solve it.

And set the z-index of your tooltip to 999

 

I've been trying variations of that with Firebug and nothing seems to work. All that happens is the video disappears.
Then I read a bunch of posts on StackOverflow that say to use SWFObject with it.

 

wmode="transparent" doesn't appear in my code. I re-embeded it and still now luck. The tips have been sent to z-index 999. Still no luck any other ideas?


I'll try swfobjects...