Is there something wrong with the CSS on the product listing?

[wgvania]

I've been trying to locate the problem, and I'm guessing that it's because of the CSS. Occasionally, the pictures in the product listing begin to overlap one another. This doesn't happen all the time, but it does once in a while. I'm hoping to fix this and would appreciate any input.

Please see this page as an example. (If you don't see any problems, click around to other categories to see the overlap.)

http://wishgiving.com/shop/index.php...ex&cPath=2_3_5

Thanks!

[rstevenson]

Are you seeing this effect only in certain browsers? Like, oh, just guessing here, but maybe in IE? Maybe IE 7?

If not in IE, or if in all browsers, then you need to specify a particular case where it always occurs, so we can connect and see it ourselves. (The link you provided looks fine to me in several browsers, but I didn't check in IE.)

Rob

OOps! I just went back to it in Firefox (latest version in Mac OS X) and now the images are overlapping. Now that's weird.

I think it's safe to say that if it looks fine once and then overlaps, it's not a CSS issue. Not in the usual sense anyway. I'm currently running the page through a validator to see if anything turns up.

[wgvania]

Thanks for looking. It's also overlapping for me in Firefox on Mac OS X. I also tried it on a PC in Firefox--it looks fine, and then starts to overlap, particularly during searches.

[rstevenson]

Hi again,

I found one small thing that may be causing the problem. Just above where the products pictures appear (above in the code sense that is) there is a div with a UL tag staring inside it, but the closing /UL is outside of the div. This may cause what follows to get a little funky.

Here's what is in the page code now...

 <div id="logo">
   <a href="http://wishgiving.com/shop/">
      <img src="includes/templates/wishgiving/images/logo.jpg" alt="Wishgiving" title=" Wishgiving" width="218" height="100" />
   </a>
   <ul class="back">
   <div align="right" style="font-weight: bold">
      <p align="right"></p>
   </div>
</div>
   </ul>

It's that last line that should be above the last /div.

I really don't know if fixing that will fix the issue, but if not, there are other erros on the page. Run it through some on-line validator and keep poking at it until it validates clean. I would expect the problem to go away after you do this, almost like magic!

Rob

[wgvania]

Thank you! Do you know what file that code is in? I'm having trouble looking for it.

[rstevenson]

Hi again,

I poked around the site until that page was well and truly messed up. (As you know, it looks fine sometimes.) Then I copied and pasted the entire page code into my editor and had it check the syntax -- basically performing a local validation on the code -- a more complete validation than I did before. It found 42 errors. Many of them are minor but some are bound to cause problems.

The on-line validator at validator.w3.org gave 59 errors, about half of which I'd consider minor. It's a little pickier than my editor's. For comparison a similar page on one of my sites had 1 minor error. (It's difficult to eliminate every single one in a Zen site.)

Zen-Cart assembles pages from several places -- a wide variety of template files are called for the header, footer, body content, sidebars and so on. These templates get filled in with data from your database. These template files can be edited by the site owner. In fact they need to be to customize the appearance of the site, which I see you've done. So the next question is: who edited the template files?

Possibly you bought a template, or maybe inherited one from a previous site owner or employee? If so, then you've bought or inherited some problems. As well, I think you've added some mods to the site. These too can bring in problems if they're not coded for the version of zen cart you're using, or have themselves been modified.

You'll have to search through the template files to see where the problematic pieces are coming from and correct them there. It helps a lot if your editor can do a multi-file search so you don't have to open them one at a time.

I wish I could be more helpful, but there are too many errors for me to guess which is causing that problem. And really, they all have to be fixed eventually.

Rob

[wgvania]

Thank you for looking at our site and for your suggestions. We actually edited the template files ourselves. I'm guessing our next step is to run the template files we modified through the validator you suggested.

Thanks again!

[wgvania]

Hi,

I think this problem stemmed from the installation of the column grid layout module..

I specifically remember these problems arising once I installed the module.

I'm going to paste the code of some of the files that were replaced that I think may be relevant to the problem..

this is tpl_modules_product_listing.php:

<?php
/**
 * Module Template
 *
 * @package templateSystem
 * @copyright Copyright 2003-2005 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_modules_product_listing.php 3241 2006-03-22 04:27:27Z ajeh $
 * UPDATED TO WORK WITH COLUMNAR PRODUCT LISTING 04/04/2006
 */
 include(DIR_WS_MODULES . zen_get_module_directory(FILENAME_PRODUCT_LISTING));
?>
<div id="productListing">
<?php
// only show when there is something to submit and enabled
    if ($show_top_submit_button == true) {
?>
<div class="buttonRow forward"><?php echo zen_image_submit(BUTTON_IMAGE_ADD_PRODUCTS_TO_CART, BUTTON_ADD_PRODUCTS_TO_CART_ALT, 'id="submit1" name="submit1"'); ?></div>
<br class="clearBoth" />
<?php
    } // show top submit
?>

<?php if ( ($listing_split->number_of_rows > 0) && ( (PREV_NEXT_BAR_LOCATION == '1') || (PREV_NEXT_BAR_LOCATION == '3') ) ) {
?>
<div id="productsListingTopNumber" class="navSplitPagesResult back"><?php echo $listing_split->display_count(TEXT_DISPLAY_NUMBER_OF_PRODUCTS); ?></div>
<div id="productsListingListingTopLinks" class="navSplitPagesLinks forward"><?php echo TEXT_RESULT_PAGE . ' ' . $listing_split->display_links(MAX_DISPLAY_PAGE_LINKS, zen_get_all_get_params(array('page', 'info', 'x', 'y', 'main_page'))); ?></div>
<br class="clearBoth" />
<?php
}
?>

<?php
/**
 * load the list_box_content template to display the products
 */
if (PRODUCT_LISTING_LAYOUT_STYLE == 'columns') {
  require($template->get_template_dir('tpl_columnar_display.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_columnar_display.php');
} else {// (PRODUCT_LISTING_LAYOUT_STYLE == 'rows')
  require($template->get_template_dir('tpl_tabular_display.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_tabular_display.php');
}
?>

<?php if ( ($listing_split->number_of_rows > 0) && ((PREV_NEXT_BAR_LOCATION == '2') || (PREV_NEXT_BAR_LOCATION == '3')) ) {
?>
<div id="productsListingBottomNumber" class="navSplitPagesResult back"><?php echo $listing_split->display_count(TEXT_DISPLAY_NUMBER_OF_PRODUCTS); ?></div>
<div  id="productsListingListingBottomLinks" class="navSplitPagesLinks forward"><?php echo TEXT_RESULT_PAGE . ' ' . $listing_split->display_links(MAX_DISPLAY_PAGE_LINKS, zen_get_all_get_params(array('page', 'info', 'x', 'y'))); ?></div>
<br class="clearBoth" />
<?php
  }
?>

<?php
// only show when there is something to submit and enabled
    if ($show_bottom_submit_button == true) {
?>
<div class="buttonRow forward"><?php echo zen_image_submit(BUTTON_IMAGE_ADD_PRODUCTS_TO_CART, BUTTON_ADD_PRODUCTS_TO_CART_ALT, 'id="submit2" name="submit1"'); ?></div>
<br class="clearBoth" />
<?php
    } // show_bottom_submit_button
?>
</div>

<?php
// if ($show_top_submit_button == true or $show_bottom_submit_button == true or (PRODUCT_LISTING_MULTIPLE_ADD_TO_CART != 0 and $show_submit == true and $listing_split->number_of_rows > 0)) {
  if ($show_top_submit_button == true or $show_bottom_submit_button == true) {
?>
</form>
<?php } ?>