IE8 transparent div over an image

[zaw]

I got a weird behaviour on IE8 for thisHTML:\[code\]<a class='main'> <img src='http://annawrites.com/blog/wp-content/uploads/2011/04/color-explosion.jpg' /> <div class='layer'>&nbsp;&nbsp;&nbsp;</div></a>\[/code\]CSS:\[code\].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; }\[/code\]JSFiddle: http://jsfiddle.net/HLua8/2/ (unfortunately doesn't work on IE8 I think)On IE8, \[code\].layer\[/code\] (ie. the crosshair cursor) is only on the top left corner (it minimizes itself to the content, which is 3 x \[code\]&nbsp;\[/code\])I noticed it works fine when I set \[code\].main img\[/code\] to \[code\]display:none\[/code\] but I need the imageCould someone help me to make \[code\].layer\[/code\] shown on IE8 as big as it is supposed to be? (ie. 100% width 50% height, just like on other browsers)