Not actually a bug per se but a long term problem that I have a solution to.

Ongoing issue with zen cart listing boxes has always been the width of the containers at a percent - 3 in a row, width is 33%. That means you can never add in padding or borders and mods have been created to fix that. I have looked at all sorts of ways to deal with it in the new code and came up with a possible solution.

I made one change to the code in tpl_listingbox_columnar_default.php:

echo $tplVars['listingBox']['formattedItems'][$row][$col]['colWidth'] - 2; ?>%">

I subtracted 2 from the width so that the box width becomes 31% instead.

The I can pad the boxes and add a smidge to push then further to the right:

.centerBoxContentsFeaturedIndex, .centerBoxContentsSpecialsIndex, .centerBoxContentsNewIndex {
padding: 8px 5px; margin-left: 1px;
} // and also purchased as well whatever the class name is

No padding needed on the rest of the box which now has the images butting up against the center content heading.

This way makes it way easier to style the contents of those boxes or add borders and make each box separate as some mods do now.

This can be changed from 2 to larger numbers to accommodate more padding, margins and borders for styling without having to resort to mods. Um, this is minor but really important to a designer.

The padding dimension handling is a fundamental flaw in CSS specifications (which surprisingly IE got right at first, but later changed to match the standard). If I specify an element to have a particular size, and then ask for a certain amount of padding for its content, I would expect the content with padding to fit inside that size. At any rate, it is far too late to fix that now, so the next best way to handle this would be to have inner wrappers for elements which typically sit in groups, so the main elements like .centerBoxContentsProducts would have something like a .padding element which would then contain all the other elements of the item. I know it's not semantically "correct", but it would allow simple and flexible styling without having to calculate pixels or percent for every situation, by applying all margins, borders and padding to say .centerBoxContentsProducts > .padding {}. The .centerBoxContentsProducts elements can but t up against each other unnoticed, while borders go on the .padding elements as desired.

I tried to enclose the center box contents with a wrapper with padding on it because I first trying to pad the box itself and the boxes didn't line up.

You are saying to add an additional wrapper inside the individual boxes? Aha, that worked! I didn't think of that. I think there was also a <br / class="clearBoth"> that I changed to <div class="clearBoth"></div> (need to change all!)

<div class="centerBoxContents<?php echo $tplVars['listingBox']['className']; ?> centeredContent back" style="width:<?php 

echo $tplVars['listingBox']['formattedItems'][$row][$col]['colWidth']; ?>%">
<div class="innerCenterBoxContents">
<?php  if ($tplVars['listingBox']['formattedItems'][$row][$col]['useImage']) { ?>
<a href="<?php echo zen_href_link ( zen_get_info_page ($tplVars['listingBox']['formattedItems'][$row][$col]['products_id'] ), 'cPath=' . $tplVars['listingBox']['formattedItems'][$row][$col]['productCpath'] . '&products_id=' . ( int ) $tplVars['listingBox']['formattedItems'][$row][$col]['products_id'] ); ?>">
<?php echo zen_image ( DIR_WS_IMAGES . $tplVars['listingBox']['formattedItems'][$row][$col]['products_image'], $tplVars['listingBox']['formattedItems'][$row][$col]['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT ); ?>
</a><br>
<?php } ?>
<a href="<?php echo zen_href_link ( zen_get_info_page ($tplVars['listingBox']['formattedItems'][$row][$col]['products_id'] ), 'cPath=' . $tplVars['listingBox']['formattedItems'][$row][$col]['productCpath'] . '&products_id=' . $tplVars['listingBox']['formattedItems'][$row][$col]['products_id'] ); ?>"><?php echo $tplVars['listingBox']['formattedItems'][$row][$col]['products_name']; ?></a><br /><?php echo $tplVars['listingBox']['formattedItems'][$row][$col]['displayPrice']; ?>
</div>
</div>
<?php } ?><div class="clearBoth"></div>

.innerCenterBoxContents {
padding: 5px;
}
Permanent solution!

delia:

I tried to enclose the center box contents with a wrapper with padding on it because I first trying to pad the box itself and the boxes didn't line up.

You are saying to add an additional wrapper inside the individual boxes? Aha, that worked! I didn't think of that. I think there was also a <br / class="clearBoth"> that I changed to <div class="clearBoth"></div> (need to change all!)

<div class="centerBoxContents<?php echo $tplVars['listingBox']['className']; ?> centeredContent back" style="width:<?php

echo $tplVars['listingBox']['formattedItems'][$row][$col]['colWidth']; ?>%">

<div class="innerCenterBoxContents"> <?php if ($tplVars['listingBox']['formattedItems'][$row][$col]['useImage']) { ?> <a href="<?php echo zen_href_link ( zen_get_info_page ($tplVars['listingBox']['formattedItems'][$row][$col]['products_id'] ), 'cPath=' . $tplVars['listingBox']['formattedItems'][$row][$col]['productCpath'] . '&products_id=' . ( int ) $tplVars['listingBox']['formattedItems'][$row][$col]['products_id'] ); ?>"> <?php echo zen_image ( DIR_WS_IMAGES . $tplVars['listingBox']['formattedItems'][$row][$col]['products_image'], $tplVars['listingBox']['formattedItems'][$row][$col]['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT ); ?> </a><br> <?php } ?> <a href="<?php echo zen_href_link ( zen_get_info_page ($tplVars['listingBox']['formattedItems'][$row][$col]['products_id'] ), 'cPath=' . $tplVars['listingBox']['formattedItems'][$row][$col]['productCpath'] . '&products_id=' . $tplVars['listingBox']['formattedItems'][$row][$col]['products_id'] ); ?>"><?php echo $tplVars['listingBox']['formattedItems'][$row][$col]['products_name']; ?></a><br /><?php echo $tplVars['listingBox']['formattedItems'][$row][$col]['displayPrice']; ?> </div> </div> <?php } ?><div class="clearBoth"></div> ``` > > .innerCenterBoxContents { > padding: 5px; > } > Permanent solution! Nice solution Delia. I've run into this too. Can't wait to try it out.

delia:

Ongoing issue with zen cart listing boxes has always been the width of the containers at a percent - 3 in a row, width is 33%.

Um, this is minor but really important to a designer.
Agreed. And even in 2014 it's still a big challenge to get it all to work consistently across browsers.

gjh42:

without having to calculate pixels or percent for every situation
Just to clarify: The reason that the template uses % is because it allows the storeowner to change the number of items per row via an Admin switch, so the code needs to be able to accommodate that without requiring the storeowner to edit the stylesheet every time they alter that layout choice.

That feature is one of the most painful things to have to accommodate in the template system! Always happy to consider smarter ways of implementing it.

delia:

.innerCenterBoxContents {
padding: 5px;
}
Permanent solution!
Less is more :) Nice.

delia:

I tried to enclose the center box contents with a wrapper with padding on it because I first trying to pad the box itself and the boxes didn't line up.

You are saying to add an additional wrapper inside the individual boxes? Aha, that worked! I didn't think of that. I think there was also a <br / class="clearBoth"> that I changed to <div class="clearBoth"></div> (need to change all!)

<div class="centerBoxContents<?php echo $tplVars['listingBox']['className']; ?> centeredContent back" style="width:<?php

echo $tplVars['listingBox']['formattedItems'][$row][$col]['colWidth']; ?>%">

<div class="innerCenterBoxContents"> <?php if ($tplVars['listingBox']['formattedItems'][$row][$col]['useImage']) { ?> <a href="<?php echo zen_href_link ( zen_get_info_page ($tplVars['listingBox']['formattedItems'][$row][$col]['products_id'] ), 'cPath=' . $tplVars['listingBox']['formattedItems'][$row][$col]['productCpath'] . '&products_id=' . ( int ) $tplVars['listingBox']['formattedItems'][$row][$col]['products_id'] ); ?>"> <?php echo zen_image ( DIR_WS_IMAGES . $tplVars['listingBox']['formattedItems'][$row][$col]['products_image'], $tplVars['listingBox']['formattedItems'][$row][$col]['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT ); ?> </a><br> <?php } ?> <a href="<?php echo zen_href_link ( zen_get_info_page ($tplVars['listingBox']['formattedItems'][$row][$col]['products_id'] ), 'cPath=' . $tplVars['listingBox']['formattedItems'][$row][$col]['productCpath'] . '&products_id=' . $tplVars['listingBox']['formattedItems'][$row][$col]['products_id'] ); ?>"><?php echo $tplVars['listingBox']['formattedItems'][$row][$col]['products_name']; ?></a><br /><?php echo $tplVars['listingBox']['formattedItems'][$row][$col]['displayPrice']; ?> </div> </div> <?php } ?><div class="clearBoth"></div> ``` > > .innerCenterBoxContents { > padding: 5px; > } > Permanent solution!

Hi Delia what location is that file located?

The reason that the template uses % is because it allows the storeowner to change the number of items per row via an Admin switch, No issue with this, setting the overall individual element width has to be done that way. It's the margins that cause difficulties according to the number of elements set per row. Creating an inner element to apply margins. padding, etc. to avoids the issue entirely.

delia:

Ongoing issue with zen cart listing boxes has always been the width of the containers at a percent - 3 in a row, width is 33%. That means you can never add in padding or borders and mods have been created to fix that. I have looked at all sorts of ways to deal with it in the new code and came up with a possible solution.

I made one change to the code in tpl_listingbox_columnar_default.php:

echo $tplVars['listingBox']['formattedItems'][$row][$col]['colWidth'] - 2; ?>%">

> 
> I subtracted 2 from the width so that the box width becomes 31% instead.
> 
> The I can pad the boxes and add a smidge to push then further to the right:
> 
> .centerBoxContentsFeaturedIndex, .centerBoxContentsSpecialsIndex, .centerBoxContentsNewIndex {
> 	padding: 8px 5px; margin-left: 1px;
> } // and also purchased as well whatever the class name is
> 
> No padding needed on the rest of the box which now has the images butting up against the center content heading.
> 
> This way makes it way easier to style the contents of those boxes or add borders and make each box separate as some mods do now.
> 
> This can be changed from 2 to larger numbers to accommodate more padding, margins and borders for styling without having to resort to mods.  Um, this is minor but really important to a designer.

This can be easily dealt with pure css without any recoding:

.centerBoxContentsFeaturedIndex, .centerBoxContentsSpecialsIndex, .centerBoxContentsNewIndex {
        width:31% (or whatever) !important;
	padding: 8px 5px; margin-left: 1px;
} // and also purchased as well whatever the class name is

Thanks,

Anne

Quite true, but it does require proficiency with CSS to adjust the rule correctly any time the admin setting of items per row is changed.

picaflor-azul:

This can be easily dealt with pure css without any recoding:

.centerBoxContentsFeaturedIndex, .centerBoxContentsSpecialsIndex, .centerBoxContentsNewIndex {
width:31% (or whatever) !important;
padding: 8px 5px; margin-left: 1px;
} // and also purchased as well whatever the class name is

Thanks,

Anne
The important bit is what makes that work. Does not work for older versions of IE. I consider that to be a partial fix and never considered it as I have always done cross-browser CSS. That is getting harder now and therefore, many people are not worrying about the older browsers any longer but what people don't realize is that there are large corporations that don't upgrade browsers company wide for years. I was still having to work with IE6 not that long ago with oil industry companies in Texas.

And it does require tweaking for settings as gjh42 says.

countrycharm, that fix was for 1.6.0 so a new file template_default/listingboxes/tpl_listingbox_columnar_default.php

In earlier versions, the file is common/tpl_columnar_display.php and the new code is:

<?php echo '<div' . $r_params . '><div class="innerCenterBoxContents">' . $list_box_contents[$row][$col]['text'] .  '</div></div>' . "\n"; ?>

delia:

The important bit is what makes that work. Does not work for older versions of IE. I consider that to be a partial fix and never considered it as I have always done cross-browser CSS. That is getting harder now and therefore, many people are not worrying about the older browsers any longer but what people don't realize is that there are large corporations that don't upgrade browsers company wide for years. I was still having to work with IE6 not that long ago with oil industry companies in Texas.

And it does require tweaking for settings as gjh42 says.

countrycharm, that fix was for 1.6.0 so a new file template_default/listingboxes/tpl_listingbox_columnar_default.php

In earlier versions, the file is common/tpl_columnar_display.php and the new code is:

<?php echo '<div' . $r_params . '><div class="innerCenterBoxContents">' . $list_box_contents[$row][$col]['text'] . '</div></div>' . "\n"; ?>

Thanks I appreciate that....

Thanks for posting. Nice to see others recognise this problem. I have been double-wrapping such items for years in order to achieve and maintain a fluid layout. But the problem always resurfaces at upgrade time when it can take months just to re-convert several hundred affected files. I do look forward to the day when zencart is totally fluid.

Years ago (2007?), someone wrote a tpl_divular_display.php to achieve this.

delia:

I tried to enclose the center box contents with a wrapper with padding on it because I first trying to pad the box itself and the boxes didn't line up.

You are saying to add an additional wrapper inside the individual boxes? Aha, that worked! I didn't think of that. I think there was also a <br / class="clearBoth"> that I changed to <div class="clearBoth"></div> (need to change all!)

<div class="centerBoxContents<?php echo $tplVars['listingBox']['className']; ?> centeredContent back" style="width:<?php

echo $tplVars['listingBox']['formattedItems'][$row][$col]['colWidth']; ?>%">

<div class="innerCenterBoxContents"> <?php if ($tplVars['listingBox']['formattedItems'][$row][$col]['useImage']) { ?> <a href="<?php echo zen_href_link ( zen_get_info_page ($tplVars['listingBox']['formattedItems'][$row][$col]['products_id'] ), 'cPath=' . $tplVars['listingBox']['formattedItems'][$row][$col]['productCpath'] . '&products_id=' . ( int ) $tplVars['listingBox']['formattedItems'][$row][$col]['products_id'] ); ?>"> <?php echo zen_image ( DIR_WS_IMAGES . $tplVars['listingBox']['formattedItems'][$row][$col]['products_image'], $tplVars['listingBox']['formattedItems'][$row][$col]['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT ); ?> </a><br> <?php } ?> <a href="<?php echo zen_href_link ( zen_get_info_page ($tplVars['listingBox']['formattedItems'][$row][$col]['products_id'] ), 'cPath=' . $tplVars['listingBox']['formattedItems'][$row][$col]['productCpath'] . '&products_id=' . $tplVars['listingBox']['formattedItems'][$row][$col]['products_id'] ); ?>"><?php echo $tplVars['listingBox']['formattedItems'][$row][$col]['products_name']; ?></a><br /><?php echo $tplVars['listingBox']['formattedItems'][$row][$col]['displayPrice']; ?> </div> </div> <?php } ?><div class="clearBoth"></div> ``` > > .innerCenterBoxContents { > padding: 5px; > } > Permanent solution!

Putting the <br class="clearboth" /> between the final divs works just as well, ie

</div>
<br class="clearboth" />
</div>

dw08gm:

Putting the <br class="clearboth" /> between the final divs works just as well, ie

</div> <br class="clearboth" /> </div> ```

The breaks can cause problems - much better to put a div so there's no other formatting or html action. Just cleaner. Fluid also means more reliance on CSS, less on HTML.