Image Replacement <a> tag not showing up in IE 9

Question

I am trying to get this image replacement done for a quick under construction page. They gave me and image to use and they wanted me to just put link hotspots over two areas on the image. This works in all browsers except IE and I don't know why...I do know when I un-comment the borders I get the finger icon on the red border...Any ideas?

Here is the CSS:

#container {
position: relative;
margin: 0 auto;
width: 1177px;

}

.account {
display: block;
width: 103px;
height: 31px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
position: absolute;
top: 0;
right: 241px;
/*border: solid 1px red;*/

}

.brochure {
display: block;
width: 208px;
height: 280px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
position: absolute;
top: 421px;
left: 478px;
/*border: solid 1px red;*/

}

Here is the HTML:

<div id="container">    
<h1><a class="account" href="#">account view</a></h1>
<h1><a class="brochure" href="http://public.faulknermediagroup.com.s3.amazonaws.com/LPL/UnderConstruction/Kimball/KimballCreek_D.Bennion_BroB_Rnd7.pdf" target="new">brochure</a></h1>
<img src="kcp-underconstruction.jpg" width="1177" height="1129" alt="" />

Answer 1

The problem with IE is that you shift the text in the links out of the way with text-indent. Then the links themselves are empty or text, so IE thinks the user is no longer supposed to click on them.

So the solution is to leave the text in the right place, just make it invisible by giving it an opacity of 0.

In other words, use this CSS:

#container {
 position: relative; 
 margin: 0 auto;
 width: 1177px;
}

.account {
 font-size:31px; line-height:1;
 opacity:0; filter:alpha(opacity=0);
 width: 103px;
 white-space: nowrap;
 overflow: hidden;
 position: absolute;
 top: 0;
 right: 241px;
 /*border: solid 1px red;*/
}

.brochure {
 font-size:280px; line-height:1;
 opacity:0; filter:alpha(opacity=0);
 white-space: nowrap;
 overflow: hidden;
 position: absolute;
 top: 421px;
 left: 478px;
 width: 208px;
 /*border: solid 1px red;*/
}

As you can see, I make the font size as high as the block size originally was, to make sure to fill the whole block vertically. Oh, and I don't need display:block.

Answer 2

I would suggest you just use an image map and be done with it.

<div id="container">    
    <img usemap="#map" src="http://public.faulknermediagroup.com.s3.amazonaws.com/LPL/UnderConstruction/Kimball/kcp-underconstruction.jpg" width="1177" height="1129" alt="" />

    <map id="map" name="map">
        <area shape="rect" alt="" title="Account View" coords="831,2,935,33" href="#" target="" />
        <area shape="rect" alt="View Brochure" title="View Brochure" coords="477,420,687,703" href="http://public.faulknermediagroup.com.s3.amazonaws.com/LPL/UnderConstruction/Kimball/KimballCreek_D.Bennion_BroB_Rnd7.pdf" target="" />
    </map>
</div>

http://jsfiddle.net/tsdexter/hnSxs/1/

Bonus: Include rwdimagemaps and now it's responsive.

http://jsfiddle.net/tsdexter/hnSxs/2/

Answer 3

As pointed out above. text indent can have strange outcomes

I really like the following image replacement from: http://nicolasgallagher.com/another-css-image-replacement-technique/

     .brochure{
         background-color: transparent;
         border: 0;
         color: transparent;
         font: 0/0 a;
         text-shadow: none;
         //and your other styles without overrriding the above ones.
         display:block;
         width: 103px;
         height: 31px; 
      }