To elaborate, the final result would be:

The”Text Link” shoud be positioned using absolute positing, height, width, and padding/margins so that it over-layed the entire icon.

The HTML would look like this:

[php]
<div class="services-box">
<a class="link-mask" href="/services/network-maintenance/"&>Managed Services</a>
<div><img src="/images/pc-1.png" alt="" width="77" height="78" /></div>
managed services text
</div>[/php]

Initially, I set up the CSS as follows:

[css].services-box a.link-mask {
position: absolute;
width: 290px;
height: 83px;
text-decoration: none;
font-weight: bold;
color: #fff;
padding: 4px 0 0 112px;
z-index: 2;
}[/css]

This worked great in every browser I tried, except for IE. It seem Internet Explorer will not let a simple link cover another element. As you can see, I attempted setting the z-index value, which did not work. Hovering over the image ([image]) or text( “Additional text”) still produced a default/text icon and was not a link.

I also attempted using hasLayout hacks, by adding the zoom css property to the link, and that did not work.

After Googling the heck out of this and not finding a solution, which is why I’m making a post out of it, I started playing.

The solution?
If a background is applied to the link, Internet Explorer will force the link to be on top of text and on top of images. Since I did not want a background, as it would cover the other elements, I came up with a little hack.

I added the following css to my link’s CSS

[css]background-image: url(/images/services-boxes.png);
background-repeat: no-repeat;
background-position: 999px;[/css]

What this did, was make IE *think* there was a background, and position it over the text and image, while pushing the non-repeated image far away from the viewable area. I used the background image of the icon itself, which prevented the browser from having to load another image.

The icons now work perfect in every browser, including the pesky IE.