How to put left/bottom borders in a image link box?

[longhorn1999]

Hi everyone,

 

I have a column of vertical image links with the prices just below each image in my right column which link to the specific product pages. I made these image boxes initially so that they don't have any borders:

 

<!-- photo_nobox //--> 
<tr>
<td> 
<?php echo '<p><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'cPath=1&products_id=28') . '"> 
<img src="images/product28.jpg" alt="product 28" title="product 28" class="center" width="120" height="120" border="0"></a></p>'; 
?>
</td>
</tr>
<tr>
<td class="rightColumnPrice"> <a class="rightColumnPrice" href="<?php echo tep_href_link(FILENAME_PRODUCT_INFO, 'cPath=1&products_id=28'); ?>">product 28 - $99.99</a></td> 
</tr>
<!-- photo_nobox_eof //-->

 

Here is part of my stylesheet which this code refers to. It's probably far from optimized but it works for now:

.rightColumnPrice {
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
 font-weight: bold;
 background: #ffffff;
 color: #072B8A;
 text-align: center;

img.center {
 display: block;
 margin-left: auto;
 margin-right: auto;
}

 

 

I now want to try to put in a 1px border to the left of and below these boxes just to make things look a little clearer and to delineate this column from the main body of the page. Ideally there would be a vertical border without any breaks all the way down and horizontal borders just below the price of each image box.

 

I've tried adding various combinations of the following code into the relevant sections of my stylesheet, but all I get are strange looking borders where the left of the image has a vertical border that isn't aligned with the overall width of the column (since each image is being resized slightly differently) and the border below the price is duplicated under the text. So nothing looks right and there is no continuous vertical left border across several image/price link boxes.

 

border-bottom:1px solid #95b3d7;

border-left:1px solid #95b3d7;

 

border-spacing: 2px;

border-collapse: separate;

 

I know this is probably something simple that I'm missing. Any ideas would appreciated...