Invisible link using z-index broken in IE8-

Hi

I’ve created a banner for a site, that needs customizable text and cycling images. As a result I have three layers – the lowest containing cycling images, the middle layer overlaying the captions, and the top layer being an invisible link that is the full size of the banner. This works fine in Firefox and Webkit, but breaks in IE.

Curiously, if I give the link a background color, it shows up in the foreground in IE and works perfectly. However, it obviously defeats the object of what I’m doing!

I’ve tried the z-index fix for IE that involves giving the containing div a higher value. No luck. Any thoughts?

Here’s the PHP that renders the HTML:

echo('<div class="choice-top-banner">
		<div class="cia-top-ban-caption">
		<p class="header-banner-txt-1">'.$banner_txt_1.'</p>
		<p class="header-banner-txt-2">'.$banner_txt_2.'<br />'.$banner_txt_3.'</p>
		</div>
		<div class="banner-cont">');
			$counter = 1;
			foreach($imgs as $img){
				$sz = getimagesize($img);
				echo('<img src="'.$img.'" '.$sz[3].' alt="Banner image '.$counter.'" />'."\n");
				$counter ++;
			}
		echo('</div>
		<div class="banner-link"><a href="'.get_option('aca-cia-footer-banner-url').'" title="Click here to donate now." target="_blank">Click here to donate now.</a></div>
		</div>');

And the CSS for this banner:

.choice-top-banner {
	display: block;
	overflow: hidden;
	width: 620px;
	height: 220px;
	position: relative;
	z-index: 10;
}

.choice-top-banner .banner-link {
	position: absolute;
	z-index: 199;
	width: 620;
	height: 220px;
	left: 0;
	top: 0;
}

.choice-top-banner .banner-link a {
	width: 620px;
	height: 220px;
	position: absolute;
	z-index: 200;
	text-align: left;
	text-indent: -9999em;
	left: 0;
	top: 0;
}

.cia-top-ban-caption {
	width: 184px;
	height: 284px;
	position: absolute;
	z-index: 15;
	right: 10px;
	top: 8px;
	background: url(styles/images/top-banner-logo.png) no-repeat;
}