hasLayout.net

Affected Versions

This bug affects: IE8

Symptoms

Bottom border on :hover state either does not appear completely or is 1 pixel short (or cancels out outline) when outline is set

Date of the Tutorial

Thu Aug 13 13:45:47 2009

Description

Here's a bug that I spotted on James Hopkins's page. Problem: when ascendant has padding applied to it (even to value of zero) border-bottom that is set on :hover is either not applied completely, or when outline is in use, first pixel of the border is incorrectly drawn (seems that border and outline at the bottom cancel each other out).

Demo

Due to the nature of the bug, the demo is available on a separate page

HTML Code:

<div id="test">
    <span><a href="#">Hover over this</a></span>
</div>
<div id="test2">
    <a href="#">Hover over this</a>
</div>

CSS Code:

body {
    padding: 50px;
}
span a {
    text-decoration: none;
    font-size: 500%;
    outline: 1px solid #000;
}
#test2 a {
    text-decoration: none;
    font-size: 500%;
}
#test2 a:hover, span a:hover {
    border-bottom: 1px solid black;
}

First link has outline set on it and hovering over it makes it look like outline at the bottom disappears. On the second link, bottom border does not show up on hover. Would the border be set to a larger value (e.g. 5px) it would still not show up on the bottom link, but on the top link it would be 1 pixel short.

Solutions

Below are solutions for the above bug ordered by the solution type.

Solution (Clean Solution)

Date of the Solution

Thu Aug 13 14:02:07 2009

Fixed Versions

All of the affected

Description

The solution to the bug is rather trivial. Here's a fixed demo:

Due to the nature of the bug, fixed demo is available on a separate page

HTML Code:

<div id="test">
    <span><a href="#">Hover over this</a></span>
</div>
<div id="test2">
    <a href="#">Hover over this</a>
</div>

CSS Code:

body {
    padding: 50px;
}
span a {
    text-decoration: none;
    font-size: 500%;
    outline: 1px solid #000;
}
#test2 a {
    text-decoration: none;
    font-size: 500%;
}
#test2 a:hover, span a:hover {
    border-bottom: 1px solid black;
    position: relative;
}

What fixes the bug is { position: relative; } set on a:hover { }. Note: the bug does NOT get fixed if { position: relative; } is applied to the non-hovered state (e.g. a { position: relative; }).