IE6 link colors & CSS override (vs. Firefox)

[Woodmon]

The scenario:

For this example running current IE6.02 Update version SP2 and Firefox
1.5b2 on XP SP2

Internet Options > Colors >Unvisited/Visited colors are picked.

Everything in IE Accessibility dialog is unchecked - e.g. "ignore colors
specified on web pages" is unchecked.

In my web page I have different link colors set by CSS. However when my
web page renders in IE, the color for the border around the images,
indicating they are links, is not properly overridden by CSS. But at the
same time the color of text links are overridden correctly in IE.

Why the difference in IE?

Note my CSS link color overrides for both text links and image links
work fine in Firefox.

On a related note in IE I see a hover color can be enabled by check box,
and a color picked. So can IE's hover color setting be overridden? And
if so can different "hover" overrides be applied to different objects on
the page (via CSS and class). See my HTML below

Example of my CSS follows:

<style type="text/css" media="screen">

BODY { color: white }
A:link { color: 66CCFF; }
A:visited { color: CC66FF; }
A:active { color: CC66FF; }
A:hover { color: white; background-color: #0099cc; text-decoration:
#000000;}

..override a:link { color: CC66FF; }
..override a:visited { color: 66CCFF; }
..override a:active { color: 66CCFF; }
..override a:hover { color: blue; background-color: #0099cc;
text-decoration: #000000;}
</style>

HTML with image where IE does not apply the CSS link visited color:

<tr align="middle">
<td>
<a href="bigphoto.html" title="Example: photo1" alt="Example: photo1">
<img src="images/smallphoto.jpg" /></a>

</td>
</tr>

HTML showing override object:

<td class="override" align="center" bgcolor="006600">
<font size="1" color="white" face="helvetica, arial">
<b>
<a href="/contact.html">Contact Page</a>
</b>
</font>
</td>


Appreciate any suggestions.
Woody

 

[Beauregard T. Shagnasty]

Why the difference in IE?

It's borked.

Example of my CSS follows:

<style type="text/css" media="screen">

BODY { color: white }
A:link { color: 66CCFF; }
A:visited { color: CC66FF; }
A:active { color: CC66FF; }
A:hover { color: white; background-color: #0099cc; text-decoration:
#000000;}

.override a:link { color: CC66FF; }
.override a:visited { color: 66CCFF; }
.override a:active { color: 66CCFF; }
.override a:hover { color: blue; background-color: #0099cc;
text-decoration: #000000;}
</style>

Try putting them in proper order: link, visited, hover, active

[Dare I say it? "Las Vegas Has Animals"]

 

[Woodmon]

It's borked.

Try putting them in proper order: link, visited, hover, active

Thanks for the hover pointer. The hover was just an example. I am not
actually presently using the hover in my current CSS code. But the
question remains, will a CSS hover override IE browser hover setting and
can more than one CSS hover override color/effect be applied on the same
webpage.

Main priority of my post was to find a workaround to make the image link
color overrides work in IE. Although IE might be borked, is it possible?
Thanks.

Woodmon

 

[Jonathan N. Little]

Woodmon wrote:




It's borked.

Try formatting color values correctly
..override a:link { color: #CC66FF; }

 

[Beauregard T. Shagnasty]

Thanks for the hover pointer. The hover was just an example. I am not
actually presently using the hover in my current CSS code.

Then why did you post it? This is why we like to see URLs to real pages
with the problem.

 

[Beauregard T. Shagnasty]

Try formatting color values correctly
.override a:link { color: #CC66FF; }

<lol!> I was paying too close attention to the order that I missed
that. Another reason for posting URLs.

 

[Woodmon]

<lol!> I was paying too close attention to the order that I missed
that. Another reason for posting URLs.

Again sorry for multi-posting. I was conused versus cross-posting. now I
understand.

I cannot send you a URL as the site is not on a publicly accessible
server.

I removed the pound (#) signs as I read somewhere they were deprecated
(or not needed) in stylesheet color info. Possible I was confused.

And when I stated I removed the "hover" entry, it was not overriding the
color as I expected, so I removed it from the CSS thinking it may also be
contributing to my other problem (the orginal main topic of my post...
which is still an issue). But I found it did not make a difference. I do
want to add it back so, that is why I was asking if one can have multiple
hover overrides..

I appreciate your assist. A gentle nudge in the right direction for my
multi-posting mistake and positng in the incorrect forum is warranted (I
posted my question to CIAWS, which I thought was appropriate since it
directly related to my CSS code).

So are you folks always so aggressive in your responses? You will scare
off many with such tactics and do your business(es) listed in your sig a
dis-service.

Woodmon

 

[Toby Inkster]

I removed the pound (#) signs as I read somewhere they were deprecated
(or not needed) in stylesheet color info. Possible I was confused.

Certainly confused. There are five ways of specifying colours in CSS. Two
of them require a hash sign, the other three must never have a hash sign.

color: #F00; /* 3-digit hex */
color: #FF0000; /* 6-digit hex */
color: red; /* colour keywords */
color: rgb(255,0,0) /* RGB function (decimal) */
color: rgb(100%,0,0) /* RGB function (percentage) */

(There are also the "system colours", but these just expand the set of
colour keywords.)

So are you folks always so aggressive in your responses? You will scare
off many with such tactics

Perhaps that's the idea: maybe we don't want those who are easily scared
sticking around.

 

[Alan J. Flavell]

This would also do the hover effect on <a name="..."> , which is
probably not what's wanted. I'd suggest using a:link:hover , to avoid
that happening.

Try putting them in proper order: link, visited, hover, active

That too.

 

[Woodmon]

Certainly confused. There are five ways of specifying colours in CSS.
Two of them require a hash sign, the other three must never have a
hash sign.

color: #F00; /* 3-digit hex */
color: #FF0000; /* 6-digit hex */
color: red; /* colour keywords */
color: rgb(255,0,0) /* RGB function (decimal) */
color: rgb(100%,0,0) /* RGB function (percentage) */

(There are also the "system colours", but these just expand the set of
colour keywords.)


Perhaps that's the idea: maybe we don't want those who are easily
scared sticking around.

Glad I didn't scare you off Tony ;-).

Thanks much. Inserting the hash mark worked. And reordering the
hover entry also worked.

Now I recall covering this stuff in the 90's when I first
learned HTML/CSS. Obviously I need to brush up at w3.org.

Now I just need to find a solution to my original question. Which was...

The link border color around images in IE are not
properly overridden by CSS. But the color of text
links in IE are overridden correctly. Any worka
arounds? CSS link color overrides work fine in
Firefox (for both text links and image links).
..

Woodmon

 

[Neredbojias]

So are you folks always so aggressive in your responses? You will scare
off many with such tactics and do your business(es) listed in your sig a
dis-service.

Ah, that's just to prevent the group from being taken over by whiny
women or winey men.

 

[Andy Dingley]

(There are also the "system colours", but these just expand the set of
colour keywords.)

Well not really - they are coded into CSS like that, but their purpose
is that they provide an extra layer of indirection. Using the system
colours I can make a form background match a system dialog, even if the
user's desktop colours have their dialog boxes in pink with green
buttons.

 

[Andy Dingley]

This would also do the hover effect on <a name="..."> , which is
probably not what's wanted. I'd suggest using a:link:hover , to avoid
that happening.

:link and :visited are disjoint though so you'd have to use a selector of

a:link:hover ,
a:visited:hover { ... }

 

[Woodmon]

:link and :visited are disjoint though so you'd have to use a selector
f

a:link:hover ,
a:visited:hover { ... }

Cool. So is the following "order" correct?

a:link { color: #66CCFF; }
a:link:hover { color: #CC66FF; background-color: #0099cc;
text-decoration: #000000;}
a:visited { color: #CC66FF; }
a:visited:hover { color: #CC66FF; background-color: #0099cc;
text-decoration: #000000;}
a:active { color: #CC66FF; }

 

[Jonathan N. Little]

Woodmon wrote:

Cool. So is the following "order" correct?

a:link { color: #66CCFF; }
a:link:hover { color: #CC66FF; background-color: #0099cc;
text-decoration: #000000;}

^^^^^^^^

No this is still incorrect, try

text-decoration: none

also try this:
http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration

Reading Assignment:
http://www.w3.org/TR/CSS21/

 

[kchayka]

Glad I didn't scare you off Tony ;-).

I'll make a guess you're new to usenet, not just this newsgroup, so
here's some friendly advice:

If you are going to name names, please be more conscious of spelling
(and punctuation). One way to get on somebody's bad side is to misspell
their name.

*Toby* should be the one to nail you on this.

The link border color around images in IE are not
properly overridden by CSS.

IE's CSS is broken in many regards, this is a very minor case.
Personally, I wouldn't bother with something this trivial, but if it is
all that important to you, you might try something like

a:link img {border-color: #6cf;}
a:visited img ...

No guarantees, though.

 

[Alan J. Flavell]

:link and :visited are disjoint though so you'd have to use a selector of

a:link:hover ,
a:visited:hover { ... }

If you wanted the hover effect on visited links, yes. Last occasion
that I was involved in this, we decided that we didn't - their
distinctive colour was considered enough - but that choice isn't
binding on anything else, obviously.

cheers.

 

[Andy Dingley]

If you wanted the hover effect on visited links, yes.

Now why on earth wouldn't you ? The idea of different behaviours based
on past history of that link strikes me as very odd design. Mind you, I
never understood why :visited wasn't just a subset of :link in the first
place.

 

[Alan J. Flavell]

Now why on earth wouldn't you ?

I refer the hon. Gent. to my previous answer:

|Last occasion that I was involved in this, we decided that we didn't -
|their distinctive colour was considered enough - but that choice
|isn't binding on anything else, obviously.

Speaking for myself, I consider the :hover to be a rather fatuous
decoration, which all too often tempts deezyners to Mystery Meat
Navigation, in which the links are effectively indistinguishable from
normal text unless and until one hovers over them. But that hadn't
quite happened here, and the "customer" wanted the hover effect: I
didn't bring my personal opinion on :hover into the discussions at
all. I did, however, point out that her <a name=...> anchors were
responding to her :hover style, and the reviewing team agreed that
wasn't such a good idea. Which brings us back to the point.

At the start of reviewing her design, there was no distinction between
nonvisited and visited links.

After fixing the anchors problem by using a:link:hover, the only
distinction between nonvisited and visited links was that the visited
links didn't respond to :hover. I managed to convince the reviewing
team that a change in colour was desirable in addition, though.

None of this is binding on anyone else's design, so I'm not going to
get into an argument about it. I'm just trying to summarise how this
came to pass in one particular case.

OK?

 

[Neredbojias]

With neither quill nor qualm, Andy Dingley quothed:

Now why on earth wouldn't you ? The idea of different behaviours based
on past history of that link strikes me as very odd design. Mind you, I
never understood why :visited wasn't just a subset of :link in the first
place.

Perhaps some people would confuse it with "missing".