none
How do I get rid of the blue box around my links?

    Question

  •  I am using Expression web for the first time, (i had dreamweaver before) & I cannot figure out how to get rid of the ugly blue box that surrounds my links. I just want the link to be regular, with no decorations. Just click on the image and go to that link. (i am just starting the page so it is obviously no where near done) Here is a link to the page and the code, if anyone could help. Thanks!

    http://jcautorepair.webs.com/index.htm

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
    <html> 
     
    <head> 
    <meta content="en-us" http-equiv="Content-Language">  
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">  
    <title>JC Auto Repair</title> 
    </head> 
     
    <body bgcolor="#000000">  
     
    <table align="center" style="width: 800px">  
     <tr> 
      <td colspan="2" style="width: 150px">  
      <img alt="JC Auto Repair" height="200" src="../../../JC%20Auto%20Repair/autorepairbenner.png" originalAttribute="src" originalPath="../../../JC%20Auto%20Repair/autorepairbenner.png" width="800"></td> 
     </tr> 
     <tr> 
      <td style="width: 150px">  
      <img alt="Navigation" height="101" src="../../../JC%20Auto%20Repair/navigationauto.png" originalAttribute="src" originalPath="../../../JC%20Auto%20Repair/navigationauto.png" width="150"><br> 
      <img alt="Home" height="40" src="../../../JC%20Auto%20Repair/Home.png" originalAttribute="src" originalPath="../../../JC%20Auto%20Repair/Home.png" width="150"><br> 
      <img alt="Auro Repair &amp; Service" height="40" src="../../../JC%20Auto%20Repair/Autorepair.png" originalAttribute="src" originalPath="../../../JC%20Auto%20Repair/Autorepair.png" width="150"><br> 
      <img alt="Towing" height="40" src="../../../JC%20Auto%20Repair/TowingJC.png" originalAttribute="src" originalPath="../../../JC%20Auto%20Repair/TowingJC.png" width="150"><br> 
      <href="http://jcautorepair.webs.com/ContactUS.htm"><img alt="Contact Us" height="40" src="../../../JC%20Auto%20Repair/ContactUs.png" originalAttribute="src" originalPath="../../../JC%20Auto%20Repair/ContactUs.png" width="150"></a></td>  
      <td style="height: 225px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br> 
      <br></td>  
     </tr> 
     <tr> 
      <td style="width: 150px">&nbsp;</td> 
      <td>&nbsp;</td> 
     </tr> 
     <tr> 
      <td style="width: 150px">&nbsp;</td> 
      <td>&nbsp;</td> 
     </tr> 
     <tr> 
      <td style="width: 150px">&nbsp;</td> 
      <td>&nbsp;</td> 
     </tr> 
     <tr> 
      <td style="width: 150px">&nbsp;</td> 
      <td>&nbsp;</td> 
     </tr> 
     <tr> 
      <td style="width: 150px">&nbsp;</td> 
      <td>&nbsp;</td> 
     </tr> 
     <tr> 
      <td style="width: 150px">&nbsp;</td> 
      <td>&nbsp;</td> 
     </tr> 
     <tr> 
      <td style="width: 150px">&nbsp;</td> 
      <td>&nbsp;</td> 
     </tr> 
    </table> 
     
    </body> 
     
    </html> 
     


     

    Saturday, November 15, 2008 12:55 AM

Answers

  • Right click your image and choose PICTURE PROPERTIES then click the APPEARANCE tab. Change the border to zero.
    • Edited by Miles Anderson Saturday, November 15, 2008 2:06 AM
    • Marked as answer by JandC IW Saturday, November 15, 2008 2:46 AM
    Saturday, November 15, 2008 2:04 AM

All replies

  • A blue border on your images that are hyperlinks is the equivilent of the underline on text links. To remove it from iamges use a img {border: 0; text-decoration: none;} in your css.

    FYI, you should have spaces in your file names that can cause links to break. Remove them, replace the with - or _ and don't use the space bar to add space.That way lies problems cross browser.
    MS MVP Expression http://by-expression.com
    Saturday, November 15, 2008 1:23 AM
  • THanks, those spaces are just there temporarly, and thats just the files from my computer. When i uploaded it to the hoast, i changed the file paths.

    I don't have any css right now, so what should i add to get rid of it?
    Saturday, November 15, 2008 1:33 AM
  •  I added this under my meta tags but it made no difference, the blue box is still there what should i do?
    <style type="text/css">  
    <!--  
    a:img {  
        border: 0;   
        text-decoration: none;  
    }   
    a:link {  
        text-decoration: none;  
    }  
    --> 
    </style> 
     
    Saturday, November 15, 2008 1:42 AM
  • Right click your image and choose PICTURE PROPERTIES then click the APPEARANCE tab. Change the border to zero.
    • Edited by Miles Anderson Saturday, November 15, 2008 2:06 AM
    • Marked as answer by JandC IW Saturday, November 15, 2008 2:46 AM
    Saturday, November 15, 2008 2:04 AM
  • THank you! That fixed it
    Saturday, November 15, 2008 2:46 AM
  • <quote>
    I added this under my meta tags but it made no difference, the blue box is still there what should i do? 
    </quote>

    Because your CSS should be like this:


    <style type="text/css">  
    a, img {  
     border: 0;  
     text-decoration: none;  
    }  
    a:link {  
     text-decoration: none;  
    }  
    </style> 
     

    FrontPage MVP
    Saturday, November 15, 2008 2:55 PM
  • Steve Easton said:

    <quote>
    I added this under my meta tags but it made no difference, the blue box is still there what should i do? 
    </quote>

    Because your CSS should be like this:

    <style type="text/css">  
    a, img {  
     border: 0;  
     text-decoration: none;  
    }  
    a:link {  
     text-decoration: none;  
    }  
    </style> 
     

    FrontPage MVP


    "a, img {  "

    What's the comma for? Doesn't that rule style all anchors and all images, without reference to image context or anchor pseudoclass?

    I know, it's early yet.  ;-)

    cheers,
    scott
    Saturday, November 15, 2008 3:10 PM
  • <quote>
    What's the comma for? Doesn't that rule style all anchors and all images, without reference to image context or anchor pseudoclass?
    </quote>

    Yep, I assumed that's what the OP was trying to do.

    Not that early here on the first coast.
    ;-)


    FrontPage MVP
    Saturday, November 15, 2008 3:27 PM
  • Steve Easton said:

    <quote>
    What's the comma for? Doesn't that rule style all anchors and all images, without reference to image context or anchor pseudoclass?
    </quote>

    Yep, I assumed that's what the OP was trying to do.

    Not that early here on the first coast.
    ;-)


    FrontPage MVP


    Ah, OK, I inferred (Aha! The source of the problem... ;-) from her question, and from the second rule given, that she wanted to remove borders from anchor images and underlines from text anchors. If she wants to remove those properties from all anchors and all images, regardless of anchor pseudoclass, doesn't the second rule become superfluous? Harmless, true, but unnecessary? So...

    a, img {   
     border: 0;   
     text-decoration: none;   
    }   


    covers it all, without needing to also apply the text-decoration rule to the pseudoclass, doesn't it?

    cheers,
    scott

    P.S. Yeah, well I'm in the Eastern zone, too, but "early" is also in the frame of reference. Like, what time one finally got around to crashing on Friday night.  ;-)
    Saturday, November 15, 2008 4:08 PM
  •  add class property to image tag

    <img alt="example" src="images/example.jpg"  width="225" height="150" class="image_style1" />


    control image properties with css

    .image_style1 {
     border-style: none;
    }

    .image_style2 {
     border-style: none;
     margin-top: 3px;
     margin-bottom: 3px;
    }

    Saturday, November 15, 2008 11:35 PM