Product Listing Border

I'd like to make a border around the different items in the product listing. This was easily done in 1.2.7 because you just wrap a border around the various <td>'s. For example, http://www.moissaniteco.com/moissanite-solitaires-c-1.html.

But since the divs are not as rigid and more flixible when i try to add a border around .centerBoxContentsProducts it completely breaks the product listing.

I'm sure there is a way to fix this, any thoughts?

(thanks in advance for your help)

P.S. The url of the site I'm working on is: http://www.fashionettes.com/index.php?main_page=index&cPath=1

In your stylesheet.css

find the following:

.productListing-odd {font-size: 1em; border: 1px solid #000;}
.productListing-even {font-size: 1em; background-color: #FFE6F9; border: 1px solid #000;}

Add the portion in red.

Oops, I forgot to point out that I'm using the column layout, not the horizonal (so that doesn't work)

One possibility involves a bit of work.

in your stylesheet create a new ID:

#productbox {border: 1px solid #000;}

Now in tpl_columnar_display.php make the following changes

<div id="productbox">
<?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
      }
    }
?>
</div>
<br class="clearBoth" />
<?php
  }
}

Add the portions in red

see if that works.

The problem was that the size of the product boxes was autosizing to the right width, but once I added the border it became too big and then the correct number of items per row would not show.

What I did to fix it was modify the following in : includes/modules/(my template)/product_listing

$list_box_contents[$rows][$column] = array('params' => 'class="centerBoxContentsProducts centeredContent back"' . ' ' . 'style="width:' . $col_width . '%;"',

And i changed this> style="width:' . $col_width . '%;"

to this:> style="width:140px"

Thanks for the help.

This thread helped me answer my question which I'm going to post anyways, for search-ability!

The question I had was:

"How do I fix the width of the product listing so it doesn't move my products out of the 3 column layout into their own random layout when I add borders or margins by CSS?!"