Unusual Product listing Alignment problem

[Sawhorse]

What I have tried:

Please note that with all the adding and removal noted below that the necklace category product listing images (which is correctly displayed) kept displaying correctly. Also, all other categories displayed images (earrings, pendants) were the same before and after changes. Thus, there were no positive display changes caused by any changes performed below.

I removed all additions I have done in the stylessheet with no positive effect.

I removed the addition “click to enlarge” text in index.php in the define('TABLE_HEADING_IMAGE', 'Product Image'); no effect.

I added a category with no effect. It only made that table column for that category larger than any other category.

I changed images for categories, with no effect. Image size 160x120 was the same for all categories.

I went thru Admin and made all product images 160x120 with no effect.

I have changed in Admin > Images > Calculate image size > false
I have changed in Admin > Images > Image - Use Proportional Images on Products and Categories > off

All small images are 160x120

I do not know if the listCell0-0 varies (is too large) or that listCell0-1 varies (is too small). ListCell0-2 is constant width of 125 which is as it should be. This is set in Admin > Product Listings as 125.

I believe that problem may be in one or more of the files below.

includes/classes/boxes.php
includes/functions/functions_general.php
includes/modules/product_listing.php

Using firebug I believe the problem is in the scope. But I do not know php so that is as far as I know what to do. Note that I have addon: Admin Profiles which may/maynot have any effect on boxes.php. I do not know.

Below is a listing from my local machine (ZC 1.3.7.1) which has the same problem.

<tbody>
<tr class="productListing-rowheading">
<th id="listCell0-0" class="productListing-heading" align="center" scope="col">Product Image</th>
<th id="listCell0-1" class="productListing-heading" scope="col">
<a class="productListing-heading" title="Sort products descendingly by Item Name" href="http://www.example.com/store/index.php?main_page=index&cPath=4&page=1&sort=2a">Item Name-</a>
</th>
<th id="listCell0-2" class="productListing-heading" width="125" align="right" scope="col">
<a class="productListing-heading" title="Sort products ascendingly by Price" href="http://www.example.com/store/index.php?main_page=index&cPath=4&page=1&sort=3a">Price</a>
</th>
</tr>

I have spent about 3 constant working 10 hr days on this with no resolution.
Again thanks for any help.

[Sawhorse]

Additional work:

I replaced the edited Sage stylesheet with the original Sage stylesheet. No correction occurred.

Using the Sage template I remove (by changing the file name from sage to xsage) one-by-one each sage subdirectory. No positive change was found.

I changed Templates. I went from Sage to Classical Zen Cart. At first it seemed that the images were correctly placed in the narrow Classical template product listing display. But on further inspection I found that if I changed the Classical ZC stylesheet #mainWrapper width (about line 184 in the stylesheet) from 750px to 100% the same problems occurred.

I went back to the Sage Template. I changed the #mainWrapper width to 750px in the stylesheet and everything looked OK (but too narrow).

So mainWrapper width at 750px everything looks OK but at anything above 750px (I tried 850px as well as 100%) we have this problem.

Could this be a bug? Or, could this be an interaction with addon Admin Profiles (I doubt this)? I just do not think this is a bug because others would have seen this.

Oh. This work was done on my local machine using a clean install of ZC 1.3.7.1.

[Sawhorse]

More info:

As you may remember the category of Necklaces is the only category that displays correctly. All the other categories (Earrings and Pendants) do not display correctly.

If you look below the catagories of Earrings and Pendants you will see an additional blank line not found on the Necklaces page. Using Firebug that line of code is <div class="content" id="indexProductListCatDescription"> </div>
Which is found in includes/templates/template_default/templates/tpl_index_product_list.php However, when I remove the code the only thing that changed was that the blank line was remove. No other correction occurred.

So we have another small issue and no correction for the main issue.

[marcelo63]

More info:

As you may remember the category of Necklaces is the only category that displays correctly. All the other categories (Earrings and Pendants) do not display correctly.

If you look below the catagories of Earrings and Pendants you will see an additional blank line not found on the Necklaces page. Using Firebug that line of code is <div class="content" id="indexProductListCatDescription"> </div>
Which is found in includes/templates/template_default/templates/tpl_index_product_list.php However, when I remove the code the only thing that changed was that the blank line was remove. No other correction occurred.

So we have another small issue and no correction for the main issue.

on your stylesheet you have align-text => CENTER
do a CCS View and click on it

[Sawhorse]

I do not understand what you would like me to do with Firrebug and CSS. Could you explain further?

[gjh42]

Try adding a longer description for a product in Earrings or Pendants and see what happens.

Nice work, by the way.

[Sawhorse]

OH MY WORD!!! That seems to work. I by added additional text to the descriptions on my ZC 1.3.7.1 Local machine and the cells resize correcttly. If this works for everything (which I believe it will) we have a solution.

I LOVE the simple solution (I could never figure out why the Necklace Category was working correctly). But, now I do. It had more text.

If this problem is corrected by adding enough text so the cells resize correctly then I believe that we have found a bug in Zen Cart that needs to be addressed. What do you think?

[gjh42]

It's not a Zen Cart bug, it's a characteristic of HTML tables. I don't know that there is anything that can be done about it without limiting the sizing flexibility.