Incorrect Order for Selector Pseudo-classes In Blocks.css Causes unexpected Link Behaviour - Hover not working.
| Project: | Genesis |
| Version: | 6.x-2.4 |
| Component: | Genesis SUBTHEME |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Jump to:
I am new to Drupal and trying to contribute where I can. I was styling a menu using the css available around line 130 of blocks.css in the Genesis SUBTHEME and I noticed some things that appeared not to be working.
The css looked like this:
ul.menu li a:link {}
ul.menu li a:hover {}
ul.menu li a:visited {}
ul.menu li.active a {}
ul.menu li.active-trail {}
I believe that visited has to come before hover. Also "ul.menu li.active a" was getting superceeded until I changed it to "ul.menu li a.active" which worked. Additionally I couldn't get active-trail to work as it was superceeded by visited, so I added "a:visited" to the .active-trail selector.
The changed css looks like this: (ignore the colors, they are just there for testing).
ul.menu li a:link {color:#FFFFFF;}
ul.menu li a:visited {color:#FFFFFF;}
ul.menu li a:hover {color:#E2C8A2;}
ul.menu li a.active {color:#E2C8A2;}
ul.menu li.active-trail a,
ul.menu li.active-trail a:visited {color:#E2C8A2;}
#1
Yes, this is bang on and is fixed in my other themes and will be in the head of Genesis very soon.
I normally do something similar to what you have, and usually include a :focus pseudo selector as well piggy backing on the hover style, something like this:
ul.menu li a:link,ul.menu li a:visited {}
ul.menu li a:hover,
ul.menu li a:focus,
ul.menu li a:active {}
ul.menu li a.active {}
ul.menu li.active-trail a {}
In fact (by memory...) its not only incorrect for menu links but all the pseudo selectors in the entire page.css file, so they all need reordering to be correct and make better sense.Hmmm, on actually looking, looks like I fixed the ones in page.css but not these menu link classes in blocks.css...
#2
Great Jeff. Thanks for all the hard work.