5

These 3 links in the Stack Exchange dropdown:

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).

3

2 Answers 2

Reset to default
1

This appears to have been fixed as part of the Stack Exchange unified site design / theming rollout.

0

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.

You must log in to answer this question.

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