Image hyperlinks in IE7 not clickable - hyperlink

Question

The images in the webpage below link to their respective pages. Works fine in IE8 & IE9 but not IE7.
In IE7 when you hover over the image the link url is recognised (previews in bottom left corner of browser) but is not clickable?
http://www.signport.co.uk/test/asg_ourwork.php
Can anyone tell me if there's a fix for it?
Thanks :)

Answer 1

This solution is the new solution:
CSS
.item a{
display:block;
overflow:hidden;
height:170px;
-moz-box-shadow:0 0 10px black;
-webkit-box-shadow:0 0 10px black;
-o-box-shadow:0 0 10px black;
-ms-box-shadow:0 0 10px black;
box-shadow:0 0 10px black;
}
You can DELETE the box-shadow SPAN you don't need it. I made it so you only need to add this line of code.

Answer 2

The problem is the hirarquy of the TAGS.
In this example you can see the correction working. In chrome it works exactly like yours. In IE7 the link works like you want, you only need to correct the rollover.
The Problem:
<div style="opacity: 1;" class="item">
<a href="http://www.signport.co.uk/test/asg_ask.php">
<div class="boxshadow">
<p>
<img src="http://www.signport.co.uk/test/Images/thumb_ask.jpg" alt="ASK Italian" height="170" width="300">
</p>
</div>
</a>
</div>
The Solution
HTML
<div style="opacity: 1;" class="item">
<a href="http://www.signport.co.uk/test/asg_ask.php">
<span class="boxshadow"></span>
<img src="http://www.signport.co.uk/test/Images/thumb_ask.jpg" alt="ASK Italian" height="170" width="300">
</a>
</div>
CSS
.projects .item{box-shadow: 0 0 10px 0 black;padding:0;margin:10px;}
.projects a {display: block;height: 150px;margin-bottom: 20px;}
.projects a .boxshadow {position: absolute;z-index: 999999;box-shadow: none;}