Closed Bug 852712 Opened 12 years ago Closed 12 years ago

css: opacity preventing link colors from changing

Categories

(Core :: DOM: CSS Object Model, defect)

Product:
Core
Component:
DOM: CSS Object Model
Version:
19 Branch
Platform:
x86_64
Windows 7
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: edlion1, Unassigned)

Details

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:19.0) Gecko/20100101 Firefox/19.0 Build ID: 20130307023931 Steps to reproduce: Updating the style on my site adding lower opacity to certain links with the following a.menuSpecificLinkLow:link {color:#0000FF;text-decoration:none; font-size:11pt; opacity:0.8;} a.menuSpecificLinkLow:hover {color:#ff7b00;text-decoration:none; font-size:11pt; opacity:1.0;} a.menuSpecificLinkLow:active {color:#00FF00;text-decoration:none; font-size:11pt; opacity:1.0;} a.menuSpecificLinkLow:visited {color:#FF0000;text-decoration:none; font-size:11pt; opacity:0.8;} Actual results: The opacity seams to have stopped the link colour from changing. Iv tried putting colour after the opacity but it doesn't fix it - all my links are RED. In other browsers, google chrome and safari the bug goes the other way and the opacity isn't working. In IE however its running fine! This is rather annoying, I would prefer it to change the colour rather than the opacity given the choice of bug. Expected results: It should change both colour and opacity.
used here <A HREF="gall.php?Type=Dog&Specifically=Cavalier King Charles Spaniel" class="menuSpecificLinkLow"><li>Cavalier King Charles Spaniel</li></A> OR <li><A HREF="gall.php?Type=Dog&Specifically=Cavalier King Charles Spaniel" class="menuSpecificLinkLow">Cavalier King Charles Spaniel</A></li>
WFM, must be a CSS rule that is overriding it: http://jsfiddle.net/D3Ya9/
Status: UNCONFIRMED → RESOLVED
Closed: 12 years ago
Resolution: --- → WORKSFORME
Component: Untriaged → DOM: CSS Object Model
Product: Firefox → Core
(In reply to Jesper Hansen from comment #2) > WFM, must be a CSS rule that is overriding it: > http://jsfiddle.net/D3Ya9/ Sorry maybe i wasn't clear, you need to click it first. I can reproduce this with this on 2 computers with just this, but you have to 'visit' the page for the bug to appear. <!DOCTYPE html> <HTML> <HEAD> <style type="text/css"> <!--// a.menuSpecificLinkLow:link {color:#0000FF; text-decoration:none; font-size:11pt; opacity:0.5;} a.menuSpecificLinkLow:hover {color:#000000; text-decoration:none; font-size:11pt; opacity:1.0;} a.menuSpecificLinkLow:active {color:#00FF00; text-decoration:none; font-size:11pt; opacity:1.0;} a.menuSpecificLinkLow:visited {color:#FF0000; text-decoration:none; font-size:11pt; opacity:0.5;} //--> </STYLE> </HEAD> <BODY> <A HREF="#" class="menuSpecificLinkLow">LINK</A> </BODY> </HTML>
Status: RESOLVED → UNCONFIRMED
Resolution: WORKSFORME → ---
this is a very deep rabbit hole it happy with ... a.menuSpecificLinkLow:link, a.menuSpecificLinkLow:active, a.menuSpecificLinkLow:visited {color:#F8F8F4; text-decoration:none; font-size:11pt; opacity:0.8;} a.menuSpecificLinkLow:hover {color:#ff7b00; text-decoration:none; font-size:11pt; opacity:1.0;} seeing any meaningful difference!? I'm not... but let me know if there is. I do not think its down to opacity at all now. It appears FF is just having a very hard time with CSS on links in general. I am suspecting a bug is better pointed to the programs apparent inability to reload a page with CSS on it (ctrl+F5). Iv been clearing out all temp files and such each time trying to get my head around this. all i can say is it appears that something around CSS and links is unstable.
The CSS in this example is just buggy. The element is matched by multiple selectors, all with the same specificity, so the latest one wins. Specifically, if the link has been clicked on, then it will be matched by both "a.menuSpecificLinkLow:hover" and "a.menuSpecificLinkLow:visited" but the latter comes later, so wins out. This is why you want to either write the :hover selector with :link in it, or make sure to put it after the :link and :visited selectors. See http://blogs.adobe.com/cantrell/archives/2003/04/order_of_anchor.html for example, or the clear note in red text in the spec at http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes .
Status: UNCONFIRMED → RESOLVED
Closed: 12 years ago → 12 years ago
Resolution: --- → INVALID
> seeing any meaningful difference!? Yes, you changed the order so the :hover comes last. And for CSS selectors order matters.
You need to log in before you can comment on or make changes to this bug.