Carousel stacks images: Webkit, Chrome, Safari only

http://174.120.239.48/~peakperf/?page_id=260

If you view that page with a webkit browser, Chrome/Safari you will see that the carousels contents get layered on top of one another.

If you view it in Mozilla or IE the contents display properly.

I've never had a bug like this in webkit so it's all new to me.

Any help would be appreciated.

Thanks!

CSS:

.theme-twentycarousels {
    width: 610px;
}

.scrollertitle p{
    margin: 0;
    padding: 0;
}
.scrollertitle h2{
    padding-left: 10px;
    padding-top: 10px;
    text-transform:uppercase;
    font-size: 15px;
    font-weight: bold;
}
.scrollertitle .arrow-right {
    width:12px;
    float:right;
    height: 37px;
}

 .scrollertitle .arrow-left {
    width:12px;
    height:37px;
    float:left;

}

.scrollertitle .arrow-left a {
    margin:-20px 0 0 0;
    width:12px;
    height:37px;
    background:url(img/arrow_left.png) top left no-repeat;
    display:block;

}

.scrollertitle .arrow-right a {
    margin:-20px 0 0 0;
    width:12px;
    height:37px;
    background:url(img/arrow_right.png) top right no-repeat;
    display:block;
}

.theme-twentycarousels .hide { display:none; }

.theme-twentycarousels .stepcarousel {
    position: relative; /* Leave this value alone */
    overflow: scroll; /* Leave this value alone */
    height: 155px;
    background:#EEEFF4;
    width: 610px;

}

.theme-twentycarousels .stepcarousel .belt{
    position: absolute; /* Leave this value alone */
    left: 0;
    top: 0;
    margin: 0px;

}

.theme-twentycarousels .stepcarousel .panel {
    height:100px;
    float: left; /* Leave this value alone */
    padding:10px;
    background:#EEEFF4;
    display:block;
    width: auto;
}

.theme-twentycarousels .stepcarousel .panel .panel-text {
    font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
    color:#FFF;
}

.wp_carousel_twentycarousels_pagination {
    padding:5px 10px;
    background:#000;
    text-align:center;
    visibility:hidden;
}
.scrollertitle{
    height: 37px;
    background: url(img/scrollertitle.jpg) no-repeat;
    width: 610px;
}
.arrowcontainer{
    width: 50px;
    height: 37px;
    float: righ开发者_如何学编程t;
    margin-right: 10px;
}

For some reason, your divs holding the images, the ones with the class=panel, have inline styles when I look at them in the inspector in Chrome.

style="float: none; position: absolute; left: 0px;"

Removing that from all of those particular divs stopped them from piling up on top of each other -- but, they didn't fit all in a row anymore.

I also noticed that you have

.theme-twentycarousels .stepcarousel .panel

at two places in your stylesheet. Not sure if that's causing any problems.