Non-JS fix for the infamous IE7 z-index bug

Where a link wraps block elements, including an image, and all elements need to be clickable.

In the use case below, the image resets the stacking order and will always be on top and always be unclickable without a fix.

In my personal use, the div with id "text-wrap" was absolutely positioned on top of its sibling and had no effect on the image's clickability, so long as it had a transparent background.

After fighting the z-index bug with various positioning and stacking solutions, I came up with a non-ideal, but perfectly workable solution without using JavaScript. By applying a transparent gif to the div with id of "text-wrap", the whole anchor was now clickable.

It seems that if a div has a transparent background, or no explicit background set, then a click filters down through the div to the next element below.

Use case:

<a>
    <div id="image-wrap">
        <img>
    </div>
    <div id="text-wrap">
        <p>Some text, etc.</p>
    </div>
</a>

In reality, all this is doing is covering the image with another image (which is also resetting the stacking order), so it doesn't really make the first image clickable. It does, however, make the desired user interaction possible.