IE8 transparent div over an image - html

Question

I got a weird behaviour on IE8 for this
HTML:
<a class='main'>
<img src='http://annawrites.com/blog/wp-content/uploads/2011/04/color-explosion.jpg' />
<div class='layer'> </div>
</a>
CSS:
.main { display: block; position: relative; width: 100px; height: 100px; }
.main img { width: 100px; height: 100px; /*display: none;*/ }
.layer { position: absolute; top: 0px; left: 0px; width: 100%; height: 50%; cursor: crosshair; }
JSFiddle: http://jsfiddle.net/HLua8/2/ (or open this in IE8)
On IE8, .layer (ie. the crosshair cursor) is only on the top left corner (it minimizes itself to the content, which is 3 x )
I noticed it works fine when I set .main img to display:none but I need the image
Could someone help me to make .layer shown on IE8 as big as it is supposed to be? (ie. 100% width 50% height, just like on other browsers)

Answer 1

After much fiddling, the best solution I could come up with for you, is to create a blank/transparent image and use this as the background image for your layer.
add to your css:
.layer {background-image:url(blank.png);}
.layer:hover{cursor: crosshair;}
an updated version of your document would look as follows:
css:
#container {
margin:40px;
position: relative;
width: 100px;
height: 100px;
}
.main img {
max-width: 100%;
}
.layer {
position: absolute;
top: 0px;left: 0px;
width: 100%;height: 50%;
background-image:url(img/blank.png);
}
.layer:hover{cursor:crosshair;}
html:
<div id="container">
<a class='main' href="test.html"><img src='http://annawrites.com/blog/wp-content/uploads/2011/04/color-explosion.jpg' /></a>
<div class='layer'></div>
</div>