[jquery] problema compatibilità IE6

[Oscurodrago]

ciao a tutti

ho fatto questo script con jquery funziona con firefox proprio come volevo ma con IE6 il risultato è piu strano che altro....
il box è traslato rispetto alla posizione ed è come se i caratteri ritagliano il background O.o
questa è la pagina con lo slideshow http://www.nihills.net/od/site/slide.php

sapreste dirmi come posso aggiustare questo errore?
grazie in anticipo

riporto il codice javascript e css

$(document).ready(function() {
	slideShow(4000);
});

function slideShow(speed) {
	$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-captionbg"></div><div class="slideshow-caption-container"><h3></h3>

</p></div>');
	$('ul.slideshow li').css({opacity: 0.0});
	$('ul.slideshow li:first').css({opacity: 1.0});
	$('#slideshow-caption h3').html("<span class=ico-" + $('ul.slideshow a:first').find('img').attr('rel') + "> </span>" + $('ul.slideshow a:first').find('img').attr('title'));
	$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));
	$('#slideshow-caption').css({opacity: 1.0, bottom:0});
	$('.slideshow-captionbg').css({opacity: 0.7, bottom:0});
	var timer = setInterval('gallery()',speed);
	$('ul.slideshow').hover(
		function () {
			clearInterval(timer);	
		}, 	
		function () {
			timer = setInterval('gallery()',speed);			
		}
	);
	
}

function gallery() {
	var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));
	var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));
	var title = "<span class=ico-" + next.find('img').attr('rel') + "> </span>" + next.find('img').attr('title');	
	var desc = next.find('img').attr('alt');	

	next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
	$('#slideshow-caption').animate({bottom:-170}, 300, function () {
			$('#slideshow-caption h3').html(title);
			$('#slideshow-caption p').html(desc);				
			$('#slideshow-caption').animate({bottom:0}, 500);	
	});	
	current.animate({opacity: 0.0}, 1000).removeClass('show');
}

il css dello slide è questo

ul.slideshow 			{	list-style:none; width:648px; height:300px; overflow:hidden; position:relative; border:solid 1px #000; margin:0; padding:0;	}	
ul.slideshow li 		{	position:absolute; left:0; right:0;	}
ul.slideshow li.show	{	z-index:150;	}
ul img 					{	border:none;	}
#slideshow-caption		{	width:648px; height:70px; position:absolute; bottom:0; left:0; color:#CCC; z-index:200;	}
#slideshow-caption .slideshow-caption-container {	padding:10px; z-index:300; top:-70px;position:relative; }
#slideshow-caption h3	{	margin:0; padding:0; font-size:14px;	}
#slideshow-caption p	{	margin:3px 0 0 0; padding:0;	}
#slideshow-caption span	{	margin:0 5px 0 0; padding:0; height:10px; width:35px; display:inline-block; border:#000 1px solid; background-color:#00C; }
.slideshow-captionbg	{	width:648px; height:70px; background:#000;  z-index:250;}

[Oscurodrago]

ho risolto riscrivendo tutto il codice