IE render background:transparent as a hole? - html

Question

This is my code :
HTML
<div class="myDiv">text under link!</div>
<a class="myLinkTransparent" href="#"> </a>
<a class="myLinkRed" href="#"> </a>
CSS
.myDiv
{
position:relative;
z-index:40;
width:310px;
}
.myLinkTransparent
{
z-index:50;
position:absolute;
top:0px;
left:0px;
width:100px;
text-decoration:none;
background-color:transparent;
}
.myLinkRed
{
z-index:50;
position:absolute;
top:0px;
left:100px;
width:100px;
text-decoration:none;
background-color:red;
}
both link with transparent and red background should be "linked".
But in fact, on IE (every version I try: 7,8,9) the link is "broken", such as a "hole" to the text above the link.
Why? And how can I fix this?

Answer 1

1 . The behaviour is not exactly as you expect originally due to Normalized CSS option set in JsFiddle by default (look at the left under JS frameworks choice and so). Lets remove it to guarantee we own all styles.
2 . However, just unchecking that won't fix it completely. You'll be able to sense it on the top left taking small width and height.
To fix the width, you need to set display:block;
3 . To fix the height, you need to set actual height. For example height: 35px;.
4 . After all this, you'll find the link is clickable only in areas that's not text, because the browser knows it's transparent, it thinks it's click-through also.
This behaviour is described here: http://haslayout.net/css/No-Transparency-Click-Bug
You need to apply the below fix (copied from article, just changed filename):
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="non-existing-or-so.png",sizingMethod="scale");
.
The modified fiddle (tested in IE9 standards modes for IE9, IE8, IE7:
http://jsfiddle.net/Meligy/PPdbc/11/

Answer 2

Not sure but may be a bug.
You can try the workaround below
set background-color as green in myLinkTransparent class
Then set opacity to zero just by setting filter:alpha(opacity=0); in myLinkTransparent class
.myLinkTransparent
{
z-index:50;
position:absolute;
top:0px;
left:0px;
width:100px;
text-decoration:none;
background-color:green;
filter:alpha(opacity=0);
}