Additional Images are Overlapping

[dat311]

Hi all,

Can someone please help me figure out why my additional images are overlapping?

I have been trying to fix this for hours now. I tried doing what has worked for other posters and it hasn't worked for me. I have played around with the CSS so much that I'm sure something weird is there but I can't figure it out.

Here is my site:
http://lunapetuniadesigns.com/index....&products_id=7

Thanks so very much for any advice!!!

[schoolboy]

Near the bottom of your stylesheet.css file you have a couple of declarations for productAdditional Images that are a dog's breakfast.

If you tidy them up an not try to force widths and positions with inappropriate CSS, you will find it rights itself.

[dat311]

Thanks, Schoolboy!

I removed this:
#productAdditionalImages {
width: 500%
}

And changed this:
#productAdditionalImages {
width: 1000px;
margin-left: 50em;
width: 100px;
margin: 0em 0em 0em 0em;
}

to:

#productAdditionalImages {
width: 625px;
margin-left: 0em;
margin: 0em 0em 0em 0em;
}

And that worked! I knew I had quite mess down there. It probably still isn't perfect but have fixed the overlapping addl images. Thanks!

****

What I originally was trying to do didn't work out though. On the product listings where I have only one additional image, the left margin is still way off. How can I adjust the margins so that the single additional images are all the way to the left underneath the main image?

http://lunapetuniadesigns.com/index....products_id=12

Thanks so much for your time and help

[dat311]

I just went ahead and put one image per row and that allows all the images to be left aligned.

Thanks again!