Sidebar links wobble when hovered

Question

I just happened to notice a minor but annoying quirk in the styling of linked / related questions sidebar — when you hover the mouse over the links, all the following links move down by one pixel:

Now that I've seen in, I can't un-see it, so I thought I'd share it with the rest of you instead. ;-)

Anyway, the problem is caused by the way hovered link underlining is implemented here for question / answer links (with a 1px bottom border, instead of normal underlining), combined with the inline-block styling of the links in the sidebar (which makes borders on those links count as part of the space occupied by the block). It also happens on a few other SE sites from the same era, and with similar link styling, such as Seasoned Advice.

Anyway, I can see a number of ways to fix this:

1. Add an invisible underline to all question hyperlinks, even when not hovered, like this:

   .question-hyperlink { border-bottom: 1px solid transparent }
   

   This will have no effect on most such links (since they're normally inline elements, and thus their borders do not take up actual screen space), but will eliminate the jitter from any question links styled as blocks (or inline-blocks). As a minor side effect, this would increase the vertical spacing of sidebar links by one pixel (which, if unwanted, could be compensated for e.g. by reducing the surrounding margin).

2. Remove the dotted bottom border from hovered links in the sidebar, and (optionally) replace it with normal underlining, like this:

   #sidebar .question-hyperlink:hover {
       border-bottom: none;
       text-decoration: underline;
   }
   

   Notably, this makes the related / linked questions sidebars (somewhat more) consistent with the hot network questions sidebar, which already uses normal underlining.

3. Remove the display: inline-block styles from the links themselves, and wrap them in a surrounding <div> (or <span>) with those style instead. This should get rid of the jitter, without breaking the line wrapping that the inline-block styling is meant to fix. (Simply removing it causes the left margin to wrap around the floating vote count for long question titles.)

   This is probably the most portable fix, in the sense that it could be applied on all SE sites, without (AFAICT) breaking the design on any of them, but it's not a pure CSS fix, since it requires adding an extra HTML element to each link. That said, if you want to test it, here's a quick jQuery command you can paste into your browser's JS console:

   $('#sidebar .question-hyperlink').css( { display: 'inline' } ).wrap(
     '<div style="display: inline-block; width: 163px;"></div>'
   );
   

   IMO, this is also the nicest-looking solution, since it keeps the dotted underlining, but makes it appear properly under each line of the link, rather than just under the last line.

Answer 1

I pushed a fix for this. Change will be on live after our next production build.