jQuery Forum

Hi,

I have implemented the kwicks for jquery which works quite well when I have the "sticky" attribute to true.  However, I need to have this turned off so that all the expandable elements are closed on page load.  My problem is, I can't get the elements that activate the expansion all have gaps and I need them to sit side by side without any spacing.  I have tried changing everything to try and remove these gaps ebtwen the elements.  Anyone got any odeas what Im doing wrong?  I based my code on example 7 on this page http://www.jeremymartin.name/projects.php?project=kwicks

 

The code is:

 

.kwicks_container {
 clear:both;
 width: 100%;
 height: 170px;
}

.kwicks { 
   list-style: none; 
   position: relative; 
   margin: 0; 
   padding: 0;
 }
 
.kwicks li {
   float: left;
   width: 129px;
   height: 170px; 
   cursor: pointer;
}

.kwicks .kwicks_inner {
 width: 310px;
}
.kwicks .toggler {
 width:39px;
 float:left;
 height:170px;
 border-left: 5px solid #2279BE; 
}

.kwicks .box {
 display: none;
 width: 255px;
 height:170px;
 float:left;
}
 
.kwicks li.active .box {
 cursor:default;
 display: block;
}

 

            <div class="kwicks_container">
   <ul class="kwicks">
    <li>
     <div class="kwicks_inner_inner">
      <div class="toggler"><img src="images/support_videos.jpg" width="39" height="170" alt="Support Videos" /></div>
      <div class="box support_bg">
       <a href=""><img src="images/spacer.gif" width="255" height="170" /></a> 
      </div>
     </div>
    </li>
    <li>
     <div class="kwicks_inner">
      <div class="toggler"><img src="images/gallery.jpg" width="39" height="170" alt="Gallery" /></div>
      <div class="box gallery_bg">
       <a href=""><img src="images/spacer.gif" width="255" height="170" /></a> 
      </div>
     </div>
    </li>
    <li>
     <div class="kwicks_inner">
      <div class="toggler"><img src="images/creativity.jpg" width="39" height="170" alt="Creativity" /></div>
      <div class="box creativity_bg">
       <a href=""><img src="images/spacer.gif" width="255" height="170" /></a> 
      </div>
     </div>
    </li>
   </ul>
            </div>
   <script type="text/javascript">
    $().ready(function() { 
     $('.kwicks').kwicks({ 
      max: 299, 
      sticky: true,
      event : 'click' 
     }); 
    });
   </script>            
  </div> 
 

 

Many thansk in advance