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

[agentx]

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.p...roducts_id=243

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

[schoolboy]

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...