Index Layout Product Display Problem

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 :down: ), 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.

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

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

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:

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

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

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.

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

Mario - you are the best! :smartass: 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!

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.
:smile:

Hey Mario...you said that I could bug you when I need help, so here I go...

I have the problem again! :( Well, the index/home page image display problem I meant. It doesn't occur often, and it just sort of randomly happened. Unlike before, this time, just the last image of each row got shifted to the next row, and it happens to all rows, which left a quite large blank spot on the very right column. I haven't changed the names of the products to make them longer, nor did I see that it was the name of the product this time. But I am not sure what caused such display problem again...if you could test and point me to a direction, that will be great! Thanks a bunch!!

p.s. I sent you a PM of the same msg as well, just so it might draw your attention. Thx!

Hey!

I've loaded your site a few times today but haven't managed to see the problem yet... If you come across it, maybe make a note of which product sits above the hole (in theory, the one pushing down the other ones!)

I'll keep looking, hopefuly i'll be able to replicate the problem.
BTW, are you experiencing the problem in a browser in particular?

It just happened once for me again, in IE. I noticed that it particularly happened on the page after I log-in as a customer, right after I log-in, the system direct me back to index, but the images shifted. See the attached screenshot.

I did the same thing (log-in) in Firefox but didn't encounter this problem. I will test it in Safari later and see how it works. This seems odd because I haven't had such problem until this two days after I installed SSL certificate. :S

Thanks for checking up for me!

Ah ok, so it seems to be happening with IE, and when you logon...

Would you mind if I created an account so I can check this login thing? I promise not to go shopping crazy :)

In fact I was hoping you won't mind taking some time to creat an account and test it. Thanks!!! go shop! :P

Ok, i've managed to recreate the prob in IE.

A quick way around that is to hard-code the boxes' width to something like 24%.
Currently, as you have 4 columns, the system assigns a width of 25% each, which is a snug fit.

If you edit your includes/modules/featured_products.php (or includes/modules/YOUR_TEMPLATE/featured_products.php) you should see the following at around line 53 (I guess dependent on other alterations and Zen-Cart version):

$list_box_contents[$row][$col] = array('params' =>'class="centerBoxContentsFeatured centeredContent back"' . ' ' . 'style="width:' . $col_width . '%;"',

And replace with:

$list_box_contents[$row][$col] = array('params' =>'class="centerBoxContentsFeatured centeredContent back"' . ' ' . 'style="width:24%"',

With this change, of course, you loose the automatic width values, meaning that if you decide to increase or decrease the number of columns you'll have to set this value manually.

However, since you say it was fine before the SSL cert was installed, you might want to try reinstalling that...

Let me know how you get on!
:-)

Mario

Hi Mario, Thanks so much for all the help. I have been sick :( (yeah fashionably sick) and busy with other stuff so I haven't looked into that little problem yet. I don't want to have to force the size to change as you suggested which as you stated, I would lose the flexibility of the layout in cernter. I am going to look for a work-around and see if it can be done. Clearly this problem only occur in IE, as everything seemed fine with FireFox and Safari...IE sux but it's too popular...

Appreciate your help!!

Hey! Hope you're feeling better!

I know, the change ain't pretty and i think should be a last resort (thinking about it it would have to be done to the other modules as well (new products, specials, etc), so it's far from ideal. I'll see if i can find a CSS-specific solution.

Would you be able to send me your featured_products.php so i can try a couple of things?

This site is really cool. What are the modules that you installed and how did you do that header with Flash?

Outlawlb:

This site is really cool. What are the modules that you installed and how did you do that header with Flash?

Thanks for liking the site. I designed the theme, installed a number of modules that I found from zen cart download MOD area including Shine Live Help side box (I redesigned the graphic for online/offline notice though), dg_review (for reviews to show on product_info page (but not completely refined yet...still working on perfectlizing it), cross-sell, upsell cart, super_order (for admin), sales report (admin), gift wrap, free shipping if buying X-dolloars more, Image handler II (great MOD) and Light Box (another image enhencement for presentation)... I did make quite some modification to certain place particularly user interface presentation to make them going along with my theme. This forum is a great learning resource plus there are a number of wonderful kind people who offered their expertise and help without asking anything in return...like Mario...:P

The flash header code resides in common/header.php, defined in CSS for size and location, swf file resides in my_template>>image folder.

Mario...I will pm you my file?