http://layer5.medialayer.net/~shaydoro/

I'm in the very beginning stages of putting together a site for a basketball player, and I have a slideshow with headlines/photos on the front page that uses jQuery (a process that makes javascript really easy to use). The only problem is that as the first photo fades out and the next one fades in, the divs underneath the headlines box keep moving.

I'm honestly not sure if it has to do with something I've specified in the js code, or with the styling...I've tried setting fixed heights for the slideshow sd_slide0, etc., divs, but to no avail.

I just need the slideshow to be enclosed in a box that DOESN'T move. I'm sure there's something simple I'm overlooking here.

Any ideas? I really need to figure this out!

"the divs underneath the headlines box keep moving"
what'a that mean exactly?

do this code work for you?

the html code:
------------------------------------------------------------
<div id="imgs" style="display:none">
<img src="../uploadimage/117464293723222275.jpg" />
<img src="../uploadimage/117464492814584465.jpg" />
<img src="../uploadimage/117465078560327384.jpg" />
</div>
<img id="slide"></img>
------------------------------------------------------------

the javascript code(base jQuery):
------------------------------------------------------------
function play(){
var imgs = $("#imgs").children();
$("#slide").hide().css({width:'200px',height:'200p x'}).attr('src',$(imgs.get(index)).attr("src")).fa deIn('4');
index ++ ;//global variable
if(index >= imgs .length) index = 0;
setTimeout('play()',4000);
}
$(play);