img scr tag: how to specify the border color?

Discussion in 'HTML' started by Michael Westphal, Jun 16, 2004.

  1. Hello folks,


    I'm a newby in webdesign and have a question:

    <a href="Bild0278.jpg" target="_blank">
    <img src="Bild0278.jpg" width="100"
    height="75" alt="Vorschau" border="1" bordercolor="black">
    </a>

    My browser doesn't make a black border round my picture.

    What is wrong?

    thx for your help

    best regards,

    Micha


    -------------
    People who think to be too important for small tasks are often too small for
    important tasks!
     
    Michael Westphal, Jun 16, 2004
    #1
    1. Advertising

  2. Michael Westphal wrote:

    > height="75" alt="Vorschau" border="1" bordercolor="black">
    > My browser doesn't make a black border round my picture.


    > What is wrong?


    You are guessing at attributes instead of using the manual
    <http://w3.org/TR/html4/>, checking your got your syntax correct
    <http://validator.w3.org/> and using a presentation tool for presentation
    <http://w3.org/TR/CSS2/>, <http://dorward.me.uk/www/css/#tutorials>


    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
     
    David Dorward, Jun 16, 2004
    #2
    1. Advertising

  3. I've forgotten something:

    I meant:

    my browser doesn't make a BLACK border. It makes a yellow border. I have
    specified a black one earlier in the text. And now it can't switch back to
    black, it seems.

    Micha
     
    Michael Westphal, Jun 16, 2004
    #3
  4. Michael Westphal

    Neal Guest

    On Wed, 16 Jun 2004 21:52:43 +0200, Michael Westphal
    <> wrote:

    > Hello folks,
    >
    >
    > I'm a newby in webdesign and have a question:
    >
    > <a href="Bild0278.jpg"
    > target="_blank">
    > <img src="Bild0278.jpg" width="100"
    > height="75" alt="Vorschau" border="1" bordercolor="black">
    > </a>
    >
    > My browser doesn't make a black border round my picture.
    >
    > What is wrong?


    "bordercolor" on img makes no sense. The way to do this properly is using
    CSS.

    If you use an external stylesheet, it would read:

    img.special {border: 3px black solid;}

    Or, you can put it in your document's head:

    <style>
    img.special {border: 3px black solid;}
    </style>

    In either case the HTML is:

    <img src="..." width="100" height="75" alt="Vorschau" class="special">

    Or, you can add it to the tag itself.

    <img src="..." width="100" height="75" alt="Vorschau" style="border: 3px
    black solid;">

    External is preferred, head next, in the tag last, as it's easier to
    change thesite's style when the styles are all in one place.
     
    Neal, Jun 16, 2004
    #4
  5. Hi Neal,

    You are great!

    Many thanks!

    best wishes!

    Micha

    --
    Wer sich zu wichtig hält für kleine Arbeiten
    ist oft zu klein für wichtige Arbeiten.

    (Jaques Tati)
    "Neal" <> schrieb im Newsbeitrag
    news:eek:...
    > On Wed, 16 Jun 2004 21:52:43 +0200, Michael Westphal
    > <> wrote:
    >
    > > Hello folks,
    > >
    > >
    > > I'm a newby in webdesign and have a question:
    > >
    > > <a href="Bild0278.jpg"
    > > target="_blank">
    > > <img src="Bild0278.jpg" width="100"
    > > height="75" alt="Vorschau" border="1" bordercolor="black">
    > > </a>
    > >
    > > My browser doesn't make a black border round my picture.
    > >
    > > What is wrong?

    >
    > "bordercolor" on img makes no sense. The way to do this properly is using
    > CSS.
    >
    > If you use an external stylesheet, it would read:
    >
    > img.special {border: 3px black solid;}
    >
    > Or, you can put it in your document's head:
    >
    > <style>
    > img.special {border: 3px black solid;}
    > </style>
    >
    > In either case the HTML is:
    >
    > <img src="..." width="100" height="75" alt="Vorschau" class="special">
    >
    > Or, you can add it to the tag itself.
    >
    > <img src="..." width="100" height="75" alt="Vorschau" style="border: 3px
    > black solid;">
    >
    > External is preferred, head next, in the tag last, as it's easier to
    > change thesite's style when the styles are all in one place.
     
    Michael Westphal, Jun 16, 2004
    #5
  6. "Michael Westphal" <> wrote:

    > <a href="Bild0278.jpg"
    > target="_blank">
    > <img src="Bild0278.jpg"
    > width="100"
    > height="75" alt="Vorschau" border="1" bordercolor="black">
    > </a>
    >
    > My browser doesn't make a black border round my picture.
    >
    > What is wrong?


    Quite a lot. To start with, you are using the width and height attributes
    to shrink the image. This is absurd, since the browser needs to load the
    image and then scale it. Use image processing software to create a real
    thumbnail, i.e. a reduced-size version of the image.

    Don't use the target attribute until you know what it really means.
    (And when you know that, you won't use it, except in rare special
    occasions.)

    You don't need the border and bordercolor attributes. The browser
    automatically puts a border around an image that is a link, using link
    colors. Think twice before changing link colors and related issues from
    the browser defaults, and then reject the idea. (OK, OK, for images there
    might be special considerations.)

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
     
    Jukka K. Korpela, Jun 16, 2004
    #6
  7. Michael Westphal

    Neal Guest

    On Wed, 16 Jun 2004 23:15:47 +0200, Michael Westphal
    <> wrote:

    > Hi Neal,
    >
    > You are great!
    >
    > Many thanks!
    >
    > best wishes!
    >
    > Micha
    >



    Check out http://www.w3schools.com/css/default.asp for more...
     
    Neal, Jun 17, 2004
    #7
  8. Jukka K. Korpela wrote:
    > "Michael Westphal" <> wrote:
    >> <img src="Bild0278.jpg"
    >> width="100"
    >>height="75" alt="Vorschau" border="1" bordercolor="black">

    > To start with, you are using the width and height attributes
    > to shrink the image.


    How do you know? I don't see a URL listed anywhere.
     
    Leif K-Brooks, Jun 17, 2004
    #8
  9. Leif K-Brooks <> wrote:

    > Jukka K. Korpela wrote:
    >> "Michael Westphal" <> wrote:
    >>> <img src="Bild0278.jpg"
    >>> width="100" height="75" alt="Vorschau"
    >>> border="1" bordercolor="black">

    >> To start with, you are using the width and height attributes to
    >> shrink the image.

    >
    > How do you know? I don't see a URL listed anywhere.


    The <a> markup around the <img> element points to the same URL as the
    <img> element, i.e. the image is a link to itself. This hardly makes any
    sense for a 100 by 75 pixels image, so my crystal ball is pretty sure
    about the conclusion. (And the alt attribute value means 'preview', which
    is hardly useful to people who do not see the image but tells about the
    author's intention of using a thumbnail.)

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
     
    Jukka K. Korpela, Jun 17, 2004
    #9
  10. Hello Jukka,

    Yes, I've already noticed this yesterday as I checked my work on the server
    in the web.
    It took quite long to show the "thumbnails".

    The target attribute was in that text I cut from an example. You are right,
    I don't know the purpose.

    Thx,

    Micha
     
    Michael Westphal, Jun 17, 2004
    #10
  11. Michael Westphal

    Neal Guest

    On Thu, 17 Jun 2004 06:14:02 +0000 (UTC), Jukka K. Korpela
    <> wrote:

    > Leif K-Brooks <> wrote:
    >> Jukka K. Korpela wrote:
    >>> To start with, you are using the width and height attributes to
    >>> shrink the image.

    >> How do you know? I don't see a URL listed anywhere.

    > The <a> markup around the <img> element points to the same URL as the
    > <img> element, i.e. the image is a link to itself. This hardly makes any
    > sense for a 100 by 75 pixels image, so my crystal ball is pretty sure
    > about the conclusion. (And the alt attribute value means 'preview', which
    > is hardly useful to people who do not see the image but tells about the
    > author's intention of using a thumbnail.)


    Incredible, Holmes!
     
    Neal, Jun 17, 2004
    #11
    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. news.austin.rr.com

    how to download img from html img tag

    news.austin.rr.com, Apr 27, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    517
    Steve C. Orr [MVP, MCSD]
    Apr 27, 2005
  2. news.verizon.net
    Replies:
    3
    Views:
    570
    Whitecrest
    Jun 21, 2004
  3. christy

    IE8 img scr="" displays a red X

    christy, Jul 24, 2009, in forum: ASP .Net
    Replies:
    3
    Views:
    3,089
    christy
    Jul 27, 2009
  4. Ole Hanson

    <img> tag and resource files for scr-source?

    Ole Hanson, Jan 10, 2005, in forum: ASP .Net Building Controls
    Replies:
    3
    Views:
    279
    Ole Hanson
    Jan 12, 2005
  5. Ole Hanson

    <scr> tag and image files embedded in resource files? (how)?

    Ole Hanson, Jan 10, 2005, in forum: ASP .Net Web Controls
    Replies:
    1
    Views:
    180
    Steve C. Orr [MVP, MCSD]
    Jan 10, 2005
Loading...

Share This Page