hasLayout.net

Share |

Partial Click Bug

Affected Versions

This bug affects: IE6

Symptoms

Only text is clickable on links (<a>) that are styled with display: block and thus have extra clickable area in standard compliant browsers

Date of the Tutorial

Fri Jul 17 12:54:45 2009

Description

Note: you may be experiencing "Partial Click Bug v2" bug, which has very similar symptoms

Once again the famous couple, float and haslayout, come together to bring us trouble. A pretty common situation: floated container with a link (<a>) inside of it. Link is styled with display: block thus expands to fill the entire width of the container providing extra clickable area. IE versions below version 7 decide that extra clickable area is not exactly what you want and limit link's clickability to text only. Let's take a peek at the demo.

Demo

HTML Code:
<div>
    <a href="#">Demo link!</a>
</div>
CSS Code:
div {
    float: left;
    width: 90%;
}
    a {
        display: block;
        text-align: center;
    }

Demo is pretty straight-forward. In standard compliant browsers as well as IE7 hovering anywhere inside the bordered <div> will change the cursor and clicking will click the link. In affected browsers only link's text will be clickable.

Solutions

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

Solution (Layout Solution)

Date of the Solution

Fri Jul 17 13:00:00 2009

Fixed Versions

all of the affected

Description

The problem is easily fixed by applying "layout" to the link itself with an additional spice of position: relative for IE version 5. Here is our original demo with the fix applied to it:

HTML Code:
<div>
    <a href="#">Demo link!</a>
</div>
CSS Code:
div {
    float: left;
    width: 90%;
}
    a {
        display: block;
        text-align: center;
    }
Conditional Comments:
<!--[if lt IE 7]>
    <style type="text/css">
        a {
            zoom: 1;
            position: relative; /* IE5 needs this */
        }
    </style>
<![endif]-->

Nothing to explain: giving "layout" to the link fixes the bug. If you are supporting IE version 5 you may also need to add position: relative. Please read haslayout tutorial and find the best way to give your links "layout".

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: