weird problems with css and link hover

**Andrew Thompson** · Jul 20 '05, 05:06 PM

Re: weird problems with css and link hover

"LRW" <druid@NOSPAHMc elticbear.com> wrote in message
news:gQMEb.5999 19$Tr4.1568782@ attbi_s03...[color=blue]
> Below I'll paste my CSS and the HTML in question.[/color]

(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..)
[color=blue]
> But what's happening is, I'm trying to establish a link behavior for a[/color]
class[color=blue]
> 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.[/color]
....[color=blue]
> #notice {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 9px;[/color]
.....[color=blue]
> The HTML:
> <div align="center" id="notice">Thi s 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 © <? echo"$now"; ?> "<a
> href="http://www.celticbear. com" target="_blank" >Celticbear</a>"
> for <a href="http://www.mechphisto. net" target="_blank" >Mechphisto
> Designs</a></div>[/color]

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

**Sherm Pendley** · Jul 20 '05, 05:06 PM

Re: weird problems with css and link hover

Andrew Thompson wrote:
[color=blue]
> The 'id' type styles were only meant to be used once
> in each page - I have never quite figured why[/color]

"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--

**LRW** · Jul 20 '05, 05:06 PM

Re: weird problems with css and link hover

"Sherm Pendley" <spamfilter@d ot-app.org> wrote in message
news:duREb.806$ zC4.732826@news 2.news.adelphia .net...[color=blue]
> 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.[/color]

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...clas ses 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

**Andrew Thompson** · Jul 20 '05, 05:06 PM

Re: weird problems with css and link hover

"Sherm Pendley" <spamfilter@d ot-app.org> wrote in message
news:duREb.806$ zC4.732826@news 2.news.adelphia .net...[color=blue]
> Andrew Thompson wrote:
>[color=green]
> > The 'id' type styles were only meant to be used once[/color][/color]
....[color=blue]
> "id" is shorthand for "identifier ,"[/color]

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

**Sherm Pendley** · Jul 20 '05, 05:06 PM

Re: weird problems with css and link hover

LRW wrote:
[color=blue]
> 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?[/color]

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.co m/reference/css/>
<http://www.w3.org/MarkUp/Guide/Style>
[color=blue]
> Is the difference in class vs. id the use of the period vs. the pound sign
> before the name?[/color]

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.
[color=blue]
> How else can I make two separate...clas ses 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;
> }[/color]

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--

**LRW** · Jul 20 '05, 05:06 PM

Re: weird problems with css and link hover

"Sherm Pendley" <spamfilter@d ot-app.org> wrote in message
news:C3WEb.811$ zC4.810478@news 2.news.adelphia .net...[color=blue]
> 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.co m/reference/css/>
> <http://www.w3.org/MarkUp/Guide/Style>
>[/color]
SNIP![color=blue]
>
> Use the cascade, Luke... :-)[/color]
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

**Neal** · Jul 20 '05, 05:07 PM

Re: weird problems with css and link hover

"LRW" <druid@NOSPAHMc elticbear.com> wrote in message
news:cr%Eb.6114 98$Fm2.552576@a ttbi_s04...[color=blue]
> 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.[/color]
I[color=blue]
> really appreciate the time you put into your reply.
> Thanks again![/color]

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.

weird problems with css and link hover

weird problems with css and link hover

Comment

Comment

Comment

Comment

Comment

Comment

Comment