weird problems with css and link hover

Below I'll paste my CSS and the HTML in question.
But what's happening is, I'm trying to establish a link behavior for a class
that's separate from the normal link class. I've established a: 's with no
underline and then an underline for hover...but oddly, only ONE link will
actually show the underline on hover. All the rest, even with the same HTML,
won't pop up an underline.
I just don't get it!
If I could get any advice I'd really appreciate it!
Thanks!
Liam
PS: In the HTML below, ONLY the "W3C" hyperlink exhibits the hover bahavior
while the others will look the same otherwise, but won't underline on hover.

CSS:
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #AEE4FF;
text-decoration: none;

}
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #84D7FF;
text-decoration: underline;
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #AEE4FF;
text-decoration: none;
}
a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #CC99FF;
}
..WhiteNotice {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
color: #D9E6F2;
}
#notice {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: normal;
color: #D9E6F2;
text-decoration: none;
}
#notice a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: normal;
color: #AEE4FF;
text-decoration: none;
}
#notice a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: normal;
color: #84D7FF;
text-decoration: underline;
}
#notice a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: normal;
color: #AEE4FF;
text-decoration: none;
}
#notice a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: normal;
color: #CC99FF;
}

The HTML:
<div align="center" id="notice">This site best viewed at 800x600x16bit
color or higher, with a fully <a href="http://www.w3.org/">W3C</a>
compliant browser.<br>
(MS Explorer 5.5, Netscape 6.2, Opera 5 ....)<br>
Copyright &copy; <? echo"$now"; ?> &quot;<a
href="http://www.celticbear.com" target="_blank">Celticbear</a>&quot;
for <a href="http://www.mechphisto.net" target="_blank">Mechphisto
Designs</a></div>

"LRW" <druid (AT) NOSPAHMcelticbear (DOT) com> wrote

Below I'll paste my CSS and the HTML in question.

(scratches head.. why do people post code snippets
to CSS HTML groups - html/css would seem to be
_the_ things most suited to a link..)

But what's happening is, I'm trying to establish a link behavior for a
class
that's separate from the normal link class. I've established a: 's with no
underline and then an underline for hover...but oddly, only ONE link will
actually show the underline on hover.
....
#notice {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
.....
The HTML:
div align="center" id="notice">This site best viewed at 800x600x16bit
color or higher, with a fully <a href="http://www.w3.org/">W3C</a
compliant browser.<br
(MS Explorer 5.5, Netscape 6.2, Opera 5 ....)<br
Copyright &copy; <? echo"$now"; ?> &quot;<a
href="http://www.celticbear.com" target="_blank">Celticbear</a>&quot;
for <a href="http://www.mechphisto.net" target="_blank">Mechphisto
Designs</a></div

I am not sure of the solution, but a couple of comments
(experts please jump in and correct where necessary)

The 'id' type styles were only meant to be used once
in each page - I have never quite figured why, but
because if that I generally avoid them.

You have applied the ' id="notice">' only
to the W3C link. Is that what you were expecting
to be applied to the other elements?

--
Andrew Thompson
* http://www.PhySci.org/ PhySci software suite
* http://www.1point1C.org/ 1.1C - Superluminal!
* http://www.AThompson.info/andrew/ personal site

Andrew Thompson wrote:

The 'id' type styles were only meant to be used once
in each page - I have never quite figured why

"id" is shorthand for "identifier," and it's meant to uniquely identify
a single element. If you want to apply a style to a whole class of
elements, rather than just one, you'd want to use the - wait for it -
"class" attribute.

sherm--

"Sherm Pendley" <spamfilter (AT) dot-app (DOT) org> wrote

Andrew Thompson wrote:
"id" is shorthand for "identifier," and it's meant to uniquely identify
a single element. If you want to apply a style to a whole class of
elements, rather than just one, you'd want to use the - wait for it -
"class" attribute.

That's my problem, is I just don't know enough about class vs. id...or CSS
in general. I only started using them a few months ago as a replacement for
FONT tags.
Any good site recommendations to help explaing CSS to newbies?

Is the difference in class vs. id the use of the period vs. the pound sign
before the name?
How else can I make two separate...classes for different link attributes
then? So I can have some hyperlinks with a certain size and color, and then
another set of hyperlinks with a different height and color? Is that not
with the pound sign? Or, do I do this:
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #84D7FF;
text-decoration: underline;
}
..notice a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: normal;
color: #84D7FF;
text-decoration: underline;
}

Thanks for all advice and assistance!!!
Liam

"Sherm Pendley" <spamfilter (AT) dot-app (DOT) org> wrote

Andrew Thompson wrote:

The 'id' type styles were only meant to be used once
....
"id" is shorthand for "identifier,"

aahhh. Therein lies the misunderstanding..
I thought it was short for 'wizard of..' ;-)

LRW wrote:

That's my problem, is I just don't know enough about class vs. id...or CSS
in general. I only started using them a few months ago as a replacement for
FONT tags.
Any good site recommendations to help explaing CSS to newbies?

I haven't actually needed such an intro for a long time, so I don't have
a handy list of them. A bit of googling turned up some links that might
prove useful:

<http://www.htmlhelp.com/reference/css/>
<http://www.w3.org/MarkUp/Guide/Style>

Is the difference in class vs. id the use of the period vs. the pound sign
before the name?

That's the difference in how the style is defined, yes.

The difference in meaning is more important: An id is supposed to be
unique within the document, so a style that's defined with a "#" and an
id will only be applied to the single element that's identified by that
id. On the other paw, a style that's defined with a "." and class name
will be applied to any and all elements that are declared as belonging
to that class.

How else can I make two separate...classes for different link attributes
then? So I can have some hyperlinks with a certain size and color, and then
another set of hyperlinks with a different height and color? Is that not
with the pound sign? Or, do I do this:
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #84D7FF;
text-decoration: underline;
}
.notice a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: normal;
color: #84D7FF;
text-decoration: underline;
}

Use the cascade, Luke... :-)

First, notice that the two styles above have quite a bit in common -
there's an opportunity here to eliminate some redundancy. First, let's
define a "base" style for all your anchors:

a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
text-decoration: underline;
}

Now, let's define a style that overrides the link color when the mouse
is hovering over an anchor:

a:hover {
color: #84D7FF;
}

Finally, define a "class" style for anchors of class "notice". This
class overrides the font-size attribute.

a.notice {
font-size: 9px;
}

You could also combine pseudo-classes and classes to define a different
"hover" color for "notice" anchors:

a.notice:hover {
color: #FFFFFF;
}

You'll notice in the above that there are some apparent conflicts. The
font-size attribute, for example, is defined for both "a" and "a.notice"
classes, and the color attribute for both "a:hover" and "a.notice:hover".

Conflicts like this are resolved using a simple cascading rule: The most
specific selector "wins". The "a" style above, being applied to any
anchor element, is the least specific. Class selectors, like the ones
using "notice" above, are a bit more specific, being applied to only the
specified subset of anchor elements. A selector that uses an id, since
it's applied to only a single element, is the most specific of all.

The way this works in the above is, all the attributes listed in the
first and second styles are applied to un-classed anchor elements. For
an anchor with a class="notice" attribute, however, the two class
selectors are also applied; they're more specific, so the attributes in
them will "trump" any conflicting attributes that appear in the more
general styles listed first.

Hope this helps!

sherm--

"Sherm Pendley" <spamfilter (AT) dot-app (DOT) org> wrote

I haven't actually needed such an intro for a long time, so I don't have
a handy list of them. A bit of googling turned up some links that might
prove useful:

http://www.htmlhelp.com/reference/css/
http://www.w3.org/MarkUp/Guide/Style

SNIP!

Use the cascade, Luke... :-)
SNIP!

WOW! I mean, wow! That's great information! You just double or trippled my
understanding of CSS and really set me on the road to using them properly. I
really appreciate the time you put into your reply.
Thanks again!
Liam

"LRW" <druid (AT) NOSPAHMcelticbear (DOT) com> wrote

WOW! I mean, wow! That's great information! You just double or trippled my
understanding of CSS and really set me on the road to using them properly.
I
really appreciate the time you put into your reply.
Thanks again!

Another good intro site to CSS and HTML is htmldog.com, but it lacks in some
ways. Still, they start from the meaning/presentation division, and as
someone who knew a lot of HTML but not much CSS it was helpful to me, and I
still refer to it on ocassion.