IE6 transparency+radio button can't be clicked
- by Jonas Byström
IE6: when I place a partially transparent image in a div, the radio buttons in that div that overlap the non-transparent pixels of the image become unclickable. Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style media="screen" type="text/css">
div
{
position: relative;
width: 500px;
height: 300px;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Olympic_flag_transparent.svg/200px-Olympic_flag_transparent.svg.png, sizingMethod='crop');
}
input
{
position: absolute;
top: 40px;
left: 60px;
}
</style>
</head>
<body>
<div>
<input type="radio" value="1" name="1"/>
</div>
</body>
</html>
If you test the code, you can also try moving the button from (60, 40) to (40, 40) where the image is transparent, and voilà - the clicking is back in business again.
This bug might, or might not, be related to the IE6 links transparency bug, but I'm not knowledgable enough to grasp any resemblence.
Have I done something wrong? Or how can I circumvent? Is there some other option apart from removing the _filter:progid?
