These 3 links in the top-bar:

Current Community, Your Communities, More Stack Exchange Communities

When you hover over the links, the height of the whole div.header changes from 28px to 29px, which is caused by this rule:

h3 a:hover { border-bottom: 1px dotted #ab2020; }

Tested in Chrome 33 and IE 11 in case it matters. Only happens on Arqade out of all the sites I checked (MSO, SO, SE.com).

share
    
Well, most other sites don't use border for link underlining ... –  user98085 Mar 24 at 23:40
    
Can repro on Safari on OS X as well. –  LessPop_MoreFizz Mar 24 at 23:42
    
Also reproducible on Firefox 28 / Linux. Given that those links are meant to be "hidden" features for power users, the extra border should probably simply be disabled for them. –  Ilmari Karonen Mar 25 at 16:00

1 Answer 1

It appears that the CSS rule used to reset the link hover styles for the top bar doesn't work fully here on Arqade, due to the unusual CSS here. Currently, this reset rule simply reads:

.topbar-dialog a:hover {
    color: #015490;
    text-decoration: none;
}

This fails to undo the link underlining hover effect inside headers here on Arqade, which is styled as:

h3 a:hover {
    border-bottom: 1px dotted #AB2020;
    text-decoration: none;
}

Given that the header links in the top bar dialogs are meant to be "hidden" features for power users, and that nothing else in the top bar seems to be using bottom borders on links, it would seem reasonable to simply amend the reset rule shown above to:

.topbar-dialog a:hover {
    color: #015490;
    text-decoration: none;
    border-bottom: none;
}

Alternatively, as a more conservative fix, we could apply this extra reset only to links inside h3 headers with:

.topbar-dialog h3 a:hover {
    border-bottom: none;
}

While waiting for a proper fix by the SE folks, I've added this CSS rule to SOUP v1.12.

share

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .