Pure CSS Popups Bug Note

  • This page describes a bug in Explorer 5.5 and 6 Windows. No information for Explorer 5.0 .

    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.

    ? This is the help text. It can become quite long.
    <div id="test1">
    <a href="#">?
    <span>This is the help text. It can become quite long.</span></a>
    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;}
    ? This is the help text. It can become quite long.

    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.


    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.