CSS needs explicit background-color to avoid unintentional override
koyama - October 8, 2009 - 20:18
| Project: | Administration menu |
| Version: | 6.x-3.x-dev |
| Component: | CSS / Browser Support |
| Category: | task |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed |
Description
I was modifying the CSS for a custom theme. Suddenly the background color changed in the admin_menu as a result of using this piece of seemingly harmless CSS
a:link, a:visited, a:hover, a:active {color: red; background: beige;}See attachment of screen shot where bluemarine theme was modified as an example.
The intention of the CSS for admin_menu is that text is (almost) white on black background. There is the following selector in admin_menu.css which makes the link text (almost) white:
#admin-menu ul a { color: #eee; }To avoid funny effects like mentioned above, it should specify background-color explicitly:
#admin-menu ul a { color: #eee; background-color: transparent; }This is in accordance with general advice in CSS to specify background-color whenever color is specified in a selector and vice-versa.
| Attachment | Size |
|---|---|
| ss20091008211912.png | 63.45 KB |
#1
admin_menu's CSS uses ID #admin-menu, while yours uses no ID or class, thereby taking over the CSS of the entire page.
#2
What do you mean by taking over the CSS of the entire page? There are specificity rules to resolve which CSS selector applies.
Are you saying that nothing should be changed in admin_menu's CSS?
#3
I think modules work best when least defined -- that is, another may find this actually yields desired results and may even use it presently.
Your initial style overrides the background colors for all hyperlinks in Drupal and forces other modules to comply, whereas admin_menu's CSS respectfully just sets styles for admin_menu, so it would seem like the better solution would be to either just
That is all strictly my opinion though as an admin_menu user and general web developer.
#4
Had admin_menu specified
background-colorfor the links, then my initial style would not override it. You seem to be ignoring specificity.Module style sheets as well as custom style sheets should for each CSS selector either specify values for both color and background-color or not specify them at all. Only in this way is it guaranteed that the combined style sheet does not result in e.g. white text on white background for some elements. Please pay attention to how the cascade works in CSS, including specificity.
#5
ugh. Can we make more love? :)
Administration menu already tries to intercept many global styles, so adding background to the list sounds ok to me.
Please test attached patch.
#6
Thank you both for looking at this. The patch does its job. Green light from me.
#7
Thanks for reporting, reviewing, and testing! Committed to all branches.
A new development snapshot will be available within the next 12 hours. This improvement will be available in the next official release.
#8
Automatically closed -- issue fixed for 2 weeks with no activity.