Why are my swatch images overlapping on my product attributes ????

I set up a product so that customoers can pick the images they want to print on coffee mugs. BUT, when the product comes up on the screen after I set the attribute for 2 images per row the pictues are on top of each other.

See (toward the bottom):

http://www.robertocigars.com/index.php?main_page=product_info&cPath=89&products_id=243

I ahve about 5 more stock images to add. Can anyone help figure out why this is doing the overlap?

Couple of things...

Your swatches are 150 pixels wide.

So, in your stylesheet, you need to give relative space to these images.

Around line 500 or so, your stylesheet says:

/*Attributes*/
.attribImg {
	width: 20%;
	margin: 0.3em 0em;
}

What this is doing is taking the AVAILABLE space in your center column (not very much) and dividing 100% of that space by 20% - which results in FIVE equal portions of space.

Now... your center column is about 420 pixels wide, and if you divide that by 5 (20% each) then you get five "positions" that cannot be wider than 84 pixels each (420/5 = 84).

But your swatches are 150px - almost twice as much as 84px.

So you either:

1. Increase the centre column width by changing mainWrapper.
2. Make the swatches NARROWER than 84px
3. Change the declaration:

/*Attributes*/
.attribImg {
	width: 155px;
	margin: 0.3em 0em;
}

OR

/*Attributes*/
.attribImg {
	width: 50%;
	margin: 0.3em 0em;
}

NB:Changing the declaration will have site-wide results...