Pure CSS Popups Bug Note

I wanted to implement a slightly different version of Eric Meyer's Pure CSS Popups in a site of mine. Curiously, it didn't work in Explorer 6 Windows, while Meyer's sample code does. There turns out to be a catch.

I needed a simple Help function for online forms. The user sees a question mark. Hovering over it reveals the help text. A typical job for Pure CSS Popups.

The first try

At first I tried the following code. Inexplicably, Explorer 6 on Windows didn't do anything. But the effect works on Meyer's site! Try it below: it won't work in IE6Win.

<div id="test1">
<a href="#">?
<span>This is the help text. It can become quite long.</span></a>
</div>

div a {font: 16px verdana;
	width: 100px;
	color: #FF6600;
	cursor: default;
	text-decoration: none;}

div a:hover {text-decoration: none;}

div a span {display: none;
	padding: 5px;
	color: #000000;
	font-size: 12px;
	width: 200px;}

div a:hover span {display: block;}

The second try

As usual, I played around with the CSS. All of a sudden the effect did work in Explorer when I changed the hover style of the link to

div a:hover {text-decoration: none;
	border: none;}

It turns out that the hover style of the link itself must contain certain CSS declarations to defeat this bug.

I assume Meyer didn't notice the bug because he unknowingly solved it. His style

div#links a:hover {color: #411; background: #AAA;
   border-right: 5px double white;}

contains two solutions to the bug: the background and the border declarations. If you copy Meyer's page and remove his div#links a:hover styles, you'll find that the popups won't work in IE 6 Windows.

Possible solutions

I found that any one of these declarations will solve the bug. The actual value doesn't seem to matter.

border
display
position
overflow
background

Variations like border-bottom or background-color are also allowed.

I myself will use border: none because it has the Right Vibes: it was commonly used to remove some totally different CSS bugs from Netscape 4.

contents