"Grid" layout problem

I assume this is a "Grid" issue.

Problem
Old cart= 1.2.6 http://www.sonofthepharaoh.com/estoreonline

This is the layout I'm after - the category images are equal on the rows.
There are two images on the bottom row, no problem, maybe I'll add another category.

New cart 1.3.7 http://www.sonofthepharaoh.com/Demo

This is my test installation
This is the broken layout. The images on the main page are ALWAYS one less than demanded by \configuration\maximum values, and the leftover amount is placed singly in the row below - it's awful.

IE if the maximum value is 4 - the cart displays 3 categories in the row with one category alone in the next row down.
3 - the cart displays 2
2 - the cart displays 1

if the maximum value is set to 1 - the images center on the page.

I have tried searching the forums for solutions using the terms "category rows", and "Columns per row" and have tried EVERY solution suggested in EVERY thread as a result of those searches. I have resized images back and forth and then to default while changing all the other parameters to no avail. This process has taken the better part of two weeks to go through. I understand there is a "Grid" module of some sort but I'd rather not complicate matters further unless it's a bulletproof solution to this issue that won't generate three more issues that require four more settings to be changed in five more hidden settings locations. If you know what I mean.

Does anyone have any further suggestions?

Took me a minute to figure out the problem but now I see it: It looks like you're supposed to have four images in each row but it wraps around to a new row after the third image. Then a new row starts with three images and the fourth wraps around... And I guess the same happens if you try to put two or three images per row. Ouch!

The only things I can suggest is checking the image sizes vs. that set up in Admin (don't think that's it, tho) and making sure you don't have excessive padding, margins, or horizontal spacing set in your css. The vertical spacing is different, too, so that might point you somewhere.

Maybe someone else will have other ideas.

Jim

I think "excessive padding, margins, or horizontal spacing set in your css" is the most likely cause of this problem. It is also possible that the code is making each of four items take 25% of the theoretical available space, and the slightest encroachment is leaving not enough room for all four to display on the line - so the fourth drops down. I have seen this issue discussed here before, but don't recall where offhand.

So first use FF web developer or simply view source to find all possible classes/IDs etc (even a or img or something) that are called in the relevant part of the page, and check the stylesheet to make sure none of them has any (horizontal) margins or padding or even borders.
You might try giving an appropriate class a negative 5px margin (making it take less space than it is supposed to) and see if that changes anything.

The problem:

/list box contents/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
margin: 1em 1em ;
float: left;

The solution:

/list box contents/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
margin: 1em 0em;
}

Thanks to all that answered. And special thanks to the makers of "Winmerge". Available at fine stores everywhere.

Glad everything worked out.

It looks like the links you gave in the original post aren't working anymore! Do you have a new link so we can see the final result?

Jim