Good explanations. Thanks so much Russ! You won't believe this but I totally forgot about checking the html and kept staring at the css instead lol. ttSoftOrangeArial class is inside the 'a' element and ttSoftOrange is outside so the problem lies with me :D With Regards Jaime Wong ~~~~~~~~~~~~~~~~~~~~~~~~~~ SODesires Design Team http://www.sodesires.com ~~~~~~~~~~~~~~~~~~~~~~~~~~ -------Original Message------- From: [EMAIL PROTECTED] Date: 04/17/04 09:20:23 To: Web Standards Group Subject: Re: [WSG] Pseudo-classes - Links - Weird issues Jamie, This is hard to answer as we cannot see your html. The class could be inside or outside the 'a' element, which will affect the way you set up your selector. INSIDE THE 'A' ELEMENT Assuming that your class was inside the 'a' element like this: <a href="#" class="poo">text here</a> The correct markup would be: a.poo:link {} a.poo:visited {} a.poo:hover {} a.poo:active {} Note that the class comes directly after the element (in this case the 'a'). The pseudo-classes (eg 'hover'), which do not exist in the document tree, come after the class. This would be the same for ID. OUTSIDE THE 'A' ELEMENT However, if your class was outside the 'a' element like this: <p class="poo"><a href="#">text here</a></p> Then one way to mark the a element would be: .poo a:link { } .poo a:visited { } .poo a:hover { } .poo a:active { } Although, you could also use the following to be more specific: p.poo a:link { } p.poo a:visited { } p.poo a:hover { } p.poo a:active { } The best way to learn where to place your classes is to think of the document tree and work down from the top - starting with the body. Then you will know how to mark up your selectors correctly. More on that here: http://css.maxdesign.com.au/selectutorial/document_tree.htm Whenever I get stuck I draw a quick little document tree and it immediately become clear how to structure the relevant selector. Also worth noting, link and link pseudo class selectors should always appear in your style sheet in the following order. If your hover and active states don't appear to be working, this may be the cause. a{} a:link {} a:visited {} a:hover {} a:active {} The best way I find to remember this is to think of love-hate, or 'LoVeHAte'. Very apt, as many of us have a love-hate relationship with pseudo selectors. :) Russ > I must have overlooked something but I have looked trough the CSS many times > and can't find anything wrong with it. Facing problems with :hover for one > of the class when it worked for the rest. > > By the way how do the rest of you style your links? (for Class not ID) ***************************************************** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help *****************************************************
***************************************************** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help *****************************************************
