Using Images as Links to Other Pages 2

[Krus1972]

I am using an image as a link. The IMG tag with the SRC attribute is placed after the Anchor Tag.

The link and everything is working fine.

When the Image is displayed on the web page it appears with a blue border around it. The blue border is about 2 pixels thick. The browesr is naturally placing this border around the image much like it naturally places an underline under TEXT (Anchor) links.

I believe I have to define a STYLE to remove the border around my image links.

How do I remove this blue border without effecting the image display and the "href" operation?

Thank you.

 

[Biffy13]

Try

<img src="yourpic" style="border: 0px;" />

Or in your stylesheet if you are using one:

img {
border: 0px;
}

Or if that doesn't do the trick:

img a {
border: 0px;
}

 

[Krus1972]

Biffy13,

No this did not work. The border is still there. I have a seperate style defined for this and I still cannot get the border to disappear. My style in my stylesheet is listed below:

a.IMAGE:link
{
COLOR: #FFFFFF;
border: 0px;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px;
TEXT-DECORATION: none;
}

a.IMAGE:visited
{
COLOR: #FFFFFF;
border: 0px;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px;
TEXT-DECORATION: none;

}

a.IMAGE:hover
{
COLOR: #FFFFFF;
border: 0px;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px;
TEXT-DECORATION: none;

}

a.IMAGE:active
{
COLOR: #FFFFFF;
border: 0px;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px;
TEXT-DECORATION: none;

}

 

[Biffy13]

Woah there! You don't need all that code, just use:

img {
border: 0px;
}

or if you want it to apply just to one image with an id of say myimage:

#myimage {
border: 0px;
}

or put it in a class:

.myimage {
border: 0px;
}

 

[Krus1972]

Biffy13,

Actually I've tried that after your first response and it still does not work. My style now reads:

a.IMAGE:link
{
border: 0px;
}

a.IMAGE:visited
{
border: 0px;
}

a.IMAGE:hover
{
border: 0px;
}

a.IMAGE:active
{
border: 0px;
}

In this case I place the "Class" within the Anchow tage. It still does not work.

Jeff

 

[Foamcow]

You are applying the border:0 to the link rather than the image.

try

a.IMAGE img {
 border:0;
}

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[Foamcow]

You could make things alot less confusing by not adding that IMAGE class to be honest. I'd guess it's not actually necessary for what you want to do.

So just use, as I think was already pointed out by Biffy13

a img {
   border:0;
}

This will have the effect of preventing borders around any linked images.

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[Krus1972]

Biffy13,

Ok I got it. I made a standard IMAGE class OUTSIDE of the anchor schema (a.xxx:link,hoover,visted, etc..). I placed the CLASS tag within the IMG tag that follows the Anchor tag.

Thanks for your help,
Jeff

 

[Foamcow]

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[itlama]

I wonder whether you gentlemen are talking about that dotted line rectanglur box, that appears around your links, which falls on consecutive links, (text or image), when you tab successively.

If yes, I can't remove this box either (even trying e.g.

img {
border: 0px;
}

If not, what's your opinion of this box, is it a merit? This somewhat 'scars' my otherwise seamless pictures.

(Esp. for my websites using ancient 'mortized' methods, i.e. highly sliced pictures glued together as HTML Tables. Maybe nowaday's CSS purist sites won't have same problem?? )

 

[Foamcow]

Nope. This is about the border that browsers put around images to denote they are links.

The dotted border you refer to is to do with element focus.

If I remember correctly there was a recent, heated and amusing discussion here on that very subject.

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[mkrausnick]

I don't think this is about image borders - it's about link style. Use 'text-decoration:none' in place of 'border:0' and see if that works.

Mike Krausnick
Dublin, California

 

[Foamcow]

When the Image is displayed on the web page it appears with a blue border around it. The blue border is about 2 pixels thick. The browesr is naturally placing this border around the image much like it naturally places an underline under TEXT (Anchor) links.

The problem is about the blue border that a browser will, by default put around an image that is within an <a> tag.

The way to remove this was shown in the very first reply by Biffy13, namely:

Try

<img src="yourpic" style="border: 0px;" />

Or in your stylesheet if you are using one:

img {
border: 0px;
}

The attempt by Krus1972 did not work because he/she was applying the border modification to the <a> element rather than the <img> element.

I pointed out that Krus1972 seems to be making things overly complex by introducing a class, namely ".IMAGE" to denote an image. It isn't necessary. One can simply refer to the <img> element. Thus:

a img {
    border:0;
}

This will ONLY remove the border from <img> elements within <a> elements. It will prevent the browser putting a thick blue border around the image since we have told it that all images within <a> elements have no border.

We could, if we desired say

a img {
    border:1px dotted #ff9933;
}

Which would put a nice dotted, orange border around any <img> element within an <a> element.

It needs to be no more complex than that unless you also wish to have some linked images with a border. In which case either a class is necessary (maybe that is why Krus1972 made that .IMAGE class) or use a descendent selector such as

#contentArea a img {
    border:0;
}

The dotted line that appears around links when they have focus (in some browsers) is another subject.

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[Foamcow]

Thank you to whoever gave me the Star. But Biffy13 was the one to answer the question. Nobody listened to what he/she said though.

So a Star for Biffy13 too.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[Biffy13]

Thanks for the star Foamcow