Question

I’m currently modifying the stylesheet on http://onverse.wikia.com/wiki/Onverse_Wiki. I’m having difficulties with the orange “Onverse Wiki” button at the left top of the page. What’s happening is when your put your mouse over the bottom part of the anchor, it doesn’t register the :hover pseudoclass. I’ve tried so many different things like changing the z-index, the display property, changing the line-height property, and nothing works. I’ve gone as far as removing all margins (which is necessary of course), borders, and paddings, so that the object itself is covering the whole area that it appears to be without any success.

However any place below the text you hover over with your mouse (even if it’s within the anchor tag), your cursor won’t turn into the pointer cursor. Clicking there does nothing. It isn’t actually dependent on the text is because… 1. The top, left, and right sides of the anchor tag still recognize when they’re being hovered over. 2. Changing height to 41px, padding to 0, display to table-cell, vertical-align to bottom, brings the text to the bottom of that area and you can clearly see the pointer cursor doesn’t appear when hovering over the bottom part of the text.

I’m thinking it has to do with its layout in relation to other elements maybe? I couldn’t figure out what would be interfering if anything was… And I already did change the z-index to like 100000, so the anchor would’ve been on top of everything. I had a similar problem before, with the blue buttons to the right, but all I had to do there was change the z-index to 1.

So I’m lost here. Any help? It would be much appreciated!

Answer 1

If you remove the height 8px from the following line of code it fixes it I think:

.WikiHeader h1::before, .WikiHeader .WikiaRail .module h2::before, .WikiaRail .module    .WikiHeader h2::before, .WikiHeader .WikiaRail #RIGHT_SKYSCRAPER h2::before, .WikiaRail #RIGHT_SKYSCRAPER .WikiHeader h2::before, .WikiHeader .shadow-mask {
  bottom: 0;
  height: 8px;
  position: absolute;
  right: 0;
  width: 1000px;
}