1. Home
2. Developer Center
3. Dreamweaver Developer Center
4. CSS Advisor

CSS Advisor

Internet Explorer does not make the whole link clickable

Problem

Even when anchors are styled with "display:block", the cursor does not become a hand when hovering over the area surrounding the text links.

Solution

Use the Holly Hack to support Internet Explorer v. 5 and 6 or the "white space" fix if support for IE 5.0 is not required.

Detailed description

Anchors styled with "display:block" should offer a clickable area larger than the text link itself (the whole box should be "hot"). Example:

a {
    display:block; 
    text-decoration:none;
    padding:.5em;
}

Unfortunately, in Internet Explorer, unless "hasLayout" is turned on, the cursor shape would revert to "default" as soon as it moves out of the text link area.

You can "give layout" to the A elements using a variation of the Holly Hack (inside a Conditional Comment). For example:

<!--[if lt IE 7]>
<style type="text/css" media="screen">
a {height:0;}
</style>
<![endif]-->

The above solution works with versions 5.0, 5.5 and 6.

If support for IE 5.0 is not required, then you can use the "white-space-fix", placing the following rule above the other.

a {display:inline-block}

Test case

Read about what I call the "white-space-fix"".

Text ID: INTERNET_EXPLORER_DOES_NOT_MAKE_THE_WHOLE_LINK_CLICKABLE_

---