IE 8, inline elements, and positioning

in

IE 8 is an improvement from it's predecessors, which isn't saying much when one of those happens to be IE 6. Still, working with Microsoft's latest browser installment has freed up some time usually spent banging my head against the keyboard. That is, until I tried to get fancy with an anchor tag.

The design called for a link to be placed on top of an image. I decided the most efficient solution to this case, would be to create a block anchor, and position it absolutely over said image. This worked perfectly. Until the client let me know she couldn't click the link she supposed was there. Her browser? IE8.

Would IE8 recognize an anchor as a block? Yes. Would it recognize relative position? Yes. Where did it go wrong? When my link was told to be absolute, at which point it became a freakish creation: neither a block nor an inline element. The text contained with in the anchor became it's own inline onlick feature, leaving the full dimention of the block itself unclickable.

illustration

A solution to this, and the one that I used, was to insert a transparent image inside of the anchor, which would then retake the lost clickable area. As horrendous as that sounds, it solved the problem.

illustration 2

Comments

Another solution

Hey,

Thanks for the great post.

Another solution I found, slightly more semantic, is to add the transparent gif to the anchor's background via CSS. No need to repeat x or y, just its presence will rescue the fouled behavior.

Ex:

.myAnchor (background: url('my-path');

Done!

Cursed ie and it's wanna be standahrds version 8

cute drawings, write more!