IE position anchor tag over an image
===

I'm having an issue with IE9(and 8) with positioning empty(kinda) anchor tags over an image. The anchors contains text, but it's kicked off the page using CSS's text-indent property.

I'm working on a site that has a series of promo panels, they're all contained in an UL. Inside each LI there's a promo image, and 1 or more anchor tags positioned over different areas of it. The IMG and the A tags are absolutely positioned in the LI element. So, the basic structure looks like UL > LI > IMG A A A.

This setup works fine in Firefox and Chrome, but IE doesn't like it. I've tried using z-index on this setup with no luck.

Can anyone explain the issue that IE is having, and give a better solution for my CSS? *I've made a quick/simplified example of my problem using a div, img, and a single anchor.* This can be copy/pasted onto your machine to see it in action.

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<title></title>
    		<meta name="Description" content="" />
    		<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    		<link type="text/css" rel="stylesheet" href="" />
    		<style type="text/css">
    			#div {
    				z-index:1;
    				display: block;
    				background:red;
    				position:relative;
    			}
    			#image {
    				z-index:2;
    				position:absolute;
    				top:0;
    				left:0;
    				display:block;
    			}
    			#anchor {
    				z-index:3;
    				display:block;
    				overflow:hidden;
    				position: absolute;
    				top:0;
    				left:0;
    				text-indent:-9999px;
    				width:640px;
    				height:480px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="div">
    			<img id="image" src="http://farm8.staticflickr.com/7130/7438112718_2e8340081b_z.jpg" />
    			<a href="#" id="anchor">clicky</a>
    		</div>
    	</body>
    </html>

I don't have much control over the UL > LI > IMG A layout. This is setup that as we get new promos we can easily update the image, and just add or remove anchors easily depending on how many 'calls to action' the image has. The positioning of the A tags are injected inline.

Thanks! 