Border color of image/link

[illzoni]

Sorry for the newb Q....

I've just started trying CSS and I've taken control of my text hyperlinks.

However, I can't figure out the code to do the same with the borders of images that are links.

For example, the following code in my style sheet controls the color of text for a visited link:
a:visited {color: #FF3333;}

What would be appropriate to control the border color of an image serving as a link? I've tried the code below and derivations.
a:visited>img {border-color: #FF3333;}

TIA,
Jon

[blm126]

Let me guess you use Internet Explorer,right(though, I'm not sure if that code would work in other browsers without a width)? Try this

a:visited img{
border: 1px solid #FF3333;
}

[mwinter]

Sorry for the newb Q....

Everyone has to start somewhere.

I've just started trying CSS and I've taken control of my text hyperlinks.

Be aware of a general rule in CSS: once you specify one colour, you should specify them all.

Not everyone will use the same default colours as you. A visitor's browser or operating system might use different colours. The user might have altered them too, perhaps using a colour theme. If you were to just assume that everyone will have black text on a white background with blue links and purple visited links, you might make a simple change that'll work well for those defaults, but will be completely unreadable for others.

If you specify a foreground colour using the color property, specify the background, too (and vice versa). Similarly, if you use a background image, check that the foreground content is still visible without that image, and if not, set a background colour. Note: transparent is a valid background colour, but make sure that it doesn't cause problems, and that you're using it because you really do want whatever's underneath to show through.

However, I can't figure out the code to do the same with the borders of images that are links.

In general, if a border is set without a colour (so only the width and style has been specified), the border will use the same foreground colour set by the color property. Unfortunately, when it comes to links with MSIE, things go a bit pear-shaped.

For example, the following code in my style sheet controls the color of text for a visited link:
a:visited {color: #FF3333;}

In decent browsers, that will also affect the border around images. The border should inherit the color property from the link, and then use that to set the border colour. In MSIE, the border colour must be set explicitly.

I've tried the code below and derivations.
a:visited>img {border-color: #FF3333;}

Current versions of MSIE don't support the child combinator (>), so they will ignore that rule (IE7 is supposed to add support). Replace the greater-than symbol with a space and all will be well.

Let me guess you use Internet Explorer,right

If blm126 is right, I would suggest that you develop primarily with a good browser like Opera or Firefox (both are free), and check in IE from time to time to see if it's messed something up. Authoring to IE's quirks tends to make working with standards-compliant software more awkward. Also make sure that you trigger "Standards" mode (in browsers that feature such a switching mechanism) by including a complete document type declaration (DOCTYPE) in your markup.

Good luck,
Mike

[jscheuer1]

Let me guess you use Internet Explorer,right(though, I'm not sure if that code would work in other browsers without a width)? Try this

a:visited img{
border: 1px solid #FF3333;
}

Nice, accurate, and to the point.

[html tablesrule]

FIX FOR ---- IMAGES AS LINKS ,, SET YOUR OWN HOVER COLORS ----

Thank Heavens for blm126 responding to this with the proper fix for this problem. I have only been playing around for about two months on and off, trying to make my own homepage. I have looked through about 60 or 70 sites that claim to have a fix and almost everyone has the same problem I do.

I use a scrolling marquee, for now, with images of artists that i want to use as links to seperate pages where i store videos of them.
*** problem *** my link colors work fine for text but not for images<>><<>they always revert to defaults except for the background color. THANKS TO BLM126 for finally showing me how to fix this ,, and here is how I applied it to my page:

Here's the next problem and I will show the code to have 2, yes 2 sets of link characteristics on the same page.

INSIDE YOUR OPENING TAGS...
<head> </head>

place the following------------------>

<style type="text/css">

.link1 a:link {color: 0000FF;}
.link1 a:visited {color: 0000FF;}
.link1 a:active {color: 0000FF;}
.link1 a:hover {color: 000000; background-color: FFFF00; text-decoration: none;}

.link2 a:link img{border: 2px solid #0000FF;}
.link2 a:visited img{border: 2px solid #0000FF;}
.link2 a:active img{ border: 2px solid #0000FF;}
.link2 a:hover img{border: 2px solid #009933;}
</style>
Now whenever you want to customize, add the following code to the outside of the table or section of links that you want to define

<SPAN class="link1"> </SPAN>

or.........

<SPAN class="link2"> </SPAN>

Obviously, you can create as many styles within the header as you like and apply them accordingly.
REMEMBER TO PUT THE DOT/PERIOD BEFORE THE WORD LINK ! in the header section, not however in the span string.
And you may change the word .link to .anything you want as long as you define which class your using in the span string and match them up.