We have worked on all sorts of user interfaces, designs and specs. Now there are certain sections in which we need a link on the whole block. The easiest way to do this is to wrap the whole block in an anchor tag. Now if you have complex markup in your code block, you can not wrap that in an anchor tag. According to the specs, you can not put a global or block level element inside an inline element. That means you can not put a p tag or div tag inside an a anchor tag 😮
So in this case, to get a link on the whole block, we can put anchor as an transparent overlay:
<div class="block">
<h2>The Heading</h2>
<p>The content</p>
<a class="overlay" href="/to-the-details-page"></a>
</div>
<style>
.block { position: relative; }
.overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 999; }
</style>
This is an ideal and great solution. You have overlayed and anchor, made it free from document flow and stretched that to full width and height of the container with a higher z-index. This layer will come on top of any element in the block.
But this transparent layer does not work in older versions of IE. IE fails to increase the z-index of this transparent clickable layer which have no content or background. After numerous hit and trials we found that if you apply anything solid in background, the layer comes to the top in IE too. By solid I mean a solid color in background or an image in the background. The image may or may not have partial/full transparency.
So that’s it, make a transparent image, preferably a gif for smaller file size. Put it on the background of the block and on repeat, your transparent overlay will now work in older versions of IE too.