Black border box around product rows?

[sports guy]

Hi. I am trying to put a 1px black border box around each product area. Please refer to this page: http://www.lasilhouettelingerie.com/shop/bodysuits-c-70

As you can see the odd and even rows don't currently have a 1px black border and the images are also touching (so I think I would also like to add a little padding between products).

I can see in my source code for the page above I have this:

<tablewidth="100%" border="0" cellspacing="0" cellpadding="0" id="cat70Table" class="tabTable">
<trclass="productListing-rowheading">
<thclass="productListing-heading" align="center" scope="col" id="listCell0-0">Product Image</th>
<thclass="productListing-heading" scope="col" id="listCell0-1"><ahref="http://www.lasilhouettelingerie.com/shop/index.php?main_page=index&amp;cPath=70&amp;page=1&amp;sort=2a" title="Sort products descendingly by Item Name" class="productListing-heading">Item Name-</a></th>
 
<thclass="productListing-heading" align="right" width="125" scope="col" id="listCell0-2"><ahref="http://www.lasilhouettelingerie.com/shop/index.php?main_page=index&amp;cPath=70&amp;page=1&amp;sort=3a" title="Sort products ascendingly by Price" class="productListing-heading">Price</a></th>
 
 
 
  </tr>
 
 
 
  <trclass="productListing-odd">
 
 
 
   <tdclass="productListing-data" align="center"><ahref="http://www.lasilhouettelingerie.com/shop/index.php?main_page=product_info&amp;cPath=70&amp;products_id=405"><imgsrc="images/Cass Cami.gif" alt="Cass and Co. Control Camisole" title=" Cass and Co. Control Camisole " width="63" height="80" class="listingProductImage" /></a></td>
 
 
 
   <tdclass="productListing-data"><h3class="itemTitle"><ahref="http://www.lasilhouettelingerie.com/shop/index.php?main_page=product_info&amp;cPath=70&amp;products_id=405">Cass and Co. Control Camisole</a></h3><divclass="listingDescription">This control cami provides support and moderate slimming and can be worn as inner or outerwear, layered, or as exercise wear. A great fit for all...</div></td>
 
 
 
   <tdclass="productListing-data" align="right">$72.00<br /><br /><ahref="http://www.lasilhouettelingerie.com/shop/index.php?main_page=product_info&amp;cPath=70&amp;products_id=405">... more info</a><br /><br /></td>
 
 
 
  </tr>
 
 
 
  <trclass="productListing-even">
 
 
 
   <tdclass="productListing-data" align="center"><ahref="http://www.lasilhouettelingerie.com/shop/index.php?main_page=product_info&amp;cPath=70&amp;products_id=660"><imgsrc="images/75015.jpg" alt="Wolford Berlin Body" title=" Wolford Berlin Body " width="59" height="80" class="listingProductImage" /></a></td>
 
 
 
   <tdclass="productListing-data"><h3class="itemTitle"><ahref="http://www.lasilhouettelingerie.com/shop/index.php?main_page=product_info&amp;cPath=70&amp;products_id=660">Wolford Berlin Body</a></h3><divclass="listingDescription">Soft cotton against the skin and a ######## sheen on the outside. The purest interpretation of luxury. Color: Black (We have this item in stock! Please...</div></td>
 
 
 
   <tdclass="productListing-data" align="right">$220.00<br /><br /><ahref="http://www.lasilhouettelingerie.com/shop/index.php?main_page=product_info&amp;cPath=70&amp;products_id=660">... more info</a><br /><imgsrc="includes/templates/template_default/buttons/english/button_sold_out_sm.gif" alt="Sold Out" title=" Sold Out " width="51" height="18" /><br /><br /></td>
 
 
 
  </tr>
 
 
 
  <trclass="productListing-odd">
 
 
 
   <tdclass="productListing-data" align="center"><ahref="http://www.lasilhouettelingerie.com/shop/index.php?main_page=product_info&amp;cPath=70&amp;products_id=650"><imgsrc="images/string body cape.jpg" alt="Wolford Cape Town String Body" title=" Wolford Cape Town String Body " width="59" height="80" class="listingProductImage" /></a></td>
 
 
 
   <tdclass="productListing-data"><h3class="itemTitle"><ahref="http://www.lasilhouettelingerie.com/shop/index.php?main_page=product_info&amp;cPath=70&amp;products_id=650">Wolford Cape Town String Body</a></h3><divclass="listingDescription">A light cotton blouse with modern details and a practical feature: it can't slip out of place, because the seamlessly attached string body holds the...</div></td>

I would assume I would find this code to add the border:

productListing-odd
productListing-even
productListing-rowheading

but these specifications are not in my styelsheet (nor the default stylesheet).

The only .productListing items I found were:

.productListing-data
.productListing-rowheading
.productListing-heading

I don't understand why these items show in my source code but do not show in my css stylesheet. Please help me add a 1px black border around each producst listing (with a little padding between products).

[kobra]

What is the link to your page?

[sports guy]

Here is a link to the products page:
http://www.lasilhouettelingerie.com/shop/bodysuits-c-70

[kobra]

OPPS! Saw the link

I don't understand why these items show in my source code but do not show in my css stylesheet.

Not all tags are in the stylesheet as it would be huge if they were

Try adding this to the bottom of your stylesheet and adjust to suit

TR.productListing-odd {
        background-color: #ffffff;
    height: 1.5em;
    vertical-align: top;
        }

TR.productListing-even {
    background-color: #9a9a9a;
    height: 1.5em;
    vertical-align: top;
        }

[sports guy]

Sorry to do this to you Kobra. I added your code to the bottom of my sytlesheet like you said, and yes the odd and even rows did change color (so I know this setting should also be able to add a black border and space between product listings). As of right now each image touches so it looks sloppy.

I added this:

TR.productListing-odd {
    background-color: #FFFFFF;
    height: 1.5em;
    vertical-align: top;
 margin-bottom: 4em;
 border: 1px solid #000000;
 }
TR.productListing-even {
    background-color: #FFFFFF;
    height: 1.5em;
    vertical-align: top;
 margin-bottom: 4em;
 border: 1px solid #000000;
 }

Thinking I could space in between each odd and even row and add a black border around each product, but nothing happens still. What could I be doing wrong here?

[sports guy]

Ok. I have the padding by changing to this:

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
 text-align: center;
 padding-top: 2em;
 }

Still have yet to find out where to add the black border (so it goes around the whole product (i.e. image, title, description, price, and add to cart).

[kobra]

You added padding to all items and should have seperated this out

td .productListing-data {
        padding: 0em 0em 1em 0em;
        }

You will not like the border as it will create boxes inline around each element

[sports guy]

Ok I was able to seperate that out. I see what you mean about seperating that item out.