rushie84
07-24-2003, 10:22 AM
I have a hyperlinked image, and it automatically has a border around it. how do i get rid of this border? Thanks
Click to See Complete Forum and Search --> : Hyperlinked Image Border
Da Warriah
07-24-2003, 10:26 AM
<img src="image.jpg" style="border: 0">
or if your going to have a bunch of hyperlinked images, you can just set it for all the images:
<style type="text/css">
<!--
img { border: 0; }
-->
</style>
put that in between your <head> </head> tags, and no images will have a border around them...
or if your going to have a bunch of hyperlinked images, you can just set it for all the images:
<style type="text/css">
<!--
img { border: 0; }
-->
</style>
put that in between your <head> </head> tags, and no images will have a border around them...
rushie84
07-24-2003, 10:35 AM
Thank you! I really appreciate it.
Charles
07-24-2003, 01:47 PM
It is important to note that Da Warriah's two examples above are both incorrect. You need to specify a unit for your vale. Id est:
border:0px
border:0px
Da Warriah
07-24-2003, 03:08 PM
however, both validate just fine...;)
i mean, i dont sit down and read W3C specs for hours on end, but if they both validate the same, with no errors or warnings, are they not both fine to use?
i mean, i dont sit down and read W3C specs for hours on end, but if they both validate the same, with no errors or warnings, are they not both fine to use?
spufi
07-24-2003, 03:43 PM
I agree with both of you. I have seen "0" used without using a unit of measurement like "px" and I have seem it done with "px." I do it by default with the "px" value even though I know it's technically not needed.
Charles
07-24-2003, 03:59 PM
I stand corrected.
spufi
07-24-2003, 06:27 PM
Write this down folks, Charles was wrong. :p
nkaisare
07-24-2003, 06:51 PM
Originally posted by Charles
I stand corrected.
I need to correct you guys again:)
border: 0; is NOT correct. The error is not in 0 part... zero is zero no matter what units of measurement are used. However, some browsers will (correctly) display the border.
You ought to use
border: none;
I stand corrected.
I need to correct you guys again:)
border: 0; is NOT correct. The error is not in 0 part... zero is zero no matter what units of measurement are used. However, some browsers will (correctly) display the border.
You ought to use
border: none;
IncaWarrior
07-24-2003, 08:29 PM
<img src="blah.gif" border="0">
mine's simple
mine's simple
pyro
07-24-2003, 08:48 PM
It's also not valid... Maybe you meant <img src="blah.gif" style="border:none;" alt="Blah Image">?
IncaWarrior
07-24-2003, 08:57 PM
so explain to me why it's not valid if it works?
you don't always need to use style to make things work
you don't always need to use style to make things work
pyro
07-24-2003, 09:08 PM
Try running this code through the validator (http://validator.w3.org):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Invalid</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<p><img src="blah.gif" border="none"></p>
</body>
</html>
And then try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Valid</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<p><img src="blah.gif" style="border:none;" alt="Blah Image"></p>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Invalid</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<p><img src="blah.gif" border="none"></p>
</body>
</html>
And then try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Valid</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<p><img src="blah.gif" style="border:none;" alt="Blah Image"></p>
</body>
</html>
IncaWarrior
07-24-2003, 09:20 PM
well if it works in IE and netscape then it WORKS, and simple is usually better. being VALID means adding the extra unnecessary frills
pyro
07-24-2003, 09:28 PM
Originally posted by IncaWarrior
being VALID means adding the extra unnecessary frills That is an incorrect and uninformed statement. Validating your code helps insure that it will continue to work when your common hardware/software is not available. What if I visit your site on a PDA, or my blind friend uses a screen-reader? What are they going to get? Using valid code/css ensures your site will continue to function in all circumstances. It also helps ensure forward compatability... What happens when an invalid tag you are using is no longer supported by browsers? Perhaps you will be interested in this (http://www.thenoodleincident.com/tutorials/box_lesson/validation.html) article...
being VALID means adding the extra unnecessary frills That is an incorrect and uninformed statement. Validating your code helps insure that it will continue to work when your common hardware/software is not available. What if I visit your site on a PDA, or my blind friend uses a screen-reader? What are they going to get? Using valid code/css ensures your site will continue to function in all circumstances. It also helps ensure forward compatability... What happens when an invalid tag you are using is no longer supported by browsers? Perhaps you will be interested in this (http://www.thenoodleincident.com/tutorials/box_lesson/validation.html) article...
IncaWarrior
07-24-2003, 09:39 PM
well you're talking about very unlikely situations some of which have never happened and this is a commonly used tag so i think your validator is wrong. btw why does your blind friend want to know how big the border is?
Another point: Many people use this tag including Dreamweaver, netscape composer, and microsoft frontpage. I don't think it's going to be removed
Another point: Many people use this tag including Dreamweaver, netscape composer, and microsoft frontpage. I don't think it's going to be removed
pyro
07-24-2003, 09:57 PM
The validator is not wrong. It validates according to the HTML 4.01 specs (http://www.w3.org/TR/html401/). And no, I doubt my blind, imaginary friend would care about the border. Do I think he'd care about the alt tag? Certainly...
Many people use this tag including Dreamweaver, netscape composer, and microsoft frontpage.Yes, I agree, WYSIWYG's tend to output ugly code...
Many people use this tag including Dreamweaver, netscape composer, and microsoft frontpage.Yes, I agree, WYSIWYG's tend to output ugly code...
IncaWarrior
07-24-2003, 10:18 PM
but the example wasn't to show the alt tag, it was to show the border.
You can't disregard that they use them just because they are WYSIWYGs, the out put is messy due to other reasons like strange tags in layout and redundunt parts. If any of thse had wanted to do it with style then they could, it's not a very complicated thing.
Those HTML specs even include the border tag but just mark it as deprecated. It also says "All IMG and OBJECT attributes that concern visual alignment and presentation have been deprecated in favor of style sheets. " meaning that you can't use any of the standard tags that have been used for years with images
You can't disregard that they use them just because they are WYSIWYGs, the out put is messy due to other reasons like strange tags in layout and redundunt parts. If any of thse had wanted to do it with style then they could, it's not a very complicated thing.
Those HTML specs even include the border tag but just mark it as deprecated. It also says "All IMG and OBJECT attributes that concern visual alignment and presentation have been deprecated in favor of style sheets. " meaning that you can't use any of the standard tags that have been used for years with images
pyro
07-24-2003, 10:26 PM
Yes, but what we were talking about was whether or not there was an advantage for one to write valid code... :rolleyes:
Originally posted by IncaWarrior
meaning that you can't use any of the standard tags that have been used for years with images<img src="blah.gif" style="border:none;" alt="Blah Image" width="20" height="20"> is perfectly valid... Not sure what you mean by "any of the standard tags".
Originally posted by IncaWarrior
meaning that you can't use any of the standard tags that have been used for years with images<img src="blah.gif" style="border:none;" alt="Blah Image" width="20" height="20"> is perfectly valid... Not sure what you mean by "any of the standard tags".
IncaWarrior
07-24-2003, 10:41 PM
ok you can use those two, but you can't use align, space, or border. All these changes in the change to 4.01 from 4 because when i learned it they were taught as being what you use.
I'm still talking about this code and since border=0 is shorter than any of yours then i think it is an advantage
I'm still talking about this code and since border=0 is shorter than any of yours then i think it is an advantage
pyro
07-24-2003, 10:44 PM
It's not...
Validating your code is always the advantage, it's just whether you are willing to spend the time doing so.
Validating your code is always the advantage, it's just whether you are willing to spend the time doing so.
IncaWarrior
07-24-2003, 11:03 PM
i just did some tests and found that almost none of the most popular sites could even BE validated, and the ones that could were in valid. Must not be that important
Da Warriah
07-25-2003, 07:42 AM
and just exactly which "most popular sites" did you test??
nkaisare
07-25-2003, 10:42 AM
Originally posted by IncaWarrior
ok you can use those two, but you can't use align, space, or border. All these changes in the change to 4.01 from 4 because when i learned it they were taught as being what you use.
I'm still talking about this code and since border=0 is shorter than any of yours then i think it is an advantage
Lets say you have navigation made of images. Its not uncommon to have 10 navigation links, right? Your method will be:
<img scr="image1.gif" alt="Link 1" border="0"...>
...
<img scr="image10.gif" alt="Link 10" border="0"...>
Each border takes up 10 characters. Total of 100 bytes.
The method pyro suggested:
<img scr="image1.gif" alt="Link 1"...>
...
<img scr="image10.gif" alt="Link 10"...>
And in the Style sheet, add:
img {border: none}
Thats 18 bytes. A saving of 82 bytes. Isn't that a better method?
Validating your code is always the advantage, it's just whether you are willing to spend the time doing so.
Pyro, I agree with you 100%. But extending this principle to the current example is kind-of stretching it far. Reason, no one in their sane mind can think of any browser not supporting border="0" attribute for img in the near future.
Having said that, I still believe that Pyro's method is a better method. Its upto you what method to choose.
Irrespective of what you do choose, alt tab IS necessary. It ensures that your page is readable in browsers that do not display images. PDA are one example, making your page search engine friendly is another reason. Most browsers including NS and IE have the option of turning off images/gif animations, and this is third reason.
ok you can use those two, but you can't use align, space, or border. All these changes in the change to 4.01 from 4 because when i learned it they were taught as being what you use.
I'm still talking about this code and since border=0 is shorter than any of yours then i think it is an advantage
Lets say you have navigation made of images. Its not uncommon to have 10 navigation links, right? Your method will be:
<img scr="image1.gif" alt="Link 1" border="0"...>
...
<img scr="image10.gif" alt="Link 10" border="0"...>
Each border takes up 10 characters. Total of 100 bytes.
The method pyro suggested:
<img scr="image1.gif" alt="Link 1"...>
...
<img scr="image10.gif" alt="Link 10"...>
And in the Style sheet, add:
img {border: none}
Thats 18 bytes. A saving of 82 bytes. Isn't that a better method?
Validating your code is always the advantage, it's just whether you are willing to spend the time doing so.
Pyro, I agree with you 100%. But extending this principle to the current example is kind-of stretching it far. Reason, no one in their sane mind can think of any browser not supporting border="0" attribute for img in the near future.
Having said that, I still believe that Pyro's method is a better method. Its upto you what method to choose.
Irrespective of what you do choose, alt tab IS necessary. It ensures that your page is readable in browsers that do not display images. PDA are one example, making your page search engine friendly is another reason. Most browsers including NS and IE have the option of turning off images/gif animations, and this is third reason.
IncaWarrior
07-25-2003, 01:11 PM
well i wasn't arguing the alt tag, my example was to show the border so the alt tag wasn't necessary. what if you have ten pictures but you want 6 of them to have borders? this way is shorter
nkaisare
07-25-2003, 04:25 PM
I wasn't commenting on your missing the alt in your example. Personally, I ALWAYS add alt tag when giving img examples because most people on this board, I have seen, do not seem to find alt tag as necessary.
Usually, there is a pattern in using or not using borders. For example, you may want inner links to have borders, not main links. In such a case, you may use CSS desendent selectors. Alternatively, you can use class="b" for images with borders and none for images without.
You can always find counter-examples of which is better or which is not. Finally, its upto you to use what you like. THough I would still like to point out that Pyro's method is standard compliant and both the methods work.
Usually, there is a pattern in using or not using borders. For example, you may want inner links to have borders, not main links. In such a case, you may use CSS desendent selectors. Alternatively, you can use class="b" for images with borders and none for images without.
You can always find counter-examples of which is better or which is not. Finally, its upto you to use what you like. THough I would still like to point out that Pyro's method is standard compliant and both the methods work.
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.
Copyright Internet.com Inc., All Rights Reserved.