attribute images on same row can't work it out!

[Sushigal]

Hi, you can see here at my site;

http://www.thegreatgiftshop.co.uk/ze...roducts_id=565

the attribute images are on top of eachother, I've set their option in the admin to 5 images per row yet it still wont put them next to eachother. How can I achieve this?

[kobra]

Start by cleaning up the stylesheet.css as you have several conflicting directives for .attribImg

.attribImg {float: right; clear: right; width: 320px;}

.attribImg{
float:right;
padding-right:120px;
padding-left:120px;
}

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
	float: left;
	}


.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
	text-align: center;
	}

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

[Sushigal]

thanks for getting back to me, where you have highlighted in red are those all the parts i should remove? I'm not too sure what to remove and what to keep if you could ellaborate I would really appreciate it.

Thank you

[Sushigal]

ok, i removed;
.attribImg {float: right; clear: right; width: 320px;}



.attribImg{
float:right;
padding-right:120px;
padding-left:120px;
}

and now the images appear to be on the same line but overlapping

i couldnt find;

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

do i need to adjust something here?

[Sushigal]

ah, i think its because the margin is in the way, its squashing the images up, how can I move them down a bit so they come just under their attribute drop down? and also line up to the left so they are aligned with the option names of the drop downs.

[haredo]

Su,
Edit the stylesheet.css

Change this:
.back {
float:left;}

To this:
.back {
}

[Sushigal]

ok done thank you! its put the images next to eachother but now the option names are above their dropdowns and I wanted them level with their atribute values text field or dropdown as they were before, how can i fix this now?