weird CSS problem

[dee_ss2001]

Hello all,

I keep having a weird CSS problem, I wonder if you can tell me if I'm doing
something wrong.

Here is the CSS I have been using for a while:
**start
..textNormal {font-family: Arial, Helvetica, sans-serif; font-size: 16px;
color: #000000}
..textNormal A:visited, A:active {COLOR: #063F6B}
..textNormal A:hover {BACKGROUND: #17598C; COLOR: #ffffff; text-decoration:
none}

..textBold {font-family: Arial, Helvetica, sans-serif; font-size: 18px;
color: #000000}
..textBold A:visited, A:active {COLOR: #063F6B}
..textBold A:hover {BACKGROUND: #17598C; COLOR: #ffffff; text-decoration:
none}

..navigation-bar {font-family: Arial, Helvetica, sans-serif; font-size: 18px;
text-align: center; }
..navigation-bar a:link, a:visited, a:active {COLOR: #063F6B}
..navigation-bar a:hover {BACKGROUND: #17598C; COLOR: #ffffff;
text-decoration: none}

..textSmall { font-family: Arial, Helvetica, sans-serif; font-size: 13px;}
..textWhite {font-family: Arial, Helvetica, sans-serif; font-size: 16px;
color: #FFFFFF}
**end

All works fine, but I recently decided to have a second navigation bar with
different colours, so I tried adding an extra bit at the bottom, so the
whole thing is:

**start
..textNormal {font-family: Arial, Helvetica, sans-serif; font-size: 14px;
color: #000000}
..textNormal A:visited, A:active {COLOR: #063F6B}
..textNormal A:hover {BACKGROUND: #17598C; COLOR: #ffffff; text-decoration:
none}

..textBold {font-family: Arial, Helvetica, sans-serif; font-size: 17px;
color: #000000}
..textBold A:visited, A:active {COLOR: #063F6B}
..textBold A:hover {BACKGROUND: #17598C; COLOR: #ffffff; text-decoration:
none}

..navigation-bar {font-family: Arial, Helvetica, sans-serif; font-size: 17px;
text-align: center; }
..navigation-bar a:link, a:visited, a:active {COLOR: #063F6B}
..navigation-bar a:hover {BACKGROUND: #17598C; COLOR: #ffffff;
text-decoration: none}

..textSmall {font-family: Arial, Helvetica, sans-serif; font-size: 12px;}
..textWhite {font-family: Arial, Helvetica, sans-serif; font-size: 17px;
color: #FFFFFF}
..textWhiteSmall {font-family: Arial, Helvetica, sans-serif; font-size: 12px;
color: #FFFFFF}

..alt-nav {font-family: Arial, Helvetica, sans-serif; font-size: 16px;
text-align: center; color: #000000}
..alt-nav a:link, a:visited, a:active {COLOR: #ffffff}
..alt-nav a:hover {BACKGROUND: #ffffff; COLOR: #17598C; text-decoration:
none}
**end

The new colours seem to work fine on the second navigation bar, but for
some reason, the colours of the 'visited' links on the original bar have
changed. How can this be when nothing has changed there??

All I can think is that you're only allowed one 'visited' attribute per page
and it takes the last one in the CSS, but I wouldn't have thought that was
the case. Any ideas?

Thanks
Damian

 

[Eric Bohlman]

All works fine, but I recently decided to have a second navigation bar
with different colours, so I tried adding an extra bit at the bottom,
so the whole thing is:

**start
.textNormal {font-family: Arial, Helvetica, sans-serif; font-size:
14px; color: #000000}
.textNormal A:visited, A:active {COLOR: #063F6B}

That selector is a lot less specific than you think it is. It applies to
an A:visited that's a descendant (or self) of an element with class
textNormal, but it also applies to *any* A:active anywhere. The class
specification doesn't "distribute" over the list of selectors; each comma-
separated selector stands on its own. IOW, it's just a shorthand for:

..textNormal A:visited {COLOR: #063F6B}
A:active {COLOR: #063F6B}

What you need to write is:

..textNormal A:visited, .textNormal A:active {COLOR: #063F6B}

You've got quite a few cases of this misunderstanding in your example,
which are almost certainly causing the problem.

 

[dee_ss2001]

That selector is a lot less specific than you think it is. It applies to
an A:visited that's a descendant (or self) of an element with class
textNormal, but it also applies to *any* A:active anywhere. The class
specification doesn't "distribute" over the list of selectors; each comma-
separated selector stands on its own. IOW, it's just a shorthand for:

.textNormal A:visited {COLOR: #063F6B}
A:active {COLOR: #063F6B}

What you need to write is:

.textNormal A:visited, .textNormal A:active {COLOR: #063F6B}

You've got quite a few cases of this misunderstanding in your example,
which are almost certainly causing the problem.

Thanks for that Eric !!