Okay, this was unexpected.
I’ve needed to “trigger” IE’s hover states for some things (like Sons of Suckerfish in IE7… see [url=http://www.satzansatz.de/cssd/pseudocss.html#stickyhover]sticky hover though the other problem is a lack of anything happening at all on :hover if you, say, remove the sfHover stuff and use something else like PeterNed’s csshover file), but I have a page where it’s causing IE6 to collapse the height of an anchor on :hover.
A cut-down version of a page I’m working on:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-language" content="en">
<title> Test IE6 :hover event </title>
<meta name="description" content="Test abso-po'd anchor's height collapse on :hover">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<style type="text/css">
* {
margin: 0;
}
html, body, ul, ol {
padding: 0;
}
[b]/*IE6*/
* html a:hover {
visibility: visible;
}[/b]
body {
color: #000;
font: 100% verdana, "dejavu sans", "mgopen modata", sans-serif;
background-color: #ededed;
}
#header {
height: 4em;
padding: .5em 0;
background-color: #333;
border-bottom: 3px solid #f90;
}
#naam {
position: relative;
color: #fff;
font: bold 1.8em/2.5em futura, geneva, helvetica, arial, sans-serif;
text-align: center;
}
#naam span {
color: #9bcded;
}
#naam a {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#naam {
float: left;
width: 364px;
height: 50px;
}
#naam a {
background: url(images/scooterlogo.png) 0 0 no-repeat;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<p id="naam">scooter*<span>verzekeren.com</span><a href="/"> </a></h1>
</div>
<div class="inhoud">
<h1>IE6</h1>
</div>
</div>
</body>
</html>
See bolded code.
Doesn’t matter if you leave it out of the * html hack, or if you say “:hover” instead of a:hover or whatever. If you leave that bit of code uncommented, you can see in IE that if you mouse over the title, the anchor vanishes. This not only hides the image, which isn’t a huge deal, but removes a clickable area, meaning the anchor is not usable.
So, while I had been adding in the “trigger” on some sites, including the old version of this current site, I found I’m going to have to keep it very local to where I’m fixing a bug. I have seen the height-collapse of abso-po’d anchors inside a rel-po’d float before, but setting heights on :hover fixed those… not so here.
If I understand correctly then I should NOT be using this as a blanket trigger. I’m not sure here why this sets off the bug, only that it’s certainly the code doing it.
