Javascript slideshow verschiebt sich!

[idontcare]

Hey ich habe gerade eine Internetseite für den Informatikunterricht geschrieben.. alles klappt in Chrome perfekt.
Aber in Firefox verschiebt sich die photo slideshow Hier ein Bild: *klick*

im style part könnte ich padding-right hinzufügen dann ist es wieder mittig, aber dann ist es in Chrome verschoben..

Hier mal der js code:

<!-- 

.clear {clear:both;} 


#gallery {position:relative; height: 360px; } 


#gallery a {float:left; position:absolute; } 


#gallery a img {border:none;} 


#gallery a.show {z-index:500;} 


#gallery .caption { 
z-index: 600; 
background-color: #000; 
color: #fff; 
height: 50px; 
width: 100%; 
position: absolute; 
bottom: 0;
margin-left:0px; } 


#gallery .caption .content {margin:5px;} 


#gallery .caption .content h3 {margin:0; padding:0; color:#1DCCEF; } 
--> </style><script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-


1.2.6.min.js"></script><script type="text/javascript"> 
$(document).ready(function() { 


//Execute the slideShow 
slideShow(); 


}); 


function slideShow() { 


//Set the opacity of all images to 0 
$('#gallery a').css({opacity: 0.0}); 


//Get the first image and display it (set it to full opacity) 
$('#gallery a:first').css({opacity: 1.0}); 


//Set the caption background to semi-transparent 
$('#gallery .caption').css({opacity: 0.7}); 


//Resize the width of the caption according to the image width 
$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')}); 


//Get the caption of the first image from REL attribute and display it 
$('#gallery .content').html($('#gallery a:first').find('img').attr('rel')) 
.animate({opacity: 0.7}, 400); 


//Bilderwechsel Zeit 6000 = 6 sekunden 
setInterval('gallery()',6000); 


} 


function gallery() { 


//if no IMGs have the show class, grab the first image 
var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first')); 


//Get next image, if it reached the end of the slideshow, rotate it back to the first image 
var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') 


:current.next()) : $('#gallery a:first')); 


//Get next image caption 
var caption = next.find('img').attr('rel'); 


//Set the fade in effect for the next image, show class has higher z-index 
next.css({opacity: 0.0}) 
.addClass('show') 
.animate({opacity: 1.0}, 1000); 


//Hide the current image 
current.animate({opacity: 0.0}, 1000) 
.removeClass('show'); 


//Set the opacity to 0 and height to 1px 
$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { 


queue:true, duration:300 }); 


//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect 
$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '50px'},500 ); 


//Display the content 
$('#gallery .content').html(caption); 


} 


</script>
<div id="gallery">
<center>automatische slideshow.. einfach warten</center><br>
<center><a class="show"><img title="" alt="Flowing Rock" width="420" height="500" rel=""


src="ss/6.jpg" /><br><br><br>
</a> <a>
<img title="" alt="Grass Blades" width="500" height="400" rel="" 


src="ss/3.jpg" /> 
</a><a>
<img title="" alt="Grass Blades" width="400" height="500" rel=""


src="ss/4.jpg" /> </a>
</a><a>
<img title="" alt="Grass Blades" width="400" height="500" rel=""


src="ss/5.jpg" /> 
</a><a>
<img title="" alt="Grass Blades" width="500" height="400" rel=""


src="ss/2.jpg" /> </a></center>
<div class="content">&nbsp;</div>