How do I put border on some images and no border on others?

This is my current setup. I have no borders on any image.

In my tpl_main_page.php I have the following code:

<a href="/"><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="Home Page" title="Home Page" width="150" height="44" border="0" /></a>
```You will note that I stipulate that the border =”0”
(Also there are additional "spacer.gif " images calls in tpl_main_page.php that complete a clickable menu bar at the top of the page.)
 
In my stylesheet.css I have the following code:

a img {border: none; }

a img {border: 2px solid #34352F; }

   
  I am not able to correct this.  Is there a way I can specify that my spacer.gif image does not get the img border that I specify in my css?
   
   
  Sawhorse
Below are the particulars for my site.

Give your spacer gif a CSS class and then exclude it from the others with border: none;

Great idea. - Now to implement.

I added the class clearborder to my tpl_main_page.php:

<a class="clearborder" href="/"><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="Home Page" title="Home Page" width="150" height="44" border="0" /></a>
```I then when to my stylesheet.css and added the following code:```
.clearborder {border: none; } 
```I also changed in my stylesheet.css the img code to:```
a img {border: 2px solid silver; }
```Of course it did not work.  I assume an error in my coding is why it did not work.  Could you advise? Thanks

Sawhorse

I added the class clearborder to my tpl_main_page.php:
Use the developers tool kit and search for spacer.gif and make sure that the class is defined for it in all calls

Just to be clear here is the total code with just one addition of "clearborder":

<div id="navMain" class="<?php echo $menuclass;?>">
        <a class="clearborder" href="/"><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="Home Page" title="Home Page" width="150" height="44" border="0" /></a>
        
        <?php if ($_SESSION['customer_id']) { ?>
        
        <a href="index.php?main_page=login"><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="My Account" title="My Account" width="94" height="44" border="0" /></a>
        <a href="index.php?main_page=logoff"><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="Log Out" title="Log Out"  width="68" height="44" border="0" /></a>
        
                <?php
              } else {
                if (STORE_STATUS == '0') {
            ?>

        <a href="index.php?main_page=login"><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="My Account" title="My Account" width="94" height="44" border="0" /></a>
        <a href="index.php?main_page=login"><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="Log In" title="Log In" width="68" height="44" border="0" /></a>
        
        <?php } } ?>
        <a href="index.php?main_page=shop"><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="Shop On Line" title="Shop On Line" width="45" height="44" border="0" /></a>
        <a href="index.php?main_page=shopping_cart"><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="Shopping Cart" title="Shopping Cart" width="115" height="44" border="0" /></a>
        <a href="index.php?main_page=checkout_shipping"><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="Checkout Now" title="Checkout Now" width="80" height="44" border="0" /></a>
    <!-- end top nav --></div>
    
<!-- end navigation wrapper --></div>
```Sawhorse

This is how it looks now - however I still see the borders.

<div id="navMain" class="<?php echo $menuclass;?>">
        <a class="clearborder" href="/"><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="Home Page" title="Home Page" width="150" height="44" border="0" /></a>
        
        <?php if ($_SESSION['customer_id']) { ?>
        
        <a class="clearborder" href="index.php?main_page=login"><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="My Account" title="My Account" width="94" height="44" border="0" /></a>
        <a class="clearborder" href="index.php?main_page=logoff"><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="Log Out" title="Log Out"  width="68" height="44" border="0" /></a>
        
                <?php
              } else {
                if (STORE_STATUS == '0') {
            ?>

        <a class="clearborder" href="index.php?main_page=login"><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="My Account" title="My Account" width="94" height="44" border="0" /></a>
        <a class="clearborder" href="index.php?main_page=login"><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="Log In" title="Log In" width="68" height="44" border="0" /></a>
        
        <?php } } ?>
        <a class="clearborder" href="index.php?main_page=shop"><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="Shop On Line" title="Shop On Line" width="45" height="44" border="0" /></a>
        <a class="clearborder" href="index.php?main_page=shopping_cart"><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="Shopping Cart" title="Shopping Cart" width="115" height="44" border="0" /></a>
        <a class="clearborder" href="index.php?main_page=checkout_shipping"><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="Checkout Now" title="Checkout Now" width="80" height="44" border="0" /></a>
    <!-- end top nav --></div>
    
<!-- end navigation wrapper --></div>
```Sawhorse

kobra:

Use the developers tool kit and search for spacer.gif and make sure that the class is defined for it in all calls

Just to let you know. I did use the developers tool kit and did search for spacer.gif. The only instance of spacer.gif is in my tpl_main_page.php. I have included class="clearborder" for all known spacer.gif occurrences.

Sawhorse

OK, I have figured out why it did not work!!! The old location of class="clearborder" was incorrect. It should have been after border="0" . See below for correct location.

<div id="navMain" class="<?php echo $menuclass;?>">
        <a href="/" ><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="Home Page" title="Home Page" width="150" height="44" border="0" class="clearborder" /></a>
        
        <?php if ($_SESSION['customer_id']) { ?>
        
        <a href="index.php?main_page=login"><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="My Account" title="My Account" width="94" height="44" border="0" class="clearborder" /></a>
        <a href="index.php?main_page=logoff"><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="Log Out" title="Log Out"  width="68" height="44" border="0" class="clearborder" /></a>
        
                <?php
              } else {
                if (STORE_STATUS == '0') {
            ?>

        <a href="index.php?main_page=login"><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="My Account" title="My Account" width="94" height="44" border="0" class="clearborder" /></a>
        <a href="index.php?main_page=login"><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="Log In" title="Log In" width="68" height="44" border="0"class="clearborder" /></a>
        
        <?php } } ?>
        <a href="index.php?main_page=shop"><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="Shop On Line" title="Shop On Line" width="45" height="44" border="0" class="clearborder" /></a>
        <a href="index.php?main_page=shopping_cart"><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="Shopping Cart" title="Shopping Cart" width="115" height="44" border="0" class="clearborder" /></a>
        <a href="index.php?main_page=checkout_shipping"><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="Checkout Now" title="Checkout Now" width="80" height="44" border="0" class="clearborder" /></a>
    <!-- end top nav --></div>
    
<!-- end navigation wrapper --></div>
```Sawhorse

However, still have a one border problem. It is the logo in the header. For me the code is complicated. I just have not figured out were to place class="clearborder" to remove the border around the blank image.

Could someone look and give me some insight?
In my tpl_main_page.php: ```php

          }

?>

Everyone,
I tried everything I can think of to remove the border on the logo.gif using class="clearborder" however, nothing works. I mean I tried everything.

Does anyone have an idea how I can get the border that is associated with **a img **in CSS to not be associated with the logo.gif in the code shown in the previous post?

Sawhorse

I mean I tried everything.
Except the one that will work...
Post what you did try

Korba,
That will take me a bit to put together. I will get that done tomorrow. Sleep is calling me.

Thanks for the reply. Later BYE

Sawhorse

Kobra,
I lied a "little bit". Look below for the correct location of class="clearborder". However, if you notice there is a possible problem.

<div id="logoWrapper">
    <div id="logo" class="clearborder><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>
    <div id="taglineWrapper">
<?php
              if (HEADER_SALES_TEXT != '') {
?>
      <div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
<?php
              }
?>
</div>
<!-- end logoWrapper --></div>
```Can you see it?  I did not a first. 
When I started placing the class statement in various locations I used the following code: ```php
class="clearborder"
``` However, **NOTHING WORKED.  REMEMBER I TRIED EVERYTHING. **However, going over all the locations for a double check for a second time, I did not correctly copy/paste the class statement and I did the following: ```php
class="clearborder
``` Notice there is no second quote after clearborder.  The funny thing is that PHP likes the fact that there is no second quote.  If I put the second quote in the class fails and I get the border around the logo. Without the second quote it works!

Now that we know that something works.  Could you/someone tell me why?

Sawhorse

Of course this lack of a " does not pass W3c ** Markup Validation Service. I have 10 Errors, 1 warning all dealing with just this issue.

Sawhorse

  **

Even it it works I can not let those error exist on the site. There must be a better way to get this to work other than using incorrect PHP code.

Sawhorse

Does anyone know what is happening with this class statement?

What am I doing wrong?

Sawhorse

Is there any additional information that I can give so that someone could help point me in the correct direction?

Sawhorse

currently , if i specify border for a img {} rule .. i see only extra border around your LOGO ..

to remove that , you can add following to your stylesheet.css

#logo img{
border: none;
}

Tony_sar,
Your help below was perfect.

tony_sar:

#logo img{ border: none; }

It worked like a charm. What do you call the # statement. I would like to learn more about it.

Again thanks for your help.

Sawhorse

What do you call the # statement
Basically, 2 items

# = Tag

. = Class