Carousel stacks images: Webkit, Chrome, Safari only?

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.

Up vote 1 down vote favorite share g+ share fb share tw.

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: right; margin-right: 10px; } css safari webkit link|improve this question edited Dec 19 '11 at 9:53BoltClock's a Unicorn?101k14145377 asked Jan 19 '11 at 2:00wilwaldon12113 55% accept rate.

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.

I added a definite width to the . Panel class of 140px; and it stopped them from stacking. Thanks for the help Justin!

– wilwaldon Jan 19 '11 at 3:16 Glad I could help. – JustinM Jun 8 '11 at 13:43.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.