Picture borders

[cheatpark]

When I make a picture have a border how do I decide what colour the border is?

[andyLee]

<img> does not has color border attrib but you can do that by


<table border=1 bordercolor=red>
<tr>
<td>
<img src="asdA" border=0>
</td>
</tr>
</table>

IE only.

[meow]

<img src="pic.gif" width="100" height="100" style="border:2px solid #FF0000" alt="blah blah">

<EDIT>
I made a typo (or two) there shouldn't be any semi colons in the style. :p

[Dusty]

<table border=1 bordercolor=red>
<tr>
<td>
<img src="asdA" border=0>
</td>
</tr>
</table>

IE only.Actually that works in Netscape too, but it would look a lot better with the cellspacing set to zero.

Meow showed the CSS way, the plain HTML way is:

<a href="whatever.html"><font color="_color_of_border_here_"><img src="image.gif" border="1"></font></a>

[meow]

Which Netscape? :D

Btw, you can do it at least 5 ways with a table. But is it worth to continue to write cluttered code just to support an old and cranky browser? The CSS way doesn't work in NS4x, but they still see the pictures. They just don't get the candy.

[cheatpark]

Originally posted by andyLee
<img> does not has color border attrib but you can do that by


<table border=1 bordercolor=red>
<tr>
<td>
<img src="asdA" border=0>
</td>
</tr>
</table>

IE only.

For some reason that didn't work.

[Dusty]

you can do it at least 5 ways with a table. But is it worth to continue to write cluttered code just to support an old and cranky browser? The CSS way doesn't work in NS4x, but they still see the pictures. They just don't get the candy.I would think the best, and by best I mean most compatible, table way would be:
<table border="0" cellspacing="0" cellpadding="1" bgcolor="_border_color_"><tr><td>
<table border="0" cellspacing="0" cellpadding="0" bgcolor="_page_bg_color"><tr><td>
<a href="whatever.html"><img src="image.gif" border="0"></a>
</td></tr></table></td></tr></table>That is a bit excessive. But, I still wouldn't rely on CSS alone, I'd color it with a <font> tag too. There's just no reason not to.

[cheatpark]

Originally posted by Dusty
I would think the best, and by best I mean most compatible, table way would be:
<table border="0" cellspacing="0" cellpadding="1" bgcolor="_border_color_"><tr><td>
<table border="0" cellspacing="0" cellpadding="0" bgcolor="_page_bg_color"><tr><td>
<a href="whatever.html"><img src="image.gif" border="0"></a>
</td></tr></table></td></tr></table>That is a bit excessive. But, I still wouldn't rely on CSS alone, I'd color it with a <font> tag too. There's just no reason not to.

Can the border colour be one of those colour numbers or a word?

[Dusty]

Can the border colour be one of those colour numbers or a word?The color (i.e. "black") or its hexadecimal equivalent (i.e. "#000000") are both fine.

[meow]

Originally posted by Dusty
That is a bit excessive. But, I still wouldn't rely on CSS alone, I'd color it with a <font> tag too. There's just no reason not to.
Would the fact that the only thing that is holding true standard support back is version4 browsers do? They don't miss any content. Just decoration.
Point is that one year from now a person that writes a font tag will be seen as anal retarded. I think one should still learn them and table layout too, but going through loops for an image border in NS4 when one is just starting to learn today is plain silly.

[cheatpark]

By the way when you click on the picture and it is a visited link it turns brown.

[Dusty]

Would the fact that the only thing that is holding true standard support back is version4 browsers do? They don't miss any content. Just decoration.
Point is that one year from now a person that writes a font tag will be seen as anal retarded. I think one should still learn them and table layout too, but going through loops for an image border in NS4 when one is just starting to learn today is plain silly.They're missing decoration that doesn't have to be missed, that's what I'm on about. If it's just a few more key strokes to make it compatible then why not go that little bit further? If it's anal to go the extra mile, well then, I see nothing wrong with being labeled such.

[meow]

Have you ever thought about what you may screw up for for example blind users? I care a lot more about those than about a handful of old geezers that won't upgrade a graphical browser. They get the content. If they want fluff, fine. Upgrade and see a whole new world.

cheatpark - yes, a HTML border on a linked image takes the visited link color.

[Dusty]

Have you ever thought about what you may screw up for for example blind users?No, I guess I haven't considered the blind... if you want you could include a link to a braille stylesheet, I suppose... I don't see what this has at all to do with image border colors... at all, but, um...

[meow]

The problem isn't the CSS. It's the cluttered HTML.

But now it's about cheatpark's border. Cheatpark can't write a table yet (at least he couldn't yesterday - but he's moving fast :p).

Does he need to learn dirty tricks like wrapping a table around an image to get a detail like border color? I think he will have enough to do trying to understand the common practices with tables. :)

[Dusty]

I said the table was a bit much, I suggested using CSS but retaining the <font> tag for older browsers.

I don't think the blind will care what color the border is. ;)

[meow]

Exactly. That's one of the reasons it's better they and others that don't care don't have to download the code at all.

FONT, besides being an ugly tag, results in the link color problem. Meaning no one get's the nice colors. How do you solve that? Hang a little CSS on the FONT tag? :tongue2:

[Dusty]

That's one of the reasons it's better they and others that don't care don't have to download the code at all. Your argument is faulty, for they wont care to download your CSS either, not to mention your 33 character CSS is more of a download than my 29 character <font> tag. Again I say, I don't think the blind will really care and again I ask, what does this have to do with image border colors?
FONT, besides being an ugly tag, results in the link color problem. Meaning no one get's the nice colors. How do you solve that?Your CSS prevents the link's color from changing as well, or did you not realize this? :p

Calling <font> an ugly tag! <Font> saw you through think and thin from HTML 3.2 to 4.0, and now you're so eager to turn your back on her! For shame! ;)

[meow]

Your argument is faulty, for they wont care to download your CSS either,
No, browsers that don't understand CSS won't download it. Inlining CSS is good for learning purposes, or if one uses a single rule here and there, nothing else. Otherwise an external file is to prefer. Furthermore .css files, just as .js files, get cached so it also preserves bandwidth.


not to mention your 33 character CSS is more of a download than my 29 character <font> tag.
And if it's 10 images? Or 100? What does your math say then. Besides, wasn't font already discarded because of the link color thing? How many characters are the tables?

Again I say, I don't think the blind will really care and again I ask, what does this have to do with image border colors?
It has to do with tables used for layout purposes ---- up the way some readers get the text. And to use a table for something as unsignificant as the color of a picture border, all for the benefit of an old version of one browser is bloated.

Your CSS prevents the link's color from changing as well, or did you not realize this?
What link colors? What link? I didn't write a link. cheatpark doesn't want the border to change which your font solution makes it do.


Calling <font> an ugly tag! <Font> saw you through think and thin from HTML 3.2 to 4.0, and now you're so eager to turn your back on her! For shame!
Sorry, but font has always been considered to be evil and a bad solution for numerous reasons. You may not believe this, but there are people that have been around since the beginning of the www and never written a font tag. Be happy that it's gone.

[Dusty]

Meow, why are you still talking about tables? You're the only one who keeps bringing tables into the argument, neither I nor you suggested he do anything with tables. You said use CSS alone. I said use CSS in conjunction with a <font> tag. Period. No tables.

Browsers that don't support CSS won't download an external style sheet, this much is true, but the inline style you gave him, and remember we're talking about a person whose grasp on HTML is very slight and is likely to copy word for word what is explained to him (your words, mind you), and a browser that doesn't support CSS would download that. 10x33 is 330, 100x33 is 3300. 10x29 is 290, 100x29 is 2900.

What link colors? What do you think we're talking about? Cheatpark has an image that is a link. He wants to change the color of the border around the image to something other than the default blue. Furthermore, he wants it changed to brown when clicked. Both our methods work for the first part, but neither my <font> tag nor your CSS will allow for the second. You made a strange comment just then, "cheatpark doesn't want the border to change". Considering the topic of this thread, "Picture borders", and the first question asked in it, "how do I decide what colour the border is?", that is a strange comment of yours indeed.

I once gave you credit for the way you normally push for compatibility in threads that promote the IE-"standard", but the way you sneer at the only tool available to change font faces and sizes in many browsers, the <font> tag, makes me rethink my assessment. I say compatibility first, all else second. You, most apparently, think otherwise.

[meow]

You brought tables into it. Several versions no less.

I, as I've already said, I inlined the style because it's easier to understand that way. cheatpark is writing his first tags. Remember cheatpark, the guy that asked the question?

As I understood it cheatpark does NOT want the border to change.

By the way when you click on the picture and it is a visited link it turns brown.

Anyway, this is cheatpark's thread and he needed help. So maybe we should leave room for him if he still wants our help.

[meow]

Originally posted by Dusty

I once gave you credit for the way you normally push for compatibility in threads that promote the IE-"standard", but the way you sneer at the only tool available to change font faces and sizes in many browsers, the <font> tag, makes me rethink my assessment. I say compatibility first, all else second. You, most apparently, think otherwise.

Sorry, I didn't see your last paragraph. Since NS4 was your big concern in the beginning of this thread I take it you refer to the same browser now. You'll be happy to learn it understands CSS styled fonts. I'm surprised you haven't noticed.

[cheatpark]

Originally posted by meow
You brought tables into it. Several versions no less.

I, as I've already said, I inlined the style because it's easier to understand that way. cheatpark is writing his first tags. Remember cheatpark, the guy that asked the question?

As I understood it cheatpark does NOT want the border to change.


Anyway, this is cheatpark's thread and he needed help. So maybe we should leave room for him if he still wants our help.

That is right! I don't want the border to change so how do I do this?

[Dusty]

You brought tables into it. Several versions no less.AndyLee was the first to respond with a table. I said what would be a better method that used tables but I did not suggest using it. The first time I gave the code for a table border, right after I said:
That is a bit excessive. But, I still wouldn't rely on CSS alone, I'd color it with a <font> tag too.Then you kept on talking about tables, so I outright said:
I said the table was a bit much, I suggested using CSS but retaining the <font> tag for older browsers.And you're still accusing me of telling him to use tables!


I, as I've already said, I inlined the style because it's easier to understand that way. cheatpark is writing his first tags. Remember cheatpark, the guy that asked the question?Yes, Cheatpark is the guy in question, so why do you bring up all this about external style sheets? Read my last post, you used inline styles and so will he, arguing the benefits of external style sheets is irrelevant.


As I understood it cheatpark does NOT want the border to change.I will agree that Cheatpark's post on the visited link color was less than clear, you could interpret him to be saying he wants it to be brown or he doesn't want it to be brown. If he wants it to stay the same, good, both our methods keep it the same. If he wants it to change, he'll need more than we gave him.


Sorry, I didn't see your last paragraph. Since NS4 was your big concern in the beginning of this thread I take it you refer to the same browser now. You'll be happy to learn it understands CSS styled fonts. I'm surprised you haven't noticed.I'm concerned with more than just Netscape 4.x.

[Dusty]

That is right! I don't want the border to change so how do I do this?The [combined] code we gave you keeps the link the same color, visited or no.
<a href="page.html">
<font color="_color_here_">
<img src="image.gif" style="border:1px solid _color_here_">
</font>
</a>

[CW]

I'd just use ACEhtml editor to help me... :classic2:

[meow]

Oh, what's the use? 90% if the ppl want copy-paste code and the other 10% provide it. Maybe everyone get what they deserve. :confused2

[LeX]

Originally posted by Dusty
I don't think the blind will care what color the border is. ;) I don't think the blind surfs the net as we know it.

[Jan]

cheatpark, if I am reading this correctly, you have an image that links to somewhere?

If that is the case use border=0 then you won't have a different coloured border where the link has been visited, you won't have a border at all!! Which is how it should be :)

[LeX]

I think he wants the border, just in a different color.

[cheatpark]

Originally posted by LeX
I think he wants the border, just in a different color.

That's right. Anyway I've thought about it and I now think that it is a 1 second distraction which is not needed. At least I learnt some html from it though and confused some of you for some reason I have no idea how that happened.

[LeX]

Even though you don't want it anymore... try this:

<BODY link="color-of-border" vlink="color-of-border-after-clicked" alink="color-of-border-onclick">
<A href="link.html"><IMG src="picture.jpg"></A>

[xsnetwork]

Originally posted by LeX
Even though you don't want it anymore... try this:

<BODY link="color-of-border" vlink="color-of-border-after-clicked" alink="color-of-border-onclick">
<A href="link.html"><IMG src="picture.jpg"></A> But that also changes the colour of all the links on that page, so if you want to keep the links one colou and the border another, it won't work

[Dusty]

Why do I get the feeling that this thread is starting over again?

[xsnetwork]

because it is!! :D :biggrin2:

[LeX]

Originally posted by xsnetwork
But that also changes the colour of all the links on that page, so if you want to keep the links one colou and the border another, it won't work Guess what? You can't change the color of the image borders individualy, but you can do that with text links. Ta-da!

[Dusty]

Did we all of the sudden decided to ignore the first two pages of this thread? Why didn't anyone tell me? I'll say it again:

Cheatpark, if you want to change the color of the border of an image, simply use this code, the parts you need to edit are in boldface.

<a href="_url_to_page_">
<font color="_color_of_border_">
<img src="_url_to_image_" border="_size_of_border_" style="border:_size_of_border_px solid _color_of_border_">
</font>
</a>