CSS problem with linked image borders

Hi everyone,

I’ve gotten great help here before with a CSS issue I had.

Basically I found out that some browsers put a default 2px border on linked images, and Chrome doesn’t, so if you don’t define them, there will be cross-browser issues.

I then was shown how to set it so that the borders are defined only for my home page, so that images in my landing pages don’t get affected.

Now I’m working on redesigning the site, and I have a new issue.

http://www.urlgone.com/9f963e/

I want there to be borders on specific clickable images on the home page, but none on others (the logo banner rotator).

I’ve tried every combination of CSS entries and code changes that I know, but I can’t seem to figure it out.

from stylesheet.css:

#mainPage td.main a img {
  border:2px solid #072B8A;
  margin: 0px 0px 2px 0px;
  vertical-align: top;
  }
  
#mainPage td.main a:hover img {
  border:2px solid #95B3D7
  }

part of index2.php:


<body id="mainPage">

<div class="jCarouselLite">
        <ul>
            <li><a href="' . tep_href_link(FILENAME_TWENTY_REASONS_FOR_PURIFIERS) . '">' .  tep_image_original(DIR_WS_IMAGES . 'logos/airpura.jpg', 'Airpura air purifiers') . '</a></li> 
            <li><img src="images/logos/airpura.jpg" alt="Airpura air purifiers" title="Airpura air purifiers" width="156" height="118"></li>
            <li><img src="images/logos/allerair.jpg" alt="AllerAir air purifiers" title="AllerAir air purifiers" width="156" height="118"></li>
            <li><img src="images/logos/nq_industries.jpg" alt="NQ Industries air purifiers" title="NQ Industries air purifiers" width="156" height="118"></li>
            <li><img src="images/logos/filterstream.jpg" alt="FilterStream air purifiers" title="FilterStream air purifiers" width="156" height="118"></li>
            <li><img src="images/logos/amaircare.jpg" alt="Amaircare air purifiers" title="FilterStream air purifiers" width="156" height="118"></li>
            <li><img src="images/logos/germ_guardian.jpg" alt="Germ Guardian air purifiers" title="Germ Guardian air purifiers" width="156" height="118"></li>
            <li><img src="images/logos/building_health_check.jpg" alt="Building Health Check air quality tests" width="156" height="118"></li>
            <li><img src="images/logos/dylos.jpg" alt="Dylos air quality monitors" title="Dylos air quality monitors" width="156" height="118"></li>
            <li><img src="images/logos/haltech.jpg" alt="HalTech formaldehyde monitors" width="156" title="HalTech formaldehyde monitors" height="118"></li>
        </ul>
</div>

...

<a href="' . tep_href_link(FILENAME_TWENTY_REASONS_FOR_PURIFIERS) . '">' . 
 tep_image_original(DIR_WS_IMAGES . 'home_page/25-reasons-you-need-a-first-rate-air-purifier.jpg', 'See 25 reasons you need a first-rate air purifier!') . '</a>&nbsp; 
<a href="' . tep_href_link(FILENAME_SPECIALS) . '">' . 
 tep_image_original(DIR_WS_IMAGES . 'home_page/air-purifier-specials.jpg', 'Check back often to see all our specials!') . '</a>&nbsp;
<a href="' . tep_href_link(FILENAME_EDITORS_REVIEW_TOP_10) . '">' . 
 tep_image_original(DIR_WS_IMAGES . 'home_page/editors-review-top-10-air-purifiers.jpg', 'Editor\\'s Review: Top 10 Air Purifiers') . '</a>&nbsp;
<a href="' . tep_href_link(FILENAME_ABOUT_US) . '">' . 
 tep_image_original(DIR_WS_IMAGES . 'home_page/15-reasons-to-shop-with-air-purifier-nation.jpg', 'See 15 good reasons to shop with Air Purifier Nation!') . '</a>&nbsp;  
<a href="' . tep_href_link(FILENAME_CUSTOMER_TESTIMONIALS) . '">' . 
 tep_image_original(DIR_WS_IMAGES . 'home_page/customer-testimonials.jpg', 'Read testimonials from some of our satisfied customers!') . '</a>

I know I’m mixing tables and divs up throughout the code, but everything seems to work so far except for this issue. I thought I could set the borders for the td.main img entries to 0 and then define a new class or div for the image links in the middle of the page, but I can’t get it to work.

Any suggestions how to put borders for just a few select images on the home page, but not others on the page or the rest of the site?

One more more quick unrelated question:

<a href="' . tep_href_link(FILENAME_CUSTOMER_TESTIMONIALS) . '">' . 
 tep_image_original(DIR_WS_IMAGES . 'home_page/customer-testimonials.jpg', 'Read testimonials from some of our satisfied customers!') . '</a>

In this PHP image link there’s a title tag for the image. Is there a way to add alt text or is the alt text the same as the title tag here?

Thanks!

I actually figured this one out myself. Simple answer of course… Removed <body id=“mainPage”> and assigned separate classes for images in jCarouselLite and in the row below, which I put into a table.

Glad you sorted it and sorry we didn’t reply first :slight_smile:

Thanks Paul. And no problem…Trial and error is a good way to learn the basics anyway!

Nick