main page categories - v1.5 displays wrong

[gregeverett]

We just upgraded to v1.5 and are using a customized template - everything is fine except the category display at the top of the main page.

Instead of displaying rows of 3 categories, it drops the 3rd category down to the next row, so there are 2, 1, 2, 1, etc.

http://www.catalystathletics.com/store/

We have torn our hair out trying to correct this with no progress at all. Anyone know what's going on? Thanks.

[stevesh]

I'm not seeing the problem described.

[gregeverett]

Shows up on both my comp and phone. Old version displays correctly on both, and the template files are the same.

So we are clear, in the main content area of the page (white bg), the first row of categories w images and links has 2 categories (performance menu journal, articles); the next row has only one category (books). All 3 of these should be in the first row. In other words, that categories section should be displaying as a 3 x 3 grid.

[rstevenson]

I too see the 2, 1, 2, 1, etc. rows. In the code as displayed on that page, I see this for the rows of products...

<div class="categoryListBoxContents" style="width:33%;">

If I change that 33% to 32% (using FireBug in Firefox) the products shift into the required 3 per row. So track down the file which is hard-wiring that style into the code and either edit it to 32% or better yet, get rid of the in-line style altogether and replace it with a proper declaration in your stylesheet.

Rob

[gregeverett]

I'll look into it when I'm back on my computer, but I think that style def is not hard coded, but is taken from the admin settings, which are set now to display a row of three, hence the 33% showing when of view the outputted code. So im sure I could go to the file and hard code it to 32% but I'd rather fix the actual problem if possible. Again, this part of the code wasn't touched between the former installation (v1.3.8 I think) and the current one (v1.5). The old one displayed fine with the same code and admin settings.

[gjh42]

This kind of problem happens when padding or margins are added to the elements. 3 x 33 = 99%, which leaves only a few pixels left over for spacing. If there is more than that, the total adds up to more than 100%, which causes the problem.
stylesheet.css (line 564)

.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, .rightBoxHeading, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .gvBal, .attribImg {
padding: 5px;
text-align: center;
}

[gregeverett]

I changed that 5px to 0, and the problem is gone - thanks. Although it still doesn't explain why the problem occurred in this version but not the previous, because the stylesheets were identical. But I suppose I don't care now since it's displaying correctly. Thanks again.