Index Layout Product Display Problem

[sc0rpiongirl]

Apologies if I am double-posting but I have spent more than an hour searching for the answer to my question, and hours to try to fix it before my posting, but had no luck, hence, the post.

I do recollect that I saw a similar post regarding the problem I am experiencing, (I couldn't find that post any more after searching over and over ), which is about unexpected space / line break in Feature/New/Special product center box display on index page. Ajeh commented that it could be the result of "attempting to fit a size 14 foot in a size 9 shoe". I then throughly check my css stylesheet as well as related php files, and the configuartion setting of my images etc., but so far, I am convenience, to my best knowledge, that it should have no problem properly displayed.

The display problem only occurs occassionally, i.e., sometimes it's perfectly fine, sometimes it incurs - if I set max 6 feature products to be shown, instead of displaying product 3 in a row with 2 rows, (base on my setting), it displays 3 on first row, space space then 1 product on 2nd row, then product product space on the 3th row.

Unexpected display:
0 0 0
x x 0
0 0 x

Expected display:
0 0 0
0 0 0

It doesn't matter which browser I am checking - IE, FF, Opera and Safari - I have done them all.

A screenshot is attached, or view http://angelsexylingerie.com/ for a demo. If it displays properly at your first look, refresh the browser to view again - like I said, it sometimes displays properly, sometimes not.

Any help and/or direction on resolving this is greatly appreciated.

[mresende]

Hi!

I think it has something to do with the height in the products with a longer description pushing over divs underneath it (have a look at the attached screenshot).

Putting <br class="clearBoth"> at the end of the row should fix it but I'm not exactly sure where in the code this could be done...

Sorry I can't be of any more help

[mresende]

Hi sc0rpiongirl,

I think i might be on to something!
Can you post the contentes of (or attach) your includes/templates/YOUR_TEMPLATE/common/tpl_columnar_display.php?

Mario

[sc0rpiongirl]

Thank you for the tips and offering help. I did think of the possible cause directing to the /tpl_columnar_display.php but I haven't had luck on changing that. In fact, I am trying to change the stylesheet.css as well as the /tpl_columnar_display.php in order to

1) Fix this spacing problem;
2) Made every product display in a frame (boarder: #cccccc) to even out and tidy up the display like the attached screen shot.

Here is the code for /tpl_columnar_display.php. If you could take some time to help me to get to it, that would be wonderful.

Many thanks!

<?php
/**
 * Common Template - tpl_columnar_display.php
 *
 * This file is used for generating tabular output where needed, based on the supplied array of table-cell contents.
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 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_columnar_display.php 3157 2006-03-10 23:24:22Z drbyte $
 */

?>
<div>
<?php
  if ($title) {
  ?>
<?php echo $title; ?>
<?php
 }
 ?>
<?php
if (is_array($list_box_contents) > 0 ) {
 for($row=0;$row<sizeof($list_box_contents);$row++) {
    $params = "";
    //if (isset($list_box_contents[$row]['params'])) $params .= ' ' . $list_box_contents[$row]['params'];
?>

<?php
    for($col=0;$col<sizeof($list_box_contents[$row]);$col++) {
      $r_params = "";
      if (isset($list_box_contents[$row][$col]['params'])) $r_params .= ' ' . (string)$list_box_contents[$row][$col]['params'];
     if (isset($list_box_contents[$row][$col]['text'])) {
?>
    <?php echo '<div' . $r_params . '>' . $list_box_contents[$row][$col]['text'] .  '</div>' . "\n"; ?>
<?php
      }
    }
?>
<?php
  }
}
?> 
</div>
<br clear="all">

p.s. this is what I want to get done:

[mresende]

Hi!

Can you try replacing your current /tpl_columnar_display.php with:

<?php
/**
 * Common Template - tpl_columnar_display.php
 *
 * This file is used for generating tabular output where needed, based on the supplied array of table-cell contents.
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 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_columnar_display.php 3157 2006-03-10 23:24:22Z drbyte $
 */

?>
<div>
<?php
  if ($title) {
  ?>
<?php echo $title; ?>
<?php
 }
 ?>
<?php
if (is_array($list_box_contents) > 0 ) {
 for($row=0;$row<sizeof($list_box_contents);$row++) {
    $params = "";
    //if (isset($list_box_contents[$row]['params'])) $params .= ' ' . $list_box_contents[$row]['params'];
?>

<?php
    for($col=0;$col<sizeof($list_box_contents[$row]);$col++) {
      $r_params = "";
      if (isset($list_box_contents[$row][$col]['params'])) $r_params .= ' ' . (string)$list_box_contents[$row][$col]['params'];
     if (isset($list_box_contents[$row][$col]['text'])) {
?>
    <?php echo '<div' . $r_params . '>' . $list_box_contents[$row][$col]['text'] .  '</div>' . "\n"; ?>
<?php
      }
    }
?>
<br class="clearBoth" />
<?php
  }
}
?> 
</div>
<br clear="all">

The difference is that there is a <br class="clearBoth" /> just before the last <?php> tag. That command is executed after rendering every row in, and should, hopefuly, make sure all content is aligned.

Let me know if that helps!

Mario

[sc0rpiongirl]

Thank you very much Mario for all the help.

I in fact agree that your first comment on the long product name causing the breaking and changed the names to a shorter version which seemed to fix it already.

I also increase the mainwrapper size to 800px, which allows more space for the center box, plus, I did apply the changes you did in the tpl_columar_display.php file.

It all seems fine for now. I really appreciate your help!

I am attempting to change the DIV in order to display products in a box as I indicated in an earlier post, but wonder the div has to be applied on the tpl_columar_display.php. Would you have any suggestions?

Many thanks in advance,
S

[mresende]

You're very welcome!

You know, with the alteration that I posted you should be able to have long names without breaking; why not give it a go?

Regarding your box/DIV question, do you mean you'd like your images to have the grey border like in the last image you attached?
If that's so you should only need to do the following in the stylesheet:

#featuredProducts img {
border:1px solid #ccc;
}

If you meant the grey box wrapping around your WHOLE product, that might not be a good idea because, depending on the product names' length, etc, boxes could end up being a different size and that wouldn't look too neat.

[mresende]

Another thing I notice on your site is that the mouseOver image overlays are displayed underneath the flash content probably not a problem on higher resolutions as the overlay won't be pushed up that far, but on my 1024x768 it occasionally does, like in the first image.


A way to fix that is highlighted in the second image.

I hope that's useful to you; I spent ages trying to get my flash header to display correctly, mainly because of the enlarged image display lightbox (an example by enlarging the image on this page)

Mario

[sc0rpiongirl]

Mario - you are the best! I fixed the overlay problem as you suggested, and yes with the revised tpl_columnar_display.php, it works perfectly!

I might look into other improvement on the site and perhaps will bug you for your valuable suggestions in the future!

Many thanks again!

[mresende]

You're very welcome, I'm glad I was able to help!

If there's anything that I might be able to help in the future do let me know.