www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 30

Thread: image link blue border

  1. #1
    Join Date
    Jan 2003
    Location
    Jersey Girl
    Posts
    1,198

    image link blue border

    Hi everyone!

    hmmm... I'm stumped
    I have an image that I use as a link.
    I used to have border=0 to remove the blue link-border, but w3c says it's an error (HTML validator).
    So I removed it.

    <a href="http://www.page1.htm"><img src="image1.gif" width=50 height=50 alt="whatever"></a>

    So now I am trying to get rid of it using CSS.
    I have a lot of other links (text links) on the page... so I don't want to clear them all... just this one image.

    I have an external stylesheet and would like to assign it there.

    So... how do I stop being so blue?

    thanks as always...
    k

  2. #2
    Join Date
    Jan 2003
    Location
    Peg City
    Posts
    638
    Weird that border="0" won't work. It does on my comp. Anyways, try this in your style sheet:

    img {
    border: none;
    }

    it'll remove borders from the images. If you only want it done on certain pages, then put it within style tags in the head section.

    Havik

  3. #3
    Join Date
    Nov 2002
    Location
    Dartmoor [Holiday]
    Posts
    2,382
    w3c says it's an error (HTML validator)
    The border attribute is deprecated for images as of HTML 4.01. Thus it is incorrect HTML Strict, but should probably validate as HTML Transitional, and should work in most browsers. It's always best to be standards compliant, however, and use CSS.

    Adam

  4. #4
    Join Date
    Jan 2003
    Location
    Peg City
    Posts
    638
    Ah, I see now. Guess I should've read the entire post carefully first. But the code posted earlier is the solution, or at least should be.

    Havik

  5. #5
    Join Date
    Jan 2003
    Location
    Jersey Girl
    Posts
    1,198
    YIKES!

    Havik... I am such a doof!

    I've been using 0 (zero) as though I have never coded before!
    (sure... I'm somewhat new to CSS... but seriously! ugh!)

    OK. Well... my embarrasment is a bit lessened by my relief that I can finally move past that stupid issue...

    so..
    I'll just say thanks for slapping me back to my senses .

    oh.. and border=0 works... but the w3c has been bouncing it back at me all day as an error. I took it out... now it loves me again (the w3c must be a male lol). I can't win!

    undisputed airhead...
    k

  6. #6
    Join Date
    Nov 2002
    Posts
    2,632
    Hmm, interesting since I use border:0px; in a external style sheet and I don't get any error. I've been playing around with it to see if I can recreate an error with it and I'm getting nothing.

  7. #7
    Join Date
    Jan 2003
    Location
    Jersey Girl
    Posts
    1,198
    well spoof... i did have problems all day today... and i was testing my pages with the style "internal" (just for the testing). Does that even matter???

    Also... maybe i left the "px" off... I don't remember anymore .

    Works now though .
    Maybe I'll test border:"0px" tomorrow... and report back.

    CSS is no javascript... but it can spin me in a circle or two every now and then .

    if (border:"0px") = OK then
    khaki = k
    else
    khaki = k
    end if

  8. #8
    Join Date
    Nov 2002
    Posts
    2,632
    Originally posted by khaki
    well spoof... i did have problems all day today... and i was testing my pages with the style "internal" (just for the testing). Does that even matter???
    Ah, I'm willing to guess that testing it internally would make a differnece. Why? Because it is able to know what version of HTML/XHTML you are testing against. If it's done externally than I'm not sure what version it validates against. I know I was getting a message that I didn't quite understand, but I think it was just saying that I should tested it with the HTML included.
    Last edited by spufi; 04-17-2003 at 12:23 AM.

  9. #9
    Join Date
    Jan 2003
    Location
    Peg City
    Posts
    638
    All this works, it just depends on which method you want to use.

    img {

    border: none;

    OR

    border: 0px solid;

    OR

    border-color: color of the background its on;

    }

    Also, just repeating earlier. If you have this:
    border: 0;
    Nothing should happen because your not specifying what type of border you want, even though it'll read it as 0 pixels.

    Havik

  10. #10
    Join Date
    Nov 2002
    Posts
    2,632
    Originally posted by havik

    Also, just repeating earlier. If you have this:
    border: 0;
    Nothing should happen because your not specifying what type of border you want, even though it'll read it as 0 pixels.

    Havik
    Well the code below is what I just put into my XHTML 1.1 page and validated. This code also shows up correctly in IE 5 and 6 and Mozilla 1.3.

    <style type="text/css">
    img { border:0px; }
    </style>

  11. #11
    Join Date
    Jan 2003
    Location
    Peg City
    Posts
    638
    that's what I meant, nothing will happen. Unless it's just on my browser, but if you wrote:

    border: 1; // or whatever number

    then still no border will appear because no border type has been specified.

    So border: 0px; will do what you want it to do.

    Havik

  12. #12
    Join Date
    Nov 2002
    Location
    NY, USA
    Posts
    731
    border: 1; // or whatever number
    then still no border will appear because no border type has been specified.
    Normally you would be correct, and even according to the specs you would be correct (border-style defaults to none, so no borders will be visible unless the border style is set), however, I believe images are special cases where most browsers seem to ignore this rule (I believe table may also be another exception). So img { border: 1px } will create a border.
    Well the code below is what I just put into my XHTML 1.1 page and validated. This code also shows up correctly in IE 5 and 6 and Mozilla 1.3.
    <style type="text/css">
    img { border:0px; }
    </style>
    It is indeed correct CSS, but I would like to clarify what you validated with. You have to remember that HTML and XHTML validators will skip over everything within style and script tags (since they would contain code in a different language). You'd have to pass it through the CSS validator.
    With IE, anyway, I've found that it doesn't want to change the border width unless you first turn the border on (border:solid;) and maybe even give it a color.
    This should be the case in all browsers as this is the case in the spec (with the exception of the color, which for me did not need to be set in IE nor does it need to be set according to the spec). Since border-style defaults to none you will have to explicitly declare it as something else, such as solid.
    Note: px is the default
    There is no default. Only when the length is 0 is the unit identifier optional, since, obvioulsy, 0 is 0 regardless of the type of measurement.

    So ideally, removing the border around an image should probably be done as below (just thought I'd also note that I personally find it redundant to use shorthand when setting only a single property; it is better to specify exactly what property you're setting simply for clarity).
    Code:
    img { border-style: none }
    Last edited by jeffmott; 04-17-2003 at 10:55 AM.
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  13. #13
    Join Date
    Jan 2003
    Location
    Peg City
    Posts
    638
    Normally you would be correct, and even according to the specs you would be correct (border-style defaults to none, so no borders will be visible unless the border style is set), however, I believe images are special cases where most browsers seem to ignore this rule (I believe table may also be another exception). So img { border: 1px } will create a border.
    It all depends on the browser, which is why it shouldn't be used that way. border: 1px; doesn't display any border on IE6 or NS6, but yet it does so on NS4. I haven't tested it on any other browsers.

    Havik

  14. #14
    Join Date
    Jan 2003
    Location
    Jersey Girl
    Posts
    1,198
    if i may interrupt the sword-fight that you guys are having ...

    which way would the CSS validator say is proper?

    unfortunately i've now gotten like 5 different answers... and aside from being gratefull for all of the responses... my head still spins all the same

    i have it working now as:
    img {border:none;}

    so... should i keep that?
    change it?
    what

    still blue (sorta) ...
    k

  15. #15
    Join Date
    Jan 2003
    Location
    Peg City
    Posts
    638
    Sword fight? Is that what we're doing?
    Even though we're having a debate (that's what I'll call it), I think we're all in agreement that border: none; is the best choice.

    Havik

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles