CSS Image Become Stack Each Other

Question

I want to ask about CSS that cause my image stacking each other.

I can't give the fiddle because too many code and css, but I give my web page in here

As You can see there are thumb image for the slideshow, but they stacking each other. I have try to use margin or padding for the img, but nothing happened, except if I change the size of image to 100, it will run nomrally. I've try to change position to absolute, relative, etc, but the image being worst, full stacking.

So what must I do to create this image not stacking each other? Sorry for my bad English.

Answer 1

From what I can see, you are setting each parent element to have a width of 69px, whilst each child image is 180px wide. This will cause overlapping, as the size of the image does not affect it's parent size.

applying these rule fixed the problem for me:

.es-carousel ul{
    width: auto;
}
.es-carousel ul li {
    width: 180px;
}

ensure you remove the 'width:69px' from each li element, too.