Get rid of border line around linked image

Discussion in 'HTML' started by Kian, Jun 30, 2003.

  1. Kian

    Kian Guest

    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
    Kian, Jun 30, 2003
    #1
    1. Advertising

  2. Why don't you try some old fashioned HTML

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

    That should do it.

    Rgds

    Ivo

    "Kian" <> wrote in message
    news:iR%La.25280$...
    > 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
    >
    >



    ---
    Outgoing mail is certified Virus Free.
    Checked by AVG anti-virus system (http://www.grisoft.com).
    Version: 6.0.493 / Virus Database: 292 - Release Date: 25/06/2003
    Ivailo Chakarov, Jun 30, 2003
    #2
    1. Advertising

  3. Kian

    Kian Guest

    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


    "Ivailo Chakarov" <> wrote in message
    news:vb0Ma.780$...
    > Why don't you try some old fashioned HTML
    >
    > <img src="picture.jpg" border="0" />
    >
    > That should do it.
    >
    > Rgds
    >
    > Ivo
    >
    > "Kian" <> wrote in message
    > news:iR%La.25280$...
    > > 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
    Kian, Jun 30, 2003
    #3
  4. Kian

    Dylan Parry Guest

    Kian wrote:

    > 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.

    --
    Dylan Parry - http://www.DylanParry.com

    Not playing any music, but savouring the silence.
    Dylan Parry, Jun 30, 2003
    #4
  5. Kian

    brucie Guest

    brucie, Jun 30, 2003
    #5
  6. On Mon, 30 Jun 2003 19:04:46 GMT, "Kian" <> wrote:

    >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">
    William Starr Moake, Jun 30, 2003
    #6
  7. In article <ng0Ma.25418$>,
    says...
    > "Ivailo Chakarov" <> wrote in message
    > news:vb0Ma.780$...
    > > "Kian" <> wrote in message
    > > news:iR%La.25280$...

    ....
    > > >
    > > > 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:

    ....
    > 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
    Jacqui or (maybe) Pete, Jun 30, 2003
    #7
  8. Kian

    Sid Ismail Guest

    On Mon, 30 Jun 2003 19:33:39 GMT, "Kian" <> wrote:

    > 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
    Sid Ismail, Jun 30, 2003
    #8
  9. Kian

    Dylan Parry Guest

    William Tasso wrote:

    >> "border: 0px;" in your CSS.

    >
    > 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 :eek:P Incidently, is the "none" keyword a valid
    value in this too? (border: 0 none;)

    --
    Dylan Parry - http://www.DylanParry.com

    Not playing any music, but savouring the silence.
    Dylan Parry, Jul 1, 2003
    #9
  10. William Tasso, Jul 1, 2003
    #10
  11. Dylan Parry wrote:
    > William Tasso wrote:
    >
    >>> "border: 0px;" in your CSS.

    >>
    >> 0px?

    >
    > 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 :eek: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.

    --
    William Tasso - http://www.WilliamTasso.com
    William Tasso, Jul 1, 2003
    #11
  12. David Dorward, Jul 1, 2003
    #12
  13. Kian

    brucie Guest

    In post <bdqjgn$u95fj$>
    brucie said...

    >> border-color: transparent;

    ^^^^^^^^^^^ 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



    --
    brucie a. blackford. 01/July/2003 10:11:44 am kilo.
    http://loser.brucies.com/
    brucie, Jul 1, 2003
    #13
  14. brucie wrote:

    > In post <bdqj8k$ff5$1$>
    > David Dorward said...
    >
    >
    >> border-color: transparent;

    > ^^^^^^^^^^^ 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.

    --
    David Dorward http://david.us-lot.org/
    Redesign in progress: http://stone.thecoreworlds.net/
    Microsoft announces IE is dead (so upgrade):
    http://minutillo.com/steve/weblog/2003/5/30/microsoft-announces-ie-is-dead
    David Dorward, Jul 1, 2003
    #14
  15. Kian

    brucie Guest

    In post <bdqjri$v12m4$>
    brucie said...

    >> border-color: transparent;
    >> ^^^^^^^^^^^ 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


    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 a. blackford. 01/July/2003 10:22:00 am kilo.
    http://loser.brucies.com/
    brucie, Jul 1, 2003
    #15
  16. Kian

    brucie Guest

    In post <bdqk9u$gco$1$>
    David Dorward said...

    >>> border-color: transparent;

    >> ^^^^^^^^^^^ invalid


    > Actually, it isn't.


    i know see my other posts


    --
    brucie a. blackford. 01/July/2003 10:24:53 am kilo.
    http://loser.brucies.com/
    brucie, Jul 1, 2003
    #16
  17. Kian

    Sid Ismail Guest

    On Tue, 1 Jul 2003 00:54:33 +0100, "William Tasso" <> wrote:

    > Dylan Parry wrote:
    > > William Tasso wrote:
    > >
    > >>> "border: 0px;" in your CSS.
    > >>
    > >> 0px?

    > >
    > > 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"



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

    Sid
    Sid Ismail, Jul 1, 2003
    #17
  18. Kian

    mark | r Guest

    > > Dylan Parry wrote:
    > > > William Tasso wrote:
    > > >
    > > >>> "border: 0px;" in your CSS.
    > > >>
    > > >> 0px?
    > > >
    > > > 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"

    >
    > 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
    mark | r, Jul 1, 2003
    #18
  19. Kian

    SickHabitz

    Joined:
    Nov 27, 2012
    Messages:
    1
    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
    SickHabitz, Nov 27, 2012
    #19
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    23
    Views:
    928
    Neredbojias
    Mar 28, 2006
  2. Martin
    Replies:
    1
    Views:
    1,042
    =?ISO-8859-1?Q?J=F8rgen_Cederberg?=
    Jun 29, 2004
  3. Kevin Audleman

    Getting rid of border around image

    Kevin Audleman, Feb 10, 2008, in forum: HTML
    Replies:
    12
    Views:
    3,307
    Jonathan N. Little
    Feb 13, 2008
  4. Jack Jarmush
    Replies:
    3
    Views:
    4,557
    Jack Jarmush
    Aug 3, 2009
  5. TS
    Replies:
    5
    Views:
    691
    Jeffrey Tan[MSFT]
    Aug 10, 2005
Loading...

Share This Page