IE6-/Win: Clickable area of block anchors and hasLayout

In IE6- hasLayout affects the clickable/hoverable area of a block element (an anchor, or even any element with an attached onclick/onmouseover event handler.) Usually with hasLayout=false only the part covered by text is sensitive. With hasLayout=true the whole block area is sensitive.

In all the following test cases, there is a container, with black border and assigned width, so with hasLayout=true (except when noted.) Inside it there are some anchors with display:block and :hover background-color change. Or (to show that the behaviour is the same) some divs with an onmouseover event handler changing background-color.

The need for a fully clickable/hoverable block element is common in menus and navigation bars. In real cases such constructions are marked up using lists. All the observed behaviours are reproducible using lists, but further quirks occur, so to maintain things simple this page uses just divs.

Test 1. The hoverable elements have hasLayout=false. In IE6 only the text part is sensitive. Not even the space between lines (here big, thanks to a higher than normal line-height) is sensitive.

Test 2. The hoverable elements have hasLayout=true. Their whole rectangular area is sensitive.

Test 3. There are many variations to the above cases. First of all, giving layout just to the one of the elements of the set seems sufficient to get all of them to behave.

Test 4. If the external container has no Layout, then the internal elements are fully sensitive even without hasLayout. Unfortunately it's rarely possible to stay in such condition (and trying to get it with an intermediate no-hasLayout wrapper doesn't work.)

Test 5. Adding position:relative to the internal elements make them almost (but not fully) completely sensitive. As in other occasions, position:relative seems to give only part of the same benefits as hasLayout, and also creates further problems.

Test 6. There is an image inside: this seems sufficient to make to whole area sensitive.

Test 7. The above is a fortunate thing. Indeed, when in addition to the image, there is hasLayout, in IE5.0 the image becomes not clickable (which can be a big problem if it were the only content!) There are also other cases of hasLayout causing not clickable images in links, in all IE7-/Win.

Test 8. The hoverable elements have hasLayout=true and a bottom margin. Moving the mouse up and down, the margins disappear and come back again. Without hasLayout this problem doesn't occur (but of course the anchors are not fully sensible.) Fortunately there are many ways to avoid the problem and maintain the anchors fully sensible, for example giving hasLayout only to the first one, as in the second test. In IE7 this problem does not occur, but there are still cases of jumping bottom margins at hover caused by hasLayout.

Test 9. There is a floated span inside one of the anchors. The whole anchors' area is sensitive. Together with test 6, this leads to think that any element with hasLayout inside one of the anchors triggers the whole area sensitivity.

CSS tests home