Unwanted image link borders inside a table

HTML & CSS
1

Hi,

I’d had an issue with image borders/links on my home page that Paul was able to sort out for me.

Part of the solution included putting basic stylesheet entries to define image borders in the main body of the page:

td.main a img{border:2px solid blue}
td.main a:hover img{border:2px solid #abd}

But while this is fine for the home page, I just realized that it’s causing unwanted borders to show up in my landing pages also:

http://www.urlgone.com/541940/

From the forum, I tried adding this to the stylesheet:

a img {
  border: 0;
}

But the first td.main a img entries seem to override everything. And since this image link is inside a table, I want to keep the border of the table intact, but remove the border from the image.

entry for 1 table row from the php file:

  <tr>
   <td class="rightColumnPrice" width="250" height="210"> <a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'cPath=1&products_id=29') . '"><img src="images/nq_industries/nq_clarifier.jpg" alt="NQ Clarifier" title="" width="115" border="0"></a><br>
      <a class="rightColumnPrice" href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'cPath=1&products_id=29') . '"><u>NQ Clarifier</u></a></td>
   <td>
   <table><tbody>
    <tr>
     <td class="top10"><img src="images/numbers/one.png" height="50" align="middle" style="margin:0px 33px 0px 140px;">
     <a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'cPath=1&products_id=29') . '"><u>NQ Clarifier</u></a></td>
    </tr>
    <tr><td><strong>Editor\\'s Rating</strong> <img src="images/stars_5.gif" align="absmiddle" style="margin:0px 0px 3px 0px;"></td></tr>
    <tr><td class="lowprice">Our Everyday Low Price: <strong>$674.00</strong></td></tr>
    <tr><td>The NQ Clarifier is the best value at the high end of the air purifier market. Its massive 11520 sq. in. HEPA filter gives the most filtration of airborne allergens for the longest time.</td></tr>
    <tr><td><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'cPath=1&products_id=29') . '"><img src="includes/languages/english/images/buttons/button_shop_now.jpg" alt="See more details of this air purifier" width="90" style="margin:0px 0px 0px 0px;"></td></tr>
   </tbody></table> 
   </td>
  </tr>

Any idea what I’m missing here?

2

You are correct, the td.main a img is what is going to tag you since it’s the most specific.

If you want image borders only on the front page, then the easy fix would be to put an id on the body (ex. <body id=“mainPage”>)for the main page only, then change the css from


td.main a img{border:2px solid blue}
td.main a:hover img{border:2px solid #abd}



#mainPage td.main a img{border:2px solid blue}
#mainPage td.main a:hover img{border:2px solid #abd}
3

Thanks Dave!

Another simple trick that worked perfectly…

4

in place of Id use class,that is the standard and good for future changes.

5

Not for what he wanted to do - apply a style to a specific element and ignore it for the rest. ID is the correct usage in this case.