<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]-->
<img src="BG_img.jpg" alt="background image" width="1505" height="1552">
<h1>IE8 (and IE7?) clickable anchor bug</h1>
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.
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.
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.
<a href="#" id="booking"></a>
<a href="#" id="dates"></a>
<a href="#" id="blog"></a>
<a href="#" id="remix"></a>