Preview: what the working site looks like.
background image
The markup
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>can't click on IE8 anchor</title>
	<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
    <section>
        <img src="BG_img.jpg" alt="background image" width="1505" height="1552">
    <aside>
    	<h1>IE8 (and IE7?) clickable anchor bug</h1>
        <p>
            It seems IE8, in just the right conditions, can completely ignore absolute positioned, empty anchors. 
            display: block; doesn't do anything to make the element clickable like it always has in the past. 
            This demo intentionally invokes that bug.
        </p>
        <p>
            There is are a couple workarounds for this. Using a background image on the anchor will make the 
            element clickable. If you don't want an image, like in this case, the image you use doesn't have 
            to actually exist. In this demo the background for the link that should be on "Booking" is set to 
            none which disables the entire link, but only in IE8. <br />
            See the CSS for the anchors on this page.
        </p>
        <p>
        	Another fix is to present the main image, BG_img.jpg, as a background of the containing element instead 
            of loading it from the markup. Then all the links act the way you'd expect them to.
        </p>
    </aside>
            <a href="#" id="booking"></a>
            <a href="#" id="dates"></a>
            <a href="#" id="blog"></a>
            <a href="#" id="remix"></a>
    </section>
</body>
</html>
The CSS

html, body {
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #333;
	background: #000;
}
		/* HTML5 tags */
		header, section, footer,
		aside, nav, article, figure {display: block;}
section {
	height: 1552px;
	width: 1505px;
	margin: 0 auto;
	position: relative;
}
	section a {
		display: block;
		background: url(fakeimage.jpg); /*this is the bit that does it*/
	}
	section a:hover {border: 1px solid #f00;}
aside {
	width: 600px;
	margin: 0 0 0 -300px;
	position: absolute;
	top: 20px;
	left: 50%;
	color: #ccc;
}	
	aside h1 {text-align: center;}
#booking {
	height: 40px;
	width: 230px;
	position: absolute;
	top: 690px;
	left: 260px;
	background: none;
}
	#dates {
		height: 40px;
		width: 150px;
		position: absolute;
		top: 690px;
		left: 570px;
	}
#blog {
	height: 40px;
	width: 135px;
	position: absolute;
	top: 690px;
	left: 815px;
}
	#remix {
		height: 40px;
		width: 270px;
		position: absolute;
		top: 690px;
		left: 1035px;
	}