IE Pure CSS Pop Ups Bug

Pure CSS Popups - IE Bug

There seems to be a bug in IE6 Win/IE5, 5.5 and 6 (quirks and strict) that's triggered when creating "Pure CSS Popups" using Eric Meyer's <span> technique.

PopUp doesn't Appear in IE6

Update:
Confirmed it's all versions of Internet Explorer for Windows

Take this sample CSS code:

#popup a, #popup a:visited {
position: relative;
display: block;
width: 130px;
line-height: 30px;
text-align: right;
padding: 0 10px;
margin: 0;
border: 1px solid #666;
text-decoration: none;
font-size: 0.8em;
color: #000;
background: #eee;
}

#popup a span {display: none;}

#popup a:hover {
color: #f00;
}

#popup a:hover span{
display: block;
position: absolute;
top: 0px;
left: 150px;
width: 250px;
margin: 0px;
color: #000;
background: #fee;
text-align: center;
}

Which along with this HTML

<div id="popup">
<a href="/">Home<span>Home Description Text</span></a>
<a href="/">About<span>About Us Text</span></a>
<a href="/">Links<span>Links to Others</span></a>
<a href="/">Contact<span>Email, Postal Address</span></a>
<a href="/">Terms<span>Terms and Conditions</span></a>
</div>

produces this:

if you're viewing this in IE and hover over the links above then nothing will happen! But try the next one..

HomeHome Description Text AboutAbout Us Text LinksLinks to Others ContactEmail, Postal Address TermsTerms and Conditions

The Trigger

a:hover {
	color: #f00;
	}

It seems that this style rule needs more!

It's probably not a very commonly triggered bug as more often than not you might be changing more than just the color in your hover declaration.

The Workaround

There are two ways to workaround this bug (that I've found).

Method 1:: Take any one style rule from the a:link, a:visited rule and change it slightly. Then declare it in the a:hover rule.; The exception to this rule is color otherwise the bug probably wouldn't trigger.; parts of shorthand properties will do: i.e. border: 1px solid #000; can be changed by just putting border-color: #001; into the hover rule.

But this method may not be practical for your design, you may not want to change anything in your hover rule so I recommend..

Method 2:: Take a property that hasn't been declared in your a:link, a:visited rule and declare it's Default/Initial Value in the hover rule instead..; There are exceptions with this too. Exceptions being mainly the CSS2 properties*. So sticking with CSS1 properties would be safest.

Examples of method 2 that I have tested as "Good to Go"..:
[Note: not all these apply to example given above, remember it has to be a property that hasn't been declared in your CSS]

direction: ltr;
display: inline;
float: none;
position: static;
border: 0;
height: auto;
margin: 0;
padding: 0;
list-style-type: disc;
list-style-position: outside;
text-align: left;
text-indent: 0;
vertical-align: baseline;
white-space: normal;
overflow: visible;
visibility: inherit;
*(CSS2 exception) [bottom][top][left][right]: auto;

There are more, but this is just a general list to remind you what default properties you can choose from. Enjoy!

I chose to add text-indent: 0; to my code, but it's up to you!

Updates:

Discuss this article
it seems that changing just a background image is not sufficient to overcome this bug either, so for example you change the color of the text and any background image, you would still need one of the aforementioned workarounds.
November '03 - I've now tested this in IE5 too and can confirm the bug is present there too.

«« To CSS Index »» | CSS Borders Design »»

Credits: In searching for a solution I came across Peter-Paul Koch's page which led me down the right track for testing.