Product listings display ‘bug’ in Internet Explorer 6, 7 and 8

July 21, 2009 in CSS, Zen Cart Customization, Zen Cart Guides

Is this useful? Like it.

This issue can be seen on product listing pages using table and ‘colspan’ for displaying products — namely, the New Products, Featured Products and All Products pages.

By default, Zen Cart displays each listing with the thumbnail on the left, the product name/price etc on the right, then the product description below (in a cell that spans 2 columns. See the frame of the table cells for a listing:

Internet Explorer will display the width of the table cells containing the thumbnail and the product name wrongly. See comparison screenshots below:

The solution

The way IE “miscalculates” table cell widths (with colspan) is a known issue and Microsoft has no intention to fix it as according to them, “The CSS 2.1 specs does not specifiy how to distribute witdth in colspan cells”. So, typically of Microsoft, they just interpret it in a way that is totally different from other web browsers.

There are a few suggested solutions to this problem, such as changing the DOCTYPE of the pages, use nested tables etc. But specifically for Zen Cart, the quickest method is to add a width=”x%” to the table cell that holds the product name (the cell next to the thumbnail).

You need to edit these 3 files:
\includes\templates\YOUR_TEMPLATE\templates\tpl_modules_products_all_listing.php
\includes\templates\YOUR_TEMPLATE\templates\tpl_modules_products_featured_listing.php
\includes\templates\YOUR_TEMPLATE\templates\tpl_modules_products_new_listing.php

Note: Copy from the default template location and save to your custom template folder before editing.

The quick solution

I’ve added width=”85%” to these files (you can also experiment with other values). Just download and upload the 3 mofified files to:
\includes\templates\YOUR_TEMPLATE\templates\

You can add these 3 files to any of the template that you have downloaded from this site (if they have not been added). Obviously, you can also use these files for templates that you’ve obtained from elsewhere, if the issue has not been addressed.

Most probably you do not have these files in your custom template, else you’ll need to manually add the width=”85%” to your files.

>>>Download here<<<

Note: For Zen Cart 1.3.8 and Zen Cart 1.3.9

Bookmark and Share

Comments

Leave a Reply




Premium Templates

Premium 1 Series ($22~25)

Premium 2 Series ($26)

Premium 3 Series ($29)

Premium 4 Series ($28)

Premium 5 Series ($30)

Premium 6 Series ($30)

Premium 7 Series ($35)

Premium 8 Series ($40)