Image borders and styleshet coding

[PJD]

I want to place a border around the images in the Product Info page. So I added to the CSS Stylesheet the following:


#productMainImage img {
border: 2px inset #7A7A7A;
border-bottom: 5px inset #000000;
}
#productAdditionalImages img {
border: 2px inset #7A7A7A;
border-bottom: 5px inset #000000;
}

Under each image are the words 'LARGER IMAGE' which I have modified in english.php to include a little magnifying glass as such:

define('TEXT_CLICK_TO_ENLARGE', '<img src= "http://www.blahblah.com/store/admin/images/magnify.gif" alt="magnify" id="imageMag"> larger image');

I also placed with it an id="imageMag" so that I can control it with the Stylesheet as such:

#imageMag img {
border: none;
}

I was expecting this to place the border around the images but not the magnifier. It DIDNT WORK.... it puts the borders around BOTH the image and the little magnifier image too. This same technique is used in the Featured products to no avail.

I am using 1.3.8a and any help with my coding of the stylesheet or english.php would be appreciated for both the Product Info page and the Featured Products Listing.

Thanks, PJD

[dbltoe]

if we could look at www.blahblah.com, it would help

[bigbadboy]

Also, the images are links, therefore you need something along the lines of:

#productMainImage img a {

[fairestcape]

You'll probably have to adjust the tpl_xxxxx.php files as well to stop the style from being assigned to elements that you don't want them assigned to. This may require a bit of savvy!