Hello all,

I am trying to build a list of items using the jQuery UI slider. However, trying to style it how I want is proving impossible. Hopefully some of the gurus here can point me in the right direction?

Here is an example of the problem. As the slider handle goes right, both the graphic AND the text below should disappear. However, the text part (within a <p> element) still shows:

I have tried setting different z-index properties on the text class but to no avail. And here is the relevant CSS:

1. /* Slide Section: START */
   
   #who-frame >div.who { padding: 10px !important; }
           .scroll-pane { overflow: auto; width: 99%; float:left; }
           .scroll-content { width: 1464px; float: left; }
           .scroll-content-item { width: 100px; height: 100px; float: left; margin: 10px; font-size: 3em; line-height: 96px; text-align: center; }
           * html .scroll-content-item { display: inline; } /* IE6 float double margin bug */
           .scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; }
           .scroll-bar-wrap .ui-slider { padding-top: 1px; margin-left: auto; margin-bottom: 0; margin-right: auto; margin-top: -20px; background: none; border:0; height: 16px;  }
           .scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 20px; height: 100%; margin: 0 auto; }
           .scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; }
           .scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; }
   
   .porttext { visibility: hide; position: absolute; float: left; font-style: normal; font-weight: normal; text-align: left; font-family: Georgia, "Times New Roman", Times, serif; line-height: normal; display: block; margin-left: 5px; margin-bottom: 0px; margin-right: 0px; margin-top: 30px; z-index: 1; padding: 0px; width: 100px; font-size: 10px; color: white; }
           
   /* Slide Section: END */
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

Any help/pointers appreciated...