Slideshow position problem

[hannale]

Currently working on a slideshow for this website, and I've used the same code in the past but because I am now working with a wordpress template I'm having some problems.

Link to slideshow

The next image is loading underneath the current image and then moving up, which I need them images to stay in place of course.

<div id="lookbook">
<a href="http://www.axandapple.com/store/?cat=71" target="_self"><ul class="ppt">
	<li><img src="http://axandapple.com/store/wp-content/themes/eCommerce/images/AxAndApple_WitchingHour_Elza-1.jpg" ALT="Ax+Apple Presents The Witching Hour Collection"></li>
	<li><img src="http://axandapple.com/store/wp-content/themes/eCommerce/images/AxAndApple_WitchingHour_Elza-2.jpg" ALT="Ax+Apple Nyx & Orion Necklaces"></li>
	<li><img src="http://axandapple.com/store/wp-content/themes/eCommerce/images/AxAndApple_WitchingHour_Elza-3.jpg" ALT="Ax+Apple Odessa & Oracle Necklaces"></img></li>
	<li><img src="http://axandapple.com/store/wp-content/themes/eCommerce/images/AxAndApple_WitchingHour_Elza-4.jpg" ALT="Ax+Apple Jupiter & Naja Necklaces"></img></li>
	<li><img src="http://axandapple.com/store/wp-content/themes/eCommerce/images/AxAndApple_WitchingHour_Elza-5.jpg" ALT="Ax+Apple Nyx & Orion Necklaces"></img></li>
	<li><img src="http://axandapple.com/store/wp-content/themes/eCommerce/images/AxAndApple_WitchingHour_Elza-6.jpg" ALT="Ax+Apple Odessa & Oracle Necklaces and Snake Charmer Bracelet"></img></li>
	<li><img src="http://axandapple.com/store/wp-content/themes/eCommerce/images/AxAndApple_WitchingHour_Elza-7.jpg" ALT="Ax+Apple Jupiter & Naja Necklaces and Asteria Earrings"></img></li>
</ul></a>

<p style="text-align:center;"><button type="button" id="back">Back</button> 
<button type="button" id="stop">Pause</button> 
<button type="button" id="play">Play</button> 
<button type="button" id="fwd">Forward</button></p>

</div>



<p>2011 Ax+Apple</p>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
$('.ppt li:first').addClass('first');
$('#play').hide();
 
var cur = $('.ppt li:first');
var interval;
 
$('#fwd').click( function() {
	goFwd();
	showPause();
} );
 
$('#back').click( function() {
	goBack();
	showPause();
} );
 
$('#stop').click( function() {
	stop();
	showPlay();
} );
 
$('#play').click( function() {
	start();
	showPause();
} );
 
function goFwd() {
	stop();
	forward();
	start();
}
 
function goBack() {
	stop();
	back();
	start();
}
 
function back() {
	cur.fadeOut( 1000 );
	if ( cur.attr('class') == 'first' )
		cur = $('.ppt li:last');
	else
		cur = cur.prev();
	cur.fadeIn( 1000 );
}
 
function forward() {
	cur.fadeOut( 1000 );
	if ( cur.attr('class') == 'last' )
		cur = $('.ppt li:first');
	else
		cur = cur.next();
	cur.fadeIn( 1000 );
}
 
function showPause() {
	$('#play').hide();
	$('#stop').show();
}
 
function showPlay() {
	$('#stop').hide();
	$('#play').show();
}
 
function start() {
	interval = setInterval( "forward()", 3000 );
}
 
function stop() {
	clearInterval( interval );
}
 
$(function() {
	start();
} );
</script>

#lookbook{
position:relative;
}
ul.ppt{
position:absolute;
height:699px;
}
.ppt li{
list-style-type:none;
position:absolute;
top:0px;
left:0px;
height:699px;
}
.ppt img{
background-color:#FFF;
padding:5px;
top:0px;
position:absolute;
}
#lookbook p{
text-align:center;
z-index:99;
}
#lookbook button{
background-color:#FFF;
border:0;
padding:0 3px 0 3px;
color:#000;
font:12px "Courier", "Courier New", Courier, monospace; 
}