hasLayout.net

Bookmark and Share

Partial Click Bug v2

Table of Contents

Affected Versions

This bug affects: IE7, IE6

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

Here's little brother of "Partial Click Bug". Same story, links with extra clickable area (e.g. padding or width) are clickable only when mouse is positioned over the actual text. Let's glance at the demo:

Demo

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

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 <div> with position: absolute set on it. That's part of the trigger. Second part is "layout" on the <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:

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

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

Comments

Create new comment

Currently there are no posted comments.

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

Alternatively, purchase my book: