fading image slideshow problem

I have a jQuery Slideshow script that i'm using and it's all done in 6 lines.


$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){
$('.fadein :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.fadein');},
3000);
});
</script>


I'm having a problem centering it on my website and keeping the images behind each other every time a picture changes. The CSS uses absolute positioning to hide the images behind each other. The fadeIn part of the CSS uses relative positioning. The CSS for the fading image slideshow is at the end of the css.


.fadein {
position:relative;
width:100%;
height:300px;
background-color:#000;
overflow:hidden
}

.fadein img {
position:relative;
left:300px;
width:auto;
text-align:center;
top:0px;
}


jonathaneiger.com
(http://www.jonathaneiger.com)

Quite obviously, you're not using absolute positioning for the images, like you claim, but relative positioning. Change that in order to keep them behind each other.

As for the centering, get rid of the left:300px for the images, give .fadein a width that reflects its actual pixel width, and give it margin: 0 auto.

Also, this is more of a CSS question. If there are still issues after that, I'm going to move the thread.