Probleme mit CSS bei Scrollbar

[webdreamer]

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>
                <li><a href="#"><img src="images/pb_airport_express.jpg" border="0" /></a></li>
                <li><a href="#"><img src="images/pb_airport_extreme.jpg" border="0" /></a></li>
                <li><a href="#"><img src="images/pb_timecapsule.jpg" border="0" /></a></li>
                <li><a href="#"><img src="images/pb_keyboards.jpg" border="0" /></a></li>
                <li><a href="#"><img src="images/pb_mighty_mouse.jpg" border="0" /></a></li>
                <li><a href="#"><img src="images/pb_cinema_display.jpg" border="0" /></a></li>
                <li><a href="#"><img src="images/pb_mac_pro.jpg" border="0" /></a></li>
                <li><a href="#"><img src="images/pb_mac_mini.jpg" border="0" /></a></li>
                <li><a href="#"><img src="images/pb_macbook.jpg" border="0" /></a></li>
</ul>
</div>  
<div id="bar">
 <div id="knob"></div>
</div>
</div>

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

Besten Dank!