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

Comments

• Klaus

  Wed Feb 29 16:32:15 2012

  Thanks, it works perfectly!
  Tested in IE8, Firefox 10.0.2 and Chrome 17.0

• Matthias

  Sun Feb 13 14:07:19 2011

  I think thats not a general solution. In my case it does not work correct. I found an other dependency - the background color of the body or also any other element, where is inside the hover-link with border... background-color: transparent; solves the problem in my case. I've create a test case. If you want ... see(in german only) under http://www.die-thiemes.de/home/webdesign01.html#invhovbugloesung ...
  Best regards

• Toaki

  Sat Dec 25 16:33:53 2010

  Thank you! I was strugling against this bug since some days and finally I found a solution. I tried almost everything, except this one, position:relative.
  
  I am just passing to say thank you from Portugal

• Meg

  Tue Jun 15 02:58:35 2010

  Just discovered that it also doesn't fix the bug if position:relative is applied to any parent element of the link, not just if it is applied to the non-hovered link - mine didn't work on links in my footer as I had position:relative applied to my footer div.

Donate / Buy My Books

If you found materials on this site useful, please consider donating a few bucks to the author. Thank you.

Alternatively, purchase my book: