 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / March 2008Strange(?) behavior with styled links
I have a menu with selections: <a class="nav4w" href="foo.html">buttontext </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,  SignatureEd Jay (remove 'M' to respond by email) > a.nav4w:link {color:#f8fafc;} > a.nav4w:hover {color:#330099;background-color:#f8fafc;} [quoted text clipped - 3 lines] > 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 Signature-bts -"Las Vegas Has Animals" Beauregard T. Shagnasty scribed: >> a.nav4w:link {color:#f8fafc;} >> a.nav4w:hover {color:#330099;background-color:#f8fafc;} [quoted text clipped - 6 lines] >You have the order wrong above. Needs to be: >link, visited, (focus,) hover, active Thank you... SignatureEd Jay (remove 'M' to respond by email) At 11:27:16 on Sat, 29 Mar 2008, Ed Jay <edMbj@aes-intl.com> wrote in <gf2tu3le195mqu0l9ih375mti3sip5ppfr@4ax.com>: >Beauregard T. Shagnasty scribed: > >>> 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...!) SignatureMolly 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.) 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>: [quoted text clipped - 13 lines] > (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.infosystems.www.authoring.stylesheets/msg/47 063946e8b87860 > A better solution yet would be to explain ............ <http://meyerweb.com/eric/css/link-specificity.html> SignatureGus > > 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.infosystems.www.authoring.stylesheets/msg/47 063946e8b87860 The link's own classes have bigger weight than universal dynamic classes. > > <http://meyerweb.com/eric/css/link-specificity.html> > [quoted text clipped - 3 lines] > 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> > > > <http://meyerweb.com/eric/css/link-specificity.html> > [quoted text clipped - 37 lines] > </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> >> > 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-- SignatureMy blog: http://shermspace.blogspot.com Cocoa programming in Perl: http://camelbones.sourceforge.net > >> <http://meyerweb.com/eric/css/link-specificity.html> > [quoted text clipped - 4 lines] > 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.infosystems.www.authoring.stylesheets/msg/87 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. > > <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. > > > <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 helper 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. >> > > <http://meyerweb.com/eric/css/link-specificity.html> >> [quoted text clipped - 9 lines] > > 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? SignatureBen. >> <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 help 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.infosystems.www.authoring.stylesheets/msg/47 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. :-\ SignatureBerg > At 11:27:16 on Sat, 29 Mar 2008, Ed Jay <edMbj@aes-intl.com> wrote in > <gf2tu3le195mqu0l9ih375mti3sip5ppfr@4ax.com>: [quoted text clipped - 12 lines] > > A useful mnemonic to use in the future is Little Virgins Have Arses. Not as good as Beauregard's (which, btw, he should not have put below his signature as it was quite relevant to the subject) for the reason that big virgins also have this part of the anatomy. In other words, there is nothing special about little virgins in this regard. The world is choco block of such humans and why would anyone remember your ditty. I have forgotten it already... what did you say? Signaturedorayme Beauregard T. Shagnasty vertrouwde ons toe: >> a.nav4w:link {color:#f8fafc;} >> a.nav4w:hover {color:#330099;background-color:#f8fafc;} [quoted text clipped - 6 lines] > You have the order wrong above. Needs to be: > link, visited, (focus,) hover, active Not according to Eric Meyer http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states/ SignatureRob > Beauregard T. Shagnasty vertrouwde ons toe: >> [quoted text clipped - 12 lines] > > http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-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/2007/06/04/ordering-the-link-states/ "“:link, :visited, :focus, :hover, :active” should be the most useful way […]." "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. Signature-bts -Friends don't let friends drive Vista |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.