Solved

Blue boxes around my linked pictures

Posted on 2009-07-03
6
232 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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to dynamically set the form action using jQuery.

762 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

22 Experts available now in Live!

Get 1:1 Help Now