hasLayout.net

Affected Versions

This bug affects: IE7

Symptoms

only text is clickable/reactant to :hover on links [(optional) until the mouse cursor rolls over the actual text]

Date of the Tutorial

Mon Jul 20 05:35:30 2009

Description

Demo

HTML Code:

<div><a href="#">Foo</a></div>

CSS Code:

div {
    position: absolute;
    top: 0;
    left: 0;
    width: 600px;
    height: 200px;
    border: 1px solid #000;
}
a {
    display: block;
    width: 500px;
    padding: 50px;
}
a:hover {
    background: #ddd;
}

We have a ' element"><div> with position: absolute set on it. That's part of the trigger. Second part is "layout" on the ' element"><a> element. The background on :hover is set to show that the link seems to "work" fine after the mouse slides over the actual text; if the background would not be present, the link would never get "fixed" after hovering the text.

Solutions

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

Solution (Clean Solution)

Date of the Solution

Mon Jul 20 05:38:50 2009

Fixed Versions

all of the affected

Description

I gave you a little hint in bug's description with regard on how to actually fix it - the background property! Here's our fixed demo:

HTML Code:

<div><a href="#">Foo</a></div>

CSS Code:

div {
    position: absolute;
    top: 0;
    left: 0;
    width: 600px;
    height: 200px;
    border: 1px solid #000;
}
a {
    display: block;
    width: 500px;
    padding: 50px;
    background: #fff;
    /* use background: url(#)
        if you need transparent background */
}
a:hover {
    background: #ddd;
}

All we need to do is set background on the ' element"><a> element in the rule without the :hover pseudo-class. Note that if your link is not clickable on :hover, then you probably need to set background on the a:hover as well.

Special case: if you need to have transparent background on the ' element"><a> element, then simply use background: url(#). Whilst this would induce an extra HTTP request, it would solve the bug; use conditional comments if you are really worried about it.