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. 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 what is causing this... I spent several hours yesterday trying different things through trial error, like adjusting the padding, margins, etc. It's as if between the photo fades, the container div that houses the slideshow is collapsing, or having to reload entirely. 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!

Here's the CSS styling:

---------------------------

.feature_article {
width:511px;
background: transparent;
color:#333;
height:200px;
}

ul.slideshow {
margin-left:0;
width:313px;
}

.slideshow li {
display:inline;
padding:0;
margin:0;
}

.slideshow img{
display:none;

}

.feature_image {
float:left;
padding:6px;
height:165px;
}

.feature_image img{
padding:6px;
border:1px solid #ccc;
}

#feature_article_content {
clear:both;
}

ul.paginate {
margin-left:0;
}

.paginate li {
display:inline;
background-color:#C5EAF8;
margin: 1px;
padding:.5em;
}

.paginate li a{
color: #00BFF3;
}

#rightbox {
width:519px;
margin-top:10px;
float:right;
color: #333;
background-color: #fff;
border:1px solid #6DCFF6;
}

#secondary {
width:519px;
color: #fff;
background: url(images/article_background2.gif) no-repeat;
}

#newsdivider {
clear:both;
width:519px;
height:34px;
background: #323232 url(images/newsdivider.gif) no-repeat;
}

#js_headlines {
width:519px;
background: url(images/greystuff.jpg);
margin-top:34px;
}
----------

Thanks so much!!

My guess is that there is a slight period during which there is no content on the page as the content starts to disappear on the one hand and starts to appear on the other hand, which causes the jump, but I haven't been able to make it work either.

Maybe try the JQuery discussion list?

Edit: my theory is likely incorrect as, from looking at the source, the fade in is a callback that should only be executed after the fade out. I still can't find the reason why it jumps.