Solved

Blue boxes around my linked pictures

Posted on 2009-07-03
6
233 Views
Last Modified: 2013-11-19
On some of my images that I use as links a blue border is created around the image. How do I remove this? What is causing this?

An example is the Play Football logo at the bottom of  this page:

http://www.ohioflagfootball.com/index.asp

Thanks.
0
Comment
Question by:elliottbenzle
6 Comments
 
LVL 6

Accepted Solution

by:
Tempelman earned 500 total points
ID: 24770945
Add border="0" to the hyperlink.... By default HTML will create that ugly blue border when you use a picture as a URL ;).
0
 
LVL 13

Expert Comment

by:Murali Murugesan
ID: 24770995
To add on to previous experts comments,

write the css for img and anchor in a generic fashion to remove the borders. Add below to ur application CSS file.

a{
    border:0;
}

img{
  border:0;
}


In case of altering border for certain images .. you can use css class


.imgNoBorder{
  border:0;
}

.imgBorder{
  border:2px;
}

<img src="a.jpg' class="imgNoBorder"/>

<img src="b.jpg' class="imgBorder"/>

-Murali*


-Murali*
0
 
LVL 13

Expert Comment

by:Murali Murugesan
ID: 24771005
Oops missed ur fix part.To fix the image border that  you mentioned you need to add border="0" for img tag. Below would fix ur current problem

<img height="152" width="250" src="images/widget_play_football_250x152.gif" border="0"/>

-Murali*
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 1

Expert Comment

by:ibs06t
ID: 24771290
when ever we give hyperlink link to image tag that border will appear
if u need to remove border to entire website

img
{
border:0px;
}

otherwise  u want remove a specific image
<img src="images/Newgif" alt="New Image" style="border:0px;" />

img

{

border:0px;

}
 

<img src="images/Newgif" alt="New Image" style="border:0px;" />

Open in new window

0
 
LVL 15

Expert Comment

by:deepaknet
ID: 24771710
Just append border=0 for your img tag.

Whenever an image is made to serve as a hyperlink, this happens.
0
 
LVL 4

Author Closing Comment

by:elliottbenzle
ID: 31599498
Thanks.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now