for some reason i cant get the anchor colors specified in my css file to render properly with image links on the web page (ie6 is the culprit with a sickley green - tho opera doesnt show any border colour at all! - mozilla is the only browser which displays the colours as intended.
does anybody know whats going on here have a solution in mind. i dont really want to use an embedded style as it defeats the point of having an external style sheet in the first place. hmmm
heres the css source code:
a {
color:#06f;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:underscore;
}
a:link{color:#00f;}
a:visited {color:#00f;}
a:hover {color:#f09;}
cheersYou are changing the color of the text with the pseudo-classes.
For the images you need to add something like; a:hover img {border-color:#f09;}thanks for that. works for hover but link and visited still dont work.
heres what i tried, doesnt really look right somehow!
a {
color:#06f;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:underscore;
}
a:link {color:#00f;}
a:visited {color:#00f;}
a:hover {color:#f09;}
a:link img {color:#00f;}
a:visited img {color:#00f;}
a:hover img {border-color:#f09;}hmmm, right - got it its the border bit innit!
thanks vv much, appreciate your help.coolOriginally posted by Fang
You are changing the color of the text with the pseudo-classes.
For the images you need to add something like; a:hover img {border-color:#f09;}
I've read this thread and have implemented the advice.
Now, my borders looks the same in both IE, Firefox and Opera - but, I have a problem when hovering the images in IE6 - it doesn't show.
This is what I've been doing:
a:link img {border-color: #ffff00; border-style: dashed dashed dashed dashed; border-width: 1px 1px 1px 1px}
a:visited img {border-color: #ffff00; border-style: dashed dashed dashed dashed; border-width: 1px 1px 1px 1px}
a:active img {border-color: #e11900; border-style: dashed dashed dashed dashed; border-width: 1px 1px 1px 1px}
a:hover img {border-color: #e11900; border-style: dashed dashed dashed dashed; border-width: 1px 1px 1px 1px}I may not have the answer for you - my guess is to put the things in the right order : link, visited, hover, active - but I do have a small tip. You can replace this :
a:link img {border-color: #ffff00; border-style: dashed dashed dashed dashed; border-width: 1px 1px 1px 1px}
with this :
a: link img {border: 1px dashed #ffff00;}
does anybody know whats going on here have a solution in mind. i dont really want to use an embedded style as it defeats the point of having an external style sheet in the first place. hmmm
heres the css source code:
a {
color:#06f;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:underscore;
}
a:link{color:#00f;}
a:visited {color:#00f;}
a:hover {color:#f09;}
cheersYou are changing the color of the text with the pseudo-classes.
For the images you need to add something like; a:hover img {border-color:#f09;}thanks for that. works for hover but link and visited still dont work.
heres what i tried, doesnt really look right somehow!
a {
color:#06f;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:underscore;
}
a:link {color:#00f;}
a:visited {color:#00f;}
a:hover {color:#f09;}
a:link img {color:#00f;}
a:visited img {color:#00f;}
a:hover img {border-color:#f09;}hmmm, right - got it its the border bit innit!
thanks vv much, appreciate your help.coolOriginally posted by Fang
You are changing the color of the text with the pseudo-classes.
For the images you need to add something like; a:hover img {border-color:#f09;}
I've read this thread and have implemented the advice.
Now, my borders looks the same in both IE, Firefox and Opera - but, I have a problem when hovering the images in IE6 - it doesn't show.
This is what I've been doing:
a:link img {border-color: #ffff00; border-style: dashed dashed dashed dashed; border-width: 1px 1px 1px 1px}
a:visited img {border-color: #ffff00; border-style: dashed dashed dashed dashed; border-width: 1px 1px 1px 1px}
a:active img {border-color: #e11900; border-style: dashed dashed dashed dashed; border-width: 1px 1px 1px 1px}
a:hover img {border-color: #e11900; border-style: dashed dashed dashed dashed; border-width: 1px 1px 1px 1px}I may not have the answer for you - my guess is to put the things in the right order : link, visited, hover, active - but I do have a small tip. You can replace this :
a:link img {border-color: #ffff00; border-style: dashed dashed dashed dashed; border-width: 1px 1px 1px 1px}
with this :
a: link img {border: 1px dashed #ffff00;}