indiechild - 3:14 am on Jan 10, 2003 (gmt 0)

This problem has been driving me nuts... it only appears in IE5 for Windows. Basically I have a square container div holding an image which is linked to another page. I want the container div to change background-colour when it's mouseover'ed, so I use the a:hover pseudoclass on the anchor link. The problem is that in IE5/Win this makes the image itself non-clickable! (the container div itself is clickable though)

This is driving me nuts. I've tried z-index order and all that but it doesn't seem to be related to that. The problem doesn't appear in Mozilla, IE6, IE5.5 etc.

Lately I've been finding so many obscure CSS bugs in IE5/Win that I feel like pulling my hair out!

Can anyone tell me if I'm doing something wrong?

This is my XHTML code below:

<div class="thumbnailbox">
<a href="paintings_001.htm">
<img class="thumbnailboximage" src="images/paintings_001_tm.jpg" width="74" height="100" border="0" alt="paintings - f.n. souza" />
</a>
</div>


and here's my CSS:


.thumbnailbox {
float: left;
margin-right: 4px;
margin-bottom: 4px;
border-width: 1px;
border-style: solid;
border-color: White;
color: White;
background-color: #A9A9A9;
text-align: center;
width: 140px;
height: 140px;
}



div.thumbnailbox a {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
text-decoration: none;
display: block;
}



div.thumbnailbox a:hover {
color: White;
background-color: Black;
}



.thumbnailboximage {
margin-top: 20px;
}