Preferences

hasLayout.net

Partial Click Bug

[ Home | CSS Bugs | Partial Click Bug ]

Table of Contents

Diagnosis

Affected browsers:
All IE versions below version 7.
Visual appearance:
Only text is clickable on links (<a>) which are styled with display: block and thus have extra clickable area in standard compliant browsers
Triggers:
Floats. No "layout".
back to top

Overview

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.

back to top

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.

back to top

Solution (LS)

IE Versions Fixed

All of the affected.

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

back to top
back to top

Comments

  • Some guy

    Wed Jun 18 10:15:45 2008

    Not sure if its an accident, but your "demo" and "solution" code is the same.

  • Zoffix

    Sat Jun 21 06:53:23 2008

    Apparently you've missed the "Conditional Comments" part. They are not a requirement for the solution - any hasLayout "giving" method will work. If you are talking about the source code of actual demos - take a look at the <head>

Feel free to post your comment. Only Comment field is required. Your e-mail will not be shown; specify it if you wish to be contacted.

Your comment
back to top

Advocacy

Browsers

Use what is right for you: "Browse Happy - Online. Worry Free. Switch today!"

XHTML

Don't use it unless you understand it. Please take some time to read these articles:

CSS and Internet Explorer

Use Conditional comments

back to top