Topic on Project:Support desk

I have an established wiki built under 1.24, with an extensive CSS modification file. One of the CSS changes is to set the hover color of links and add a graphic underline. This has worked perfectly in body, sidebar and top nav for about a year.

With the update to 1.26, everything works fine EXCEPT that mousing over the wiki logo now makes it disappear, with a base fragment of the graphic link underline appearing in its place (centered in the logo space). I have laboriously removed link redefinition lines and discovered that it's the background definition that is mucking up the wiki logo; remove it and everything works fine (except, of course, that my links no longer have the graphic underline); put it back in, even with the strongest 'negating' I can apply to the wiki logo class, and the disappearing act occurs.

Here is the CSS code that changes my link colors and positions the graphic underline:

a:link, a:visited {
color: #0077bb !important;
text-decoration:none;
padding-bottom: 3px;
}

a:hover,a:active {
color:#eeaa00 !important;
text-decoration:none;
background: url(/mh_media/linkbar.jpg) repeat-x 100% 100%;
padding-bottom: 3px;
white-space: nowrap;
}

Again, if I remove that background statement, the wiki logo action is fine. Put it back, with any number of different parameters, and attempts to frame a 'not' statement under .mw-wiki-logo, and the logo disappears on mouseover. (I had a few code bits in the original to negate link changes for the logo; they no longer seem to matter.)

Any thoughts on how I can keep my link code as-is (functionally, at least) and not have the logo flash out of existence on mouseover?

Site is at www m a x h e a d r o o m com (obfuscating to keep this out of the search lists). Thanks.

It may be worth adding that the effect does NOT happen on the "Powered by MediaWiki" logo in the footer...

The problem is caused by the background, which you define for a:hover:

a:hover, a:active {
   background: rgba(0, 0, 0, 0) url(/mh_media/linkbar.jpg) repeat-x scroll 100% 100%;
}

Do I understand it correctly that you in fact want the links in the page content to be underlined, and all other links should stay normal? In that case, you should prepend your rules with something like .mw-body-content like so:

.mw-body-content a:hover, .mw-body-content a:active {
   ...
}

No, I'd like it to use my specified color set, and use the graphic underline, for all text links. This was working as desired under 1.24, but now the same code (and every attempt to adjust it) produces the odd action for the wiki logo image.

Limiting my link definitions to those two body classes fixes the logo problem, but at the cost of removing the graphic underline from all the top and sidebar nav links. I'd rather find a fix that specifically blocks the attributes from the icon link, so that all other text links in and out of the content show the underline effect.

Fixed the problem with:

.mw-wiki-logo {
background-image: url(/resources/assets/mhcom_max_animated.gif) !important;
}

which forces the logo image to always point to the correct file. This is at best a workaround, though, since changing the icon definition would not change this override.

With this additional pointer, which seems to say that the wiki icon is used as a background, and my background statement for links is overriding it on hover and active - can anyone write me a true fix that will short-circuit the override my code is trying to apply to the logo background?

Hmm, I personally don't think the logo is a text link.

Ok, two possible solutions:

Either you put your special styles to all links and then you remove it again from the logo link. Or you specially set it only for those parts of the page, where you want them to be, e.g. page content, sidebar, footer, whatever else.

For example:

/* Change styling of each and every link */
a:hover, a:active {
  background: rgba(0, 0, 0, 0) url(/mh_media/linkbar.jpg) repeat-x scroll 100% 100%;
  /* ... */
}
/* Undo these changes for the logo link */
.mw-wiki-logo a:hover, .mw-wiki-logo a:active {
  background: none; /* untested */
}

I understand (completely) the process of doing a global style, then using a specific "unstyle" to remove selected styles that would otherwise be included. I've done that throughout this and other sites. However, I've completely exhausted the options and combinations for trying to "unstyle" just .mw-wiki-logo, as nothing including various !important'ed entries has the slightest effect. Only two things have had any effect on the problem: NOT using the background effect as part of the link redefinition, and using the above hard override to force the wiki logo background (which is how it's displayed) to a specific file. The latter works, but it's painfully kludgy.

The logo may or may not be a text link, but I can't find or figure out where to block the global link redefinition from applying to it - I can only assume it's somewhere higher in the code than .mw-wiki-logo. I was/am hoping someone more familar with the code could point me to the effective point of change; in the meantime, I will keep drudging through it myself.