Amazingly wierd image caption problem

[fife]

Ok im going to try an give as much info as possible.  Im using a plugin called  jcapslide which can be found here

 

http://tympanus.net/codrops/2009/11/23/jcapslide-a-jquery-image-caption-plugin/

 

Its a image caption plugin that is cross browser compatible.  Now each of my images an their info are drawn through a  php query and displayed on the page.  I then use this jcapslide to display extra info.  However!!!!

 

In all versions of IE the plugin works great.  In Google crome it works great.  Now If I refresh my page in google crome each image in the list displays on top of one another, moves out of position and the caption plugin completely stops working as a result.  Here is my code. thanks

 

//first the query to get 6 images
$Fetchactivityq = mysql_query("SELECT name, description, image FROM activities WHERE club ='".$club['club']."' ORDER BY RAND() LIMIT 6 ") or die('activity error');
$activitynum = mysql_num_rows($Fetchactivityq);


//then the loop to display the images

<?php 
$i = 0;
while($row = mysql_fetch_assoc($Fetchactivityq)) { ?>

<li id="capslide_img_cont<?php echo $i;?>" class="ic_container">
       	     
      <img src="/images/icons/activityImage.jpg" id="activityImage" />
      
        <div class="overlay" style="display:none;"></div>
                    <div class="ic_caption">
                        <p class="ic_category"></p>
                        <h3><a href="#"><?php echo $row['name']; ?></a></h3>
                        <p class="ic_text">
                                 <?php echo $row['description'];?>  
                        </p>
                         
                    </div>
      
      
     
      <?php } ?>


// then the code at the bottom of the page for the caption

<script src="/js/capslide/jquery.capSlide.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("[id^='capslide_img_cont']").capslide({
           caption_color	: 'white',
                    caption_bgcolor	: 'black',
                    overlay_bgcolor : 'black',
                    border			: '',
                    showcaption	    : true
    });
});
</script>

 

you also have to include some styles so here are the default styles

.ic_container{
    vertical-align:baseline;
    margin:10px;
    position:relative;
    /*-moz-border-radius:10px;
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;
    -moz-box-shadow: 0 1px 3px #888;
    -webkit-box-shadow: 0 1px 3px #888;*/
}
.overlay{
    opacity:0.3;
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
.ic_caption{
    position:absolute;    
    opacity:0.6;   
    overflow:hidden;
    margin:0px;
    padding:0px;
    left:0px;
    right:0px;
    cursor:default;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
.ic_category{
text-transform:uppercase;
font-size:11px;
letter-spacing:3px;
margin:0px;
}
.ic_caption h3{
    padding:0px 5px 5px 0px;
    margin:0px;
    font-size:14px;
}
.ic_caption h4{
    padding:0px 5px 5px 0px;
    margin:0px;
    font-size:14px !important;
}
.ic_text{
    padding:0px 5px 5px 0px;
    margin:0px;
    text-align:justify;
    font-size:10px;

}

.ic_caption a {
color: rgb(255,204,0);
}

.ic_caption a:hover {
color: rgb(255,204,0);
text-decoration:underline;
}