Attribute Image Stacking not Laid Out Properly

I am adding some items to my store that require me to add on attributes.
I am getting the hang of this pretty well, but one thing seems to be ruining the layout of the product pages: The images.
I have the images of the prints that I am using set to 125 x 125, and they are displaying nicely, but they are stacked one on top of the other.
I followed the directions for the attribute layout to make the name, selector, and image do what I wished, but the stacking instead of placing the option in a grid is making the page look all funky.
I have not made any of the items live yet, other than the one included here for anyone that can help me with the layout issue to see.
Optimally I would like to be able to grid the images for the patterns so that the page is not unmanageably long and the layout is more appealing.
I thought that I checked everything properly so that the attribute items would be laid out properly, but I am wrong, missing something or this is doing to me what the specials and the featured items did to me on my home page before requesting assistance in this forum. (http://www.zen-cart.com/forum/showthread.php?t=160987)

Thank you,
Jeff
Site: https://www.oaktreeseed.com
Zen Cart: v1.3.9b (Clean install, no upgrade, only template added.)
Host: GoDaddy.com, Premium, Distributed Hsoting
Addons: No addons other than what came out of the box (GoDaddy) and the EZPopulate that I am asking about
Customization: Nothing more than the template, some box sizing, and standard changes for esthetics.
Started: Immediately following the installation of EZ Populate v1.2.5.4

Could you let us know which product has the attributes ?

Sorry, my oversight.
http://oaktreeseed.com/index.php?main_page=product_info&cPath=65&products_id=402
Thanks,
Jeff

OK, I guess a follow up that is related to this debacle that I am finding myself in.
I changed some of the setting sin the way that the attribute images are being displayed. I am working the images so that they are much smaller in size (125 x 125), and this is compromising the images for the fabrics that will be posted.
I was wondering:

1. Can I get three images across on the attribute display?
2. Is there a way to wither thumbnail the images or link them to lager images so the customer can see what the print looks like rather than the small highly distorted images presently used?
3. Currently the two columns of images that I have (Of the 125 x 125) images are overlapping on the first column. I don’t know if this is from the size, a setting, or something else that I am not following properly.

I purchased the Zen Cart Manual, and it seems that this is just making my foray into setting this site up even more complex and complicated.

Thanks in advance for any help that anyone may be able to provide.

Jeff

First thing I'd do is switch temporarily back to the Classic template and see how it looks there. Could be a template thing.

It looks like the attribute images per row is set in **Admin - Catalog - Option Name Manager **- click on the Option Name for settings.

I did as requested, no reall change, other than the template colors, layout, etc. (Not layout that I am looking for that is.)
The changes in Admin -> Catalog -> Option Name Manager, allow em ot change the number, but the layout is still not right.
I iwll leave as is for the time being so that you can see. http://oaktreeseed.com/index.php?main_page=product_info&cPath=65&products_id=402
I guess I am going to have to make the images smaller and see if that changes the layout to a better look.
Thanks,
Jeff

If you want three across, this makes it look OK to me:

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

Four across, try 25%.

What file and location would I edit to make this change?
Jeff

Any time you see a suggestion that looks like .someThing {what: ever;}, it is a CSS style rule and goes in your stylesheet. You can either put new rules at the bottom of your stylesheet, or near to or replacing a rule that applies to the same page area/element, whichever makes more sense to you.

In this case, I just edited the existing rule.

I created a similar post yesterday, which I've re-directed to here as it seems Jeff and I have the same issue. My test site is:

http://cityspacesydney.com.au/TJOnline/index.php?main_page=product_info&cPath=18&products_id=82

I have another complication in that my custom template doesn't recognise the rows, but I'm sure that is unrelated -- so I'll deal with that one. However, when I use the classic template my issue matches Jeff's.

I wasn't sure whether this line in the css was actually being read, so I tested.

.attribImg {
text-align: center; . . .

.attribImg {
text-align: left; . . .

and it did change the layout, however, the original suggestion

"{width:25%; margin: 0.3em 0 0 0;}"

did nothing. I also changed to more columns, fewer columns, higher and lower percentages, and no impact.

Any other ideas?

Thanks Sean

P.S. Jeff have you had any success?

Hard to say without seeing the site in the Classic template. Otherwise, we're trying to solve two related problems at once.

Your images are probably too big to display more than two across. If you can go back to Classic and set them to two across in Optiions Manager, we can take a look.

Another suggestion: set your font size in the body rule back to 62.5%, or at least something smaller than 100%. It's way too big now.

Looks like you have the images set for four across, but they're too big to fit inside the center column. You'll have to create images that are the proper size, depending on how wide your mainWrapper is going to be.

My test file is: https://www.cityspacesydney.com.au/TJOnline/

And it IS set to a classic template.

I've tried small images and large, but even though the tex goes across the entire width of the window, the attributes are layered. I also tried just two images and they still layer.

I think this is the same issue as Jeff is having, and I'm 99% confident that it is not image size. Is there a place though where I can choose to display the image (regardless of what I upload) in a certain size? That would be helpful if there was.

Thanks, Sean

Your attribute images are simply far too big to fit more than one to a row. Are you expecting them to shrink to fit the space available? The images will not be any better quality if you upload large ones and shrink them at display time; in fact, that will degrade the image quality. Best to upload the images at exactly the pixel size you want them to display.

Glenn,

OK I made them quite small and they did not overlap, so you are correct, but interestingly when I tried to squeeze too many on a row, they didn't overlap, they wrapped. Ah . . . I get that my images were too wide. I can now squeeze five, but not six 80*80 pixel images across my display area, so my screen must be close to 425 pixels wide. How come though when I tried two images to a row, did my 320 pixel images not just wrap to a single column? What is the difference? Why did the big images overlap or stack, while these little ones wrap????

Any ideas? Is there some other spot that is controlling max width or gutters between images, that I'm not thinking about?

Also in the Option Name Manager, I've fiddled with image size and max. length, and whether I move them up or down, there seems to be no impact. What are these fields controlling?

Cheers, Sean