CSS TOOLTIP DOESN'T WORK WITH SLIDER
===

I manage the website for a small college library and am trying to create a bubble tooltip for an images that are part of a slider. Here's the link to the page to show you what I mean:

<http://library.sfc.edu/webvoy3.htm>. If you hover over the first image in the slider, you will see the tooltip stuck in there. There's no JavaScript for this tooltip, only CSS. I got the code from <http://trentrichardson.com/examples/csstooltips/>. 

This is the CSS part of the tooltip:  


        a.tt{
        position:relative;
        z-index:24;
        color:#3CA3FF;
	font-weight:bold;
        text-decoration:none;
        }

        a.tt span{ display: none; }

    
       a.tt:hover{ z-index:25; color: #aaaaff; background:;}
       a.tt:hover span.tooltip{
       display:block;
       position:absolute;

        top:0px; left:0;
	padding: 15px 0 0 0;
	width:200px;
	color: #993300;

        text-align: center;
	filter: alpha(opacity:90);
	KHTMLOpacity: 0.90;
	MozOpacity: 0.90;
	opacity: 0.90;
       }

        a.tt:hover span.top{
	display: block;
	padding: 30px 8px 0;
        background: url(images/bubble.gif) no-repeat top;
	margin-top: 20px;
        }

        a.tt:hover span.middle{ /* different middle bg for stretch */
	display: block;
	padding: 0 8px; 
	background: url(images/bubble_filler.gif) repeat bottom; 

        }

        a.tt:hover span.bottom{
	display: block;
	padding:3px 8px 10px;
	color: #548912;
        background: url(images/bubble.gif) no-repeat bottom;
    }

This is the CSS of the SLIDER

        #slider { width: 450px; position: relative; height:inherit; float:left; padding-right:45px; 
     
        margin-left: 8px; }

        #slider .buttons span {
        display: block;
	width: 38px;
	height: 38px;
	font-size: 0;
	line-height: 0;
	text-indent: -4000px;
	cursor: pointer;
        }

        #slider .buttons span {
	position: absolute;
	top: 32px;
        }

        #slider .buttons .prev {
	left: -5px;
	background: url(images/button-prev.gif) no-repeat 0 0;
        }

        #slider .buttons .next {
	right: 16px;
	background: url(images/button-next.gif) no-repeat 0 0;
	
	
        }

        #slider .holder {
	width: 400px;
	height: 110px;
	position: relative;
	overflow: hidden;
	left:40px;
	margin-right: 5px;
	padding-right: 0px;
	padding-top: 9px;
	background: url(images/back-slider.jpg) no-repeat 0 0;
    }


       #slider .content ul { position:relative; list-style-type:; height:112px; width: 450px;     
       overflow:hidden; padding-right: 10px; padding-top: 5px; }


      #slider .content ul li{ float: left; display: inline; list-style-type: none; margin-left:   
      16px; height:133px; overflow:hidden; width:80px;}


      #slider .content ul li a { display:block; width: 74px; height: 97px; padding-left: 3px;   
      padding-top: 4px;background: url(images/slider-fragment.gif); }

AND THIS IS THE HTML CODE

        <div id="slider">
			    <div class="buttons">
							<span class="prev">prev</span>

							<span class="next">next</span>
          </div>

         <div class="holder">
							<div class="content">

								<ul>

								  <li>
        <a  href="http://library.sfc.edu:7008/vwebv/holdingsInfo?bibId=261454" class="tt"><img   
        src="css/css-eb/images/covers/cover1.png" /><span class="tooltip"><span class="top"></span> 
        <span class="middle">This is my Bubble Tooltip with CSS</span><span class="bottom"></span>
        </span></a> </li>



The problem seems to be the incompatibility the tooltip's CSS with the slider's CSS. 
Any suggestion or advice would be greatly appreciated. 

Alex Kustanovich 
Brooklyn, NY