Get rid of border line around linked image

[Kian]

Hi,

When I add a link to a text, I know that I can get rid of "link underline"
by setting text-decoration="none" in CSS.

When I add a link to an image, how do I get rid of the "link border"? (Note:
The border doesn't exist before I add a link...)

Thanks,
Kian

 

[Ivailo Chakarov]

Why don't you try some old fashioned HTML

<img src="picture.jpg" border="0" />

That should do it.

Rgds

Ivo

 

[Kian]

Thanks Ivo.

I am thinking of doing something like the link to appear without any
decoration, but apply decoration when the mouse arrow hover it.

Regards,
Kian

 

[Dylan Parry]

Hi,

When I add a link to a text, I know that I can get rid of "link underline"
by setting text-decoration="none" in CSS.

This shoud be "text-decoration: none;"

When I add a link to an image, how do I get rid of the "link border"?
(Note: The border doesn't exist before I add a link...)

"border: 0px;" in your CSS.

 

[brucie]

When I add a link to an image, how do I get rid of the "link border"? (Note:
The border doesn't exist before I add a link...)

border:0;

Links Want To Be Links
http://www.cs.tut.fi/~jkorpela/www/links.html

 

[William Starr Moake]

Hi,

When I add a link to a text, I know that I can get rid of "link underline"
by setting text-decoration="none" in CSS.

When I add a link to an image, how do I get rid of the "link border"? (Note:
The border doesn't exist before I add a link...)

Add zero border width to image tag like this:
<img src="image.gif" width="200" height="200" border="0">

 

[Jacqui or (maybe) Pete]

....
I am thinking of doing something like the link to appear without any
decoration, but apply decoration when the mouse arrow hover it.

Best bet is to put a border around the img of the same color as the
background, and then change it on hover. That way things don't jump
around:

body {
background: fuchsia;
color: aqua;
}
a img { border: solid 3px fuchsia; }
a:hover img { border: solid 3px aqua; }

This is useful reading:

http://www.xs4all.nl/~wijnands/nnq/nquote.html

 

[Sid Ismail]

Thanks Ivo.

I am thinking of doing something like the link to appear without any
decoration, but apply decoration when the mouse arrow hover it.

Here's a trick for you: In your CSS stylesheet, have a:link, a:visited and
a:active set to text-decoration:none. a:hover to {color:yellow;} say.

Now your code
<a href="abc.html"><img src="alphabet.gif" height=80 width=80 border=0
alt="link to the alphabet"> </a>

Notice the space before </a>? Try it.

Sid

 

[Dylan Parry]

0px?

It doesn't require the px, that's true, but it doesn't make it invalid ;o)

Okay, so maybe "border: 0;" would be a better solution, but I still
stand with my first one P Incidently, is the "none" keyword a valid
value in this too? (border: 0 none

 

[William Tasso]

"border: 0px;" in your CSS.

0px?

CSS Units: http://www.htmlhelp.com/reference/css/units.html

 

[William Tasso]

It doesn't require the px, that's true, but it doesn't make it
invalid ;o)

I know, I know - just practice-picking class="nit"

Okay, so maybe "border: 0;" would be a better solution, but I still
stand with my first one P
;o)

Incidently, is the "none" keyword a valid
value in this too? (border: 0 none

why not? although it seems pointless - redundant even. but what about
{border: 0 none #f00;} any takers? I doubt I'll ever get round to testing
that.

 

[David Dorward]

Okay, so maybe "border: 0;" would be a better solution, but I still
stand with my first one P Incidently, is the "none" keyword a valid
value in this too? (border: 0 none

border-width: 0;
border-style: none;
border-color: transparent;

 

[brucie]

^^^^^^^^^^^ invalid

no its not, i was looking at the wrong bit. but then i wonder why its
invalid for the longhand border color properties but valid for the
shorthand border properties.

'border-top-color', 'border-right-color', 'border-bottom-color',
'border-left-color'
Value: <color> | inherit

'border-color'
Value: <color>{1,4} | transparent | inherit

http://www.w3.org/TR/REC-CSS2/box.html#border-color-properties

 

[David Dorward]

In post <[email protected]>
David Dorward said...


^^^^^^^^^^^ invalid

Actually, it isn't.

From the spec:

'border-color'
Value: <color>{1,4} | transparent | inherit
Initial: see individual properties
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual

I seem to remember something about places for "transparent" to be added to
the list of colours for CSS 3, so it can be used anywhere a colour can be
used rather then just in specific places.

 

[brucie]

no its not, i was looking at the wrong bit. but then i wonder why its
invalid for the longhand border color properties but valid for the
shorthand border properties.

'border-top-color', 'border-right-color', 'border-bottom-color',
'border-left-color'
Value: <color> | inherit

'border-color'
Value: <color>{1,4} | transparent | inherit

http://www.w3.org/TR/REC-CSS2/box.html#border-color-properties

its fixed in the errata. i wish they would just change the f$*%ing
page.

http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html

 

[brucie]

Actually, it isn't.

i know see my other posts

 

[Sid Ismail]

I know, I know - just practice-picking class="nit"

Its like adding the ; at the end of a CSS definition. If you add to it, the
; is there. I also like 0px

Sid

 

[mark | r]

Its like adding the ; at the end of a CSS definition. If you add to it, the
; is there. I also like 0px

Sid

a cool solution is

a img {border:0px;}

it makes all your image links borderless looks crap in dreamweaver tho.
mark

 

[SickHabitz]

i recommend to just create a css style **** with the following properties

@charset "utf-8";
.noborders {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: 0;
border-right-style: 0;
border-bottom-style: 0;
border-left-style: 0;
}

and just add it to all your images with links.

its easier this way if you are using dreamweaver but if you are a code huys just add border"0" to every image and that covers it

it looks like you are more like a css/dreamweaver guy good luck