Probleme mit CSS bei Scrollbar

[webdream]

Hallo zusammen,
ich will ein Scrollbar (horizontal) Script in meine Seite einbauen. Dazu nutze ich die Vorlage von Mootools Scrollbar - BlueAlien Project

Soweit klappt das auch - also ich kann die Bilder darstellen und der Slider läuft auch perfekt.

Jetzt möchte ich aber auch unter dem Bild einen Zweizeiler mitschreiben (kommt aus der DB). Durch den <li> Tag funktioniert das aber irgendwie nicht. Idealerweise könnte ich eine Tabelle, wie unten beschrieben, mit in die Schleife nehmen.

Was muss ich am CSS ändern, damit es klappt - habe schon etliches versucht. Leider zerschiesst mir dann immer der gesamte Slider.

Hier mein Code:

#Im Head
<script type="text/javascript" src="test2/mootools-1.2.2-core-yc.js"></script>
<script type="text/javascript" src="test2/mootools-1.2.2.2-more-yc.js"></script>
<script type="text/javascript" src="test2/ScrollBar.js"></script>
<script type="text/javascript">
	window.addEvent('domready', function() {
	var myProducts = new ScrollBar($('products'), $('bar'), $('knob'), {
		steps: 3400 - 782,
		offset: -1
	});
	
	// Product Cat Links - BlueAlien 070209
	$('cat1').addEvent('click', function(){myProducts.set(0);});
	$('cat2').addEvent('click', function(){myProducts.set(570);});
	$('cat3').addEvent('click', function(){myProducts.set(1140);});
	$('cat4').addEvent('click', function(){myProducts.set(1750);});
	myProducts.set(0);
	});
</script>
<style type="text/css">
<!--
/* -- BlueAlien CSS : 070209 -- */

/* -- Page Layout 
body {padding: 0; font: 1em verdana, arial, sans-serif; font-size: 100%; background-color: #212121; margin: 0;}
h1 {margin-bottom: 2px; }--*/
#content {color:#fff; font-size:12px; margin:10px; padding:10px; }
#content a {color:#eee;}
#container {background:url(media/bg_slider.gif) repeat-x; width: 920px; margin: 1px auto; padding: 0px;}
#footer { margin: 0 auto; color:#999999; font-size:10px; width:920px; padding:100px; text-align:center;}
#footer a {color:#999999; text-decoration:none;}
/* -- Scrollbar --*/
#productBg {background:url(media/bg_slider.gif) no-repeat; height:270px; width:920px;}

#products {overflow: hidden; position: relative; padding: 10px; height: 270px; width: 900px;}
#products ul {position: absolute; list-style: none; overflow: none; white-space: nowrap; padding: 0; margin: 0;}
#products ul li {display: inline;}

#bar {top: -45px; left: 7px; width: 900px; height: 21px; position: relative; background-color: transparent;}
#knob {top: 8px; width: 43px; height: 10px; background: url(media/bg_schieber.gif) no-repeat;}
#bar span {color: #eee; font-size: 80%; cursor: pointer; position: absolute; z-index: 110; top: 3px;}
#bar #cat1 {left: 40px;}
#bar #cat2 {left: 267px;}
#bar #cat3 {left: 456px;}
#bar #cat4 {left: 1220px;}

-->
</style>


# im body
<div id="container">
<!-- BlueAlien MAC layout : 070209 -->
<div id="productBg">
<!-- Products -->
<div id="products">
<ul>
	
<?php

$sql1 = "SELEct from where"; 
$result1 = mysql_query($sql1) OR die(mysql_error()); 
while($row1 = mysql_fetch_assoc($result1))
{
$ProduktID=$row1['ProduktID'];
$ProduktImageName=$row1['ProduktImageName'];
$ProduktImageNameThumb=$row1['ProduktImageNameThumb'];
						
echo "<li><table border=0 width=150 background=media/bg_slider.gif cellspacing=0 cellpadding=0 height=245><tr><td align=left height=180 valign=bottom>";
echo "<a href=produktdetail.php?ProduktID=$ProduktID>";
echo "<img border=0 src=$ProduktImageName></a>";
echo "</td></tr><tr><td valign=top class=carouseltextneu height=65><p align=left><br style=\"line-height:80%\"><b>$ProduktName</b></td></tr></table></div>";
echo "</tr></table>";
echo "</li>";
}
?>
</ul>
</div>  
<div id="bar">
 <div id="knob"></div>
</div>
</div>

Habt Ihr eine Idee? Wie gesagt, <br> funktioniert hier nicht!

Besten Dank!