PHWinfo banniere

Titres
PORTAIL ANNUAIRE ARTICLES COMPARATEUR HÉBERGEURS DEVIS FORUMS RÉDUCTEUR D'URL
Précédent   PHWinfo > Autres forums > Forum Programmation & Conception > comp.info.authoring.CSS > Strange(?) behavior with styled links
S'inscrire FAQ Membres Recherche Messages du jour Marquer les forums comme lus
Strange(?) behavior with styled links

Réponse
 
LinkBack Outils de la discussion
Vieux 29/03/2008, 18h51   #1
Ed Jay
Aucun Avatar
 
Messages: n/a
Hébergeur:
Par défaut Strange(?) behavior with styled links

I have a menu with selections:
<a class="nav4w" href="foo.html">buttontext&nbsp;</a>

Styled in an external style sheet as:

..nav4w {
padding:2px 0 3px 0;
display:block;
width:98%;
border-bottom:1px solid #300099;
margin-top:1px;
text-align:right;
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;font-size:100%;
font-weight:normal;
overflow:hidden;
}

a.nav4w:link {color:#f8fafc;}
a.nav4w:hover {color:#330099;background-color:#f8fafc;}
a.nav4w:visited {color:#ffff00;} /*background-color:#3c93db;*/
a.nav4w:active {color:#ffffff;}

If I specify a background-color for the visited link, it doesn't change on
hover. Is this normal, or what am I doing wrong?

TIA,
--
Ed Jay (remove 'M' to respond by email)
  Réponse avec citation
Vieux 29/03/2008, 19h02   #2
Beauregard T. Shagnasty
Aucun Avatar
 
Messages: n/a
Hébergeur:
Par défaut Re: Strange(?) behavior with styled links

Ed Jay wrote:

> a.nav4w:link {color:#f8fafc;}
> a.nav4w:hover {color:#330099;background-color:#f8fafc;}
> a.nav4w:visited {color:#ffff00;} /*background-color:#3c93db;*/
> a.nav4w:active {color:#ffffff;}
>
> If I specify a background-color for the visited link, it doesn't
> change on hover. Is this normal, or what am I doing wrong?


You have the order wrong above. Needs to be:
link, visited, (focus,) hover, active

--
-bts
-"Las Vegas Has Animals"
  Réponse avec citation
Vieux 29/03/2008, 19h27   #3
Ed Jay
Aucun Avatar
 
Messages: n/a
Hébergeur:
Par défaut Re: Strange(?) behavior with styled links

Beauregard T. Shagnasty scribed:

>Ed Jay wrote:
>
>> a.nav4w:link {color:#f8fafc;}
>> a.nav4w:hover {color:#330099;background-color:#f8fafc;}
>> a.nav4w:visited {color:#ffff00;} /*background-color:#3c93db;*/
>> a.nav4w:active {color:#ffffff;}
>>
>> If I specify a background-color for the visited link, it doesn't
>> change on hover. Is this normal, or what am I doing wrong?

>
>You have the order wrong above. Needs to be:
>link, visited, (focus,) hover, active


Thank you...
--
Ed Jay (remove 'M' to respond by email)
  Réponse avec citation
Vieux 30/03/2008, 08h55   #4
Molly Mockford
Aucun Avatar
 
Messages: n/a
Hébergeur:
Par défaut Re: Strange(?) behavior with styled links

At 11:27:16 on Sat, 29 Mar 2008, Ed Jay <edMbj@aes-intl.com> wrote in
<gf2tu3le195mqu0l9ih375mti3sip5ppfr@4ax.com>:

>Beauregard T. Shagnasty scribed:
>
>>Ed Jay wrote:
>>
>>> a.nav4w:link {color:#f8fafc;}
>>> a.nav4w:hover {color:#330099;background-color:#f8fafc;}
>>> a.nav4w:visited {color:#ffff00;} /*background-color:#3c93db;*/
>>> a.nav4w:active {color:#ffffff;}


>>You have the order wrong above. Needs to be:
>>link, visited, (focus,) hover, active

>
>Thank you...


A useful mnemonic to use in the future is Little Virgins Have Arses.
(For a while I tried suggesting Little Virgins Have Arms, but the former
proved the more memorable ... for some strange reason...!)
--
Molly Mockford
They that can give up essential liberty to obtain a little temporary safety
deserve neither liberty nor safety - Benjamin Franklin
(My Reply-To address *is* valid, though may not remain so for ever.)
  Réponse avec citation
Vieux 30/03/2008, 09h30   #5
VK
Aucun Avatar
 
Messages: n/a
Hébergeur:
Par défaut Re: Strange(?) behavior with styled links

On Mar 30, 11:55 am, Molly Mockford <nospamnob...@mollymockford.me.uk>
wrote:
> At 11:27:16 on Sat, 29 Mar 2008, Ed Jay <ed...@aes-intl.com> wrote in
> <gf2tu3le195mqu0l9ih375mti3sip5p...@4ax.com>:
>
> >Beauregard T. Shagnasty scribed:

>
> >>Ed Jay wrote:

>
> >>> a.nav4w:link {color:#f8fafc;}
> >>> a.nav4w:hover {color:#330099;background-color:#f8fafc;}
> >>> a.nav4w:visited {color:#ffff00;} /*background-color:#3c93db;*/
> >>> a.nav4w:active {color:#ffffff;}
> >>You have the order wrong above. Needs to be:
> >>link, visited, (focus,) hover, active

>
> >Thank you...

>
> A useful mnemonic to use in the future is Little Virgins Have Arses.
> (For a while I tried suggesting Little Virgins Have Arms, but the former
> proved the more memorable ... for some strange reason...!)


A better solution yet would be to explain the actual CSS rules
priority for links so to use either preferred way out of many to keep
the right priority. Otherwise all these "right orders" and "little
virgins" brings way too much of voodooism into styling. Just like
someone would making "Be Red" and "Rise Blue" slogans to memorize the
div order below for a particular color instead of understanding the
CSS rule override mechanics :-)
div {
color: blue;
}
div {
color: red;
}

The topic in question was once explained in details at
http://groups.google.com/group/comp....063946e8b87860

  Réponse avec citation
Vieux 30/03/2008, 14h19   #6
Rob Waaijenberg
Aucun Avatar
 
Messages: n/a
Hébergeur:
Par défaut Re: Strange(?) behavior with styled links

Beauregard T. Shagnasty vertrouwde ons toe:
> Ed Jay wrote:
>
>> a.nav4w:link {color:#f8fafc;}
>> a.nav4w:hover {color:#330099;background-color:#f8fafc;}
>> a.nav4w:visited {color:#ffff00;} /*background-color:#3c93db;*/
>> a.nav4w:active {color:#ffffff;}
>>
>> If I specify a background-color for the visited link, it doesn't
>> change on hover. Is this normal, or what am I doing wrong?

>
> You have the order wrong above. Needs to be:
> link, visited, (focus,) hover, active
>


Not according to Eric Meyer

http://meyerweb.com/eric/thoughts/20...e-link-states/

--
Rob
  Réponse avec citation
Vieux 30/03/2008, 14h29   #7
Gus Richter
Aucun Avatar
 
Messages: n/a
Hébergeur:
Par défaut Re: Strange(?) behavior with styled links

VK wrote:
>
> A better solution yet would be to explain ............


<http://meyerweb.com/eric/css/link-specificity.html>

--
Gus
  Réponse avec citation
Vieux 30/03/2008, 14h29   #8
Beauregard T. Shagnasty
Aucun Avatar
 
Messages: n/a
Hébergeur:
Par défaut Re: Strange(?) behavior with styled links

Rob Waaijenberg wrote:

> Beauregard T. Shagnasty vertrouwde ons toe:
>> Ed Jay wrote:
>>
>>> a.nav4w:link {color:#f8fafc;}
>>> a.nav4w:hover {color:#330099;background-color:#f8fafc;}
>>> a.nav4w:visited {color:#ffff00;} /*background-color:#3c93db;*/
>>> a.nav4w:active {color:#ffffff;}
>>>
>>> If I specify a background-color for the visited link, it doesn't
>>> change on hover. Is this normal, or what am I doing wrong?

>>
>> You have the order wrong above. Needs to be:
>> link, visited, (focus,) hover, active

>
> Not according to Eric Meyer
>
> http://meyerweb.com/eric/thoughts/20...e-link-states/


Note that the content and comments on this linked page are at odds.
Looks like about half of the respondents favor :focus after :hover, and
the other half prefer it before.

http://meyerweb.com/eric/thoughts/20...e-link-states/

"¡§:link, :visited, :focus, :hover, :active¡¨ should be the most useful
way [¡K]."

"I remember reading something a few years ago that used this piece of
wisdom to remember the order:
[L]uther [V]andross [F]ans [H]ate [A]bba.

Brilliant."

"I¡¦m with Jens. My favourite rule is ¡§Lord Vader¡¦s Former Handle
Anakin¡¨."

For :focus, it probably doesn't matter very much, as long as
link, visited, hover, active
are in this order.

--
-bts
-Friends don't let friends drive Vista
  Réponse avec citation
Vieux 30/03/2008, 15h27   #9
VK
Aucun Avatar
 
Messages: n/a
Hébergeur:
Par défaut Re: Strange(?) behavior with styled links

On Mar 30, 5:29 pm, Gus Richter <gusrich...@netscape.net> wrote:
> VK wrote:
>
> > A better solution yet would be to explain ............

>
> <http://meyerweb.com/eric/css/link-specificity.html>


The linked resource is erroneous, it just repeats the urban legend
about the "right order". Please read the post I linked with the proper
explanation:
http://groups.google.com/group/comp....063946e8b87860
The link's own classes have bigger weight than universal dynamic
classes.
  Réponse avec citation
Vieux 30/03/2008, 16h05   #10
VK
Aucun Avatar
 
Messages: n/a
Hébergeur:
Par défaut Re: Strange(?) behavior with styled links

> > <http://meyerweb.com/eric/css/link-specificity.html>
>
> The linked resource is erroneous, it just repeats the urban legend
> about the "right order". Please read the post I linked with the proper
> explanation:http://groups.google.com/group/comp....horing.stylesh...
> The link's own classes have bigger weight than universal dynamic
> classes.


I can only assume that the "right order" urban legend is based on
something like http://www.w3.org/TR/REC-CSS2/selector.html#q15 and
similar b.s. There is a lot of writing at W3C to laugh about...

P.S.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en-US">
<head>
<meta http-equiv="Content-type"
content="text/html; charset=iso-8859-1">
<title>Demo</title>
<style type="text/css">
a {
font-weight: bold;
}
a:link {
color: green;
}
a:hover {
color: blue;
}
a:link:hover {
color: red;
}
</style>
</head>
<body>
<p><a>A element</a></p>
<p><a name="foobar">Anchor</a></p>
<p><a href="http://www.example.com/foobar.html">Link</a></p>
</body>
</html>
  Réponse avec citation
Vieux 30/03/2008, 16h59   #11
VK
Aucun Avatar
 
Messages: n/a
Hébergeur:
Par défaut Re: Strange(?) behavior with styled links

On Mar 30, 7:05 pm, VK <schools_r...@yahoo.com> wrote:
> > > <http://meyerweb.com/eric/css/link-specificity.html>

>
> > The linked resource is erroneous, it just repeats the urban legend
> > about the "right order". Please read the post I linked with the proper
> > explanation:http://groups.google.com/group/comp....horing.stylesh...
> > The link's own classes have bigger weight than universal dynamic
> > classes.

>
> I can only assume that the "right order" urban legend is based on
> something likehttp://www.w3.org/TR/REC-CSS2/selector.html#q15and
> similar b.s. There is a lot of writing at W3C to laugh about...
>
> P.S.
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
> <html lang="en-US">
> <head>
> <meta http-equiv="Content-type"
> content="text/html; charset=iso-8859-1">
> <title>Demo</title>
> <style type="text/css">
> a {
> font-weight: bold;}
>
> a:link {
> color: green;}
>
> a:hover {
> color: blue;}
>
> a:link:hover {
> color: red;}
>
> </style>
> </head>
> <body>
> <p><a>A element</a></p>
> <p><a name="foobar">Anchor</a></p>
> <p><a href="http://www.example.com/foobar.html">Link</a></p>
> </body>
> </html>


Also if anyone wants to play more with link's own classes vs.
universal dynamic classes:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en-US">
<head>
<meta http-equiv="Content-type"
content="text/html; charset=iso-8859-1">
<title>Demo</title>
<style type="text/css">
a {
font-weight: bold;
}
a:link {
color: green;
}
a:visited {
color: cyan;
}
a:hover {
color: blue;
}
a:link:hover {
color: red;
}
a:visited:hover {
color: yellow;
}
</style>
</head>
<body>
<p><a>A element</a></p>
<p><a name="foobar">Anchor</a></p>
<p><a href="http://www.example.com/123456.html">Non-visited Link</a></
p>
<p><a href="http://www.google.com">Visited Link</a></p>
</body>
</html>
  Réponse avec citation
Vieux 30/03/2008, 17h57   #12
Sherman Pendley
Aucun Avatar
 
Messages: n/a
Hébergeur:
Par défaut Re: Strange(?) behavior with styled links

VK <schools_ring@yahoo.com> writes:

> On Mar 30, 5:29 pm, Gus Richter <gusrich...@netscape.net> wrote:
>> VK wrote:
>>
>> > A better solution yet would be to explain ............

>>
>> <http://meyerweb.com/eric/css/link-specificity.html>

>
> The linked resource is erroneous, it just repeats the urban legend
> about the "right order".


Not urban legend, but close. It was needed some time ago, to avoid hitting
a browser bug. I forget which browser, it was around the time of IE & NS
4.x or 5.x versions. Back when CSS support was newer and much dodgier than
it is now.

So there was some truth to it, at one time. But it's reached dogma, or
cargo-cult status now. The relevant bugs don't bite current browsers,
but people just keep repeating it anyway.

sherm--

--
My blog: http://shermspace.blogspot.com
Cocoa programming in Perl: http://camelbones.sourceforge.net
  Réponse avec citation
Vieux 30/03/2008, 18h40   #13
VK
Aucun Avatar
 
Messages: n/a
Hébergeur:
Par défaut Re: Strange(?) behavior with styled links

> >> <http://meyerweb.com/eric/css/link-specificity.html>
>
> > The linked resource is erroneous, it just repeats the urban legend
> > about the "right order".

>
> Not urban legend, but close. It was needed some time ago, to avoid hitting
> a browser bug. I forget which browser, it was around the time of IE & NS
> 4.x or 5.x versions.


NN 4.x did not provide :hover support at all, NN 5.x was never
released and NN 6.x already has :hover working in the way IE did. The
truth is much more sad than that. The post with proper explanation I
linked before is a part of a thread where I was OP:
http://groups.google.com/group/comp....16738337b06f97
Despite NN 4.x didn't support :hover, it was still used to beautify
pages in IE 4.x at least. Just like many others I hit a:hover styling
problem, failed to find any working explanation and by many tryouts I
found !important workaround. I used it for IE 4.x, IE 5.x, IE 6.x and
well possibly would keep using it till now if back in 2005 I wouldn't
get curious about this voodoo and got lucky to get an educated answer.
The same way the "right order" is another workaround of the same
problem found just like !important found by some unknown webmaster
back in 1998. The only difference is that the webmaster was somehow
connected with W3C and his trick got documented as an official CSS
behavior despite it was...
Here I do agree with you that "the right order" is indeed not a cargo
cult. A cargo cult is a set of semi-sacral but pointless actions which
is not a case here. Unless English language already has a term for
that, I would propose "rain call". In one South America village the
air is so humid that strong acoustic vibrations lead to concentration
and small rain. This way village dwellers are going to the top of the
hill, sing a song to their gods out loud and the rain comes. So that
could be called (both mine !important and W3C's right order) as "rain
call": thus a set of empirically found actions leading to the desired
results despite the actual mechanics of the phenomenon is completely
misunderstood by actors.
  Réponse avec citation
Vieux 31/03/2008, 13h47   #14
Andy Dingley
Aucun Avatar
 
Messages: n/a
Hébergeur:
Par défaut Re: Strange(?) behavior with styled links

On 30 Mar, 15:27, VK <schools_r...@yahoo.com> wrote:

> > <http://meyerweb.com/eric/css/link-specificity.html>

>
> The linked resource is erroneous, it just repeats the urban legend
> about the "right order".


Read Meyer's page you fruitbat. He explains it, and he explains it
clearly enough for an idiot to follow. If you know an idiot, perhaps
they'll explain it to you.
  Réponse avec citation
Vieux 31/03/2008, 19h30   #15
VK
Aucun Avatar
 
Messages: n/a
Hébergeur:
Par défaut Re: Strange(?) behavior with styled links

On Mar 31, 4:47 pm, Andy Dingley <ding...@codesmiths.com> wrote:
> On 30 Mar, 15:27, VK <schools_r...@yahoo.com> wrote:
>
> > > <http://meyerweb.com/eric/css/link-specificity.html>

>
> > The linked resource is erroneous, it just repeats the urban legend
> > about the "right order".

>
> Read Meyer's page you fruitbat.


I did.

> He explains it, and he explains it
> clearly enough for an idiot to follow.


His explanations are wrong, but his receipt does work: it happens, as
I explained before. By a turn a coin it could be another working
receipt, say !important which is maybe even easier as it doesn't
require to memorize some obscure poetry for the "right order".

> If you know an idiot, perhaps
> they'll explain it to you.


I don't really understand your excitement with all these "idiot"s
around. Just any beloved poetry to place rules in the "right order": I
pretty much sure that you personally don't need any mnemonic er by
now so no need to break your coding habits.

All I want to do is to stop this "use right order" voodoo and start
proper CSS rules explanation.

  Réponse avec citation
Vieux 31/03/2008, 19h44   #16
Ben Bacarisse
Aucun Avatar
 
Messages: n/a
Hébergeur:
Par défaut Re: Strange(?) behavior with styled links

VK <schools_ring@yahoo.com> writes:

> On Mar 31, 4:47 pm, Andy Dingley <ding...@codesmiths.com> wrote:
>> On 30 Mar, 15:27, VK <schools_r...@yahoo.com> wrote:
>>
>> > > <http://meyerweb.com/eric/css/link-specificity.html>

>>
>> > The linked resource is erroneous, it just repeats the urban legend
>> > about the "right order".

>>
>> Read Meyer's page you fruitbat.

>
> I did.
>
>> He explains it, and he explains it
>> clearly enough for an idiot to follow.

>
> His explanations are wrong,


Can you say where? It looked like a good explanation to me.

<snip>
> All I want to do is to stop this "use right order" voodoo and start
> proper CSS rules explanation.


What is the proper explanation and why is using the right order voodoo?

--
Ben.
  Réponse avec citation
Vieux 01/04/2008, 00h51   #17
Bergamot
Aucun Avatar
 
Messages: n/a
Hébergeur:
Par défaut Re: Strange(?) behavior with styled links

VK wrote:
> On Mar 30, 5:29 pm, Gus Richter <gusrich...@netscape.net> wrote:
>>
>> <http://meyerweb.com/eric/css/link-specificity.html>

>
> The linked resource is erroneous,


How so? Does it lie about anything?

> it just repeats the urban legend
> about the "right order".


Your use of the term "urban legend" is strange. There's nothing mythical
about the correct order of link pseudo-classes. Those acronyms used by
various sources are just to people remember, and there is nothing
"erroneous" about it.

What people really need is a little common sense.

> Please read the post I linked with the proper
> explanation:
> http://groups.google.com/group/comp....063946e8b87860


Your logic is flawed. Visited links that have focus or are active are
screwed. That's poor usability, but maybe that's what you wanted. :-\

--
Berg
  Réponse avec citation
Réponse


Outils de la discussion

Règles de messages
Vous ne pouvez pas créer de nouvelles discussions
Vous ne pouvez pas envoyer des réponses
Vous ne pouvez pas envoyer des pièces jointes
Vous ne pouvez pas modifier vos messages

Les balises BB sont activées : oui
Les smileys sont activés : oui
La balise [IMG] est activée : oui
Le code HTML peut être employé : non
Trackbacks are oui
Pingbacks are oui
Refbacks are oui


Fuseau horaire GMT +1. Il est actuellement 23h15.


Édité par : vBulletin® version 3.7.3
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0 RC5 Tous droits réservés.
Version française #16 par l'association vBulletin francophone
PHWinfo est un site Éducation Sans Frontières ©2000-2008
Ad Management by RedTyger
©Tous droits réservés par les parties respectives
Page generated in 0,25128 seconds with 25 queries