jQuery Cycle FadeIn/Out issues in IE & Webkit browsers (only on first cycle!)

I'm using the popular plugin on this site:

http://demos.discipleportal.com/MTO/

For some reason in IE 7 & 8, Chrome & Safari, the lower level images are showing through when the images fade in/out on the first cycle round. So you see what's under the next slide as it fades in. Not sure how to fix this.

script:

$('.slideshow').cycle({     
        fx:    'fade', 
        speed:    2500,
        timeout:  6000
    }); 

html:

<div class="slideshow">
<img src="images/p1.jpg" alt="" class="first" /> 
<img src="images/p2.jpg" alt="" height="427" width="329" /> 
<img src="images/p3.jpg" alt="" height="427" width="329" /> 
<img src="images/p4.jpg" alt="" height="427" width="329" /> 
<img src="images/p5.jpg" alt="" height="427" width="329" /> 
<img src="images/p6.jpg" alt="" height="427" width="329" /> 
<img src="images/p7.jpg" alt="" height="427" width="329" /&g开发者_StackOverflow社区t; 
<img src="images/p8.jpg" alt="" height="427" width="329" /> 
<img src="images/p9.jpg" alt="" height="427" width="329" /> 
</div>

css:

.slideshow {
height: 427px;
left: 50px;
position: absolute;
top: 495px;
width: 329px;
z-index: 10;
}

Any help is much appreciated

I have not tested it yet, but you could always add a class of "hide" to the other images and set it to display:none; And then just "flip" classes between "hide" and "show" (or whatever you decide to call them.

I read somewhere to give the container a black background, so I did. That helped me with some pixel issues on IE7. So:

.slideshow {
background-color: #000000;
height: 427px;
left: 50px;
position: absolute;
top: 495px;
width: 329px;
z-index: 10;
}

Can't hurt to try ;)

FIXED ISSUE.

I replaced the minified script with the full version and it solved the problem. Thanks for the help Mikey & Louis.