Had anyone got a problem with a:hover that has position: absolute and is above <img> under IE & Opera
a:hover has background, but <a> hasnt, both has display: block.
Thank you in advance for your help
...
To see the problem please check this webpage: http://bckp.eu/test.html
or
use this code:
<!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" lang="en" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
div {border: 1px solid black; position: relative; height: 200px; width: 500px;}
a.next {right: 0;}
a.prev {left:0;}
.withbackground {background: yellow;}
.nobackground {background: transparent;}
a.link {position: absolute; top: 0; width: 100%; height: 100%; border:0;}
a.link:hover,a.link:focus {background: url(/img/comment.gif) repeat !important;}
</style>
</head>
<body>
<div id="t">
<a class="link nobackground" href="#"><a> without background</a>
<img src="/img/DSC_00641.jpg" height="200" width="500" alt="Dummy img" />
</div>
<p>Doesnt work under IE? <a href="#false" onclick="return a();">Add background</a> | This is not <a href="#" onclick="quirks()">quirks mode</a> <a href="http://www.satzansatz.de/cssd/quirksmode.html">#</a></p>
<hr />
<div>
<a class="link withbackground" href="#"><a> with background</a>
<img src="/img/DSC_00641.jpg" height="200" width="500" alt="Dummy img" />
</div>
<div>
<a class="link nobackground" href="#"><a> without background, without img</a>
</div>
<script type="text/javascript">
function a() {
document.body.innerHTML+='<style>#t a {background: pink;}</style>';return false;
}
function quirks() {
alert(document.compatMode); return false;
}
</script>
</body>
</html>