SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unwanted image link borders inside a table

    Hi,

    http://www.sitepoint.com/forums/show...23#post4773723

    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:
    Code:
    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:

    Code:
    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:
    Code:
      <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. #2
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,290
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    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

    Code:
    td.main a img{border:2px solid blue}
    td.main a:hover img{border:2px solid #abd}
    Code:
    #mainPage td.main a img{border:2px solid blue}
    #mainPage td.main a:hover img{border:2px solid #abd}
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Dave!

    Another simple trick that worked perfectly...

  4. #4
    SitePoint Member
    Join Date
    Oct 2008
    Location
    India
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in place of Id use class,that is the standard and good for future changes.

  5. #5
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,290
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by rrkjaiswal63 View Post
    in place of Id use class,that is the standard and good for future changes.
    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.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •