CSS Tool Tips

CSS Tool Tips Not Working In IE

[kristen]

I've been scratching my head as to why the tool tips I've modified don't work in IE (Windows or Mac). I could really use your help, they seem to work in every other browser. To view what I did take a look at <snip> and mouse over any of the links that say "More>>". They are based off of this page: [koivi.com...] , and that page works in IE.

All of my CSS:
<snip>

Relevant CSS:

.nodecoration { text-decoration: none; }
div.tooltip a span { display: none; }
div.tooltip a:hover span { 
display: block; 
width: auto;
 top: 1em;
 right: 1em;
 padding: .5em;
 color: #000;
 background-color: #CC9;
 z-index: 1;
 position: relative;
 border: 1px solid #000;
}

Relevant HTML:

<div class="tooltip">
<h2>Announcements</h2>
<h3>Announcement Title</h3> 
&nbsp; &nbsp; &nbsp; <em>First Sentence.&nbsp;Contact&nbsp; <a href="http://www.ccshoreline.org/contactform.php?">Contact Person</a>.&nbsp; 
<a href="http://www.ccshoreline.org/?announceid=55" class="nodecoration">More&gt;&gt;<span>Announcement full information...</span></a>
</em></div>

[edited by: Woz at 6:45 am (utc) on Mar. 21, 2004]
[edit reason] no URLs please - TOS#13 [/edit]

[Rambo Tribble]

For some remarkably curious reason, IE requires a definition for a:hover before it will recognize the declaration for a:hover span.

[SuzyUK]

Rambo Tribble has it..

It is an IE Bug .. not triggered often..

If you search for "pure CSS Popups Bug" you'll find more about it.

Note just changing the color on the a:hover rule may not be enough to bring back the popup, but there are many things that will

div.tooltip a:hover {
text-indent: 0;
}

worked for me..

Suzy

[kristen]

Thank you so much! I really appreciate the help! It worked great!

[Rambo Tribble]

Although it was not part of the experiments that led to my discovery of the behaviour in question, I would harbor a sneaking suspicion that assigning a value to the anchor element's display property, even just a reiteration of the default, might very well trigger IE's awareness of the significance of that attribute of the poor, wretched, little thing.

[SuzyUK]

Yes RT, display is one of the properties that will "fix" the bug too and you're quite right that just re-iterating the default is often enough..

I found the old post where this bug was discovered and a list of the defaults that can be used.
Pure CSS Popups IE Bug [webmasterworld.com]

I just like text-indent: 0; (default) as it very rarely affects anything else, but it's whatever you remember really I suppose ;)

Oh and although that post says the bug is in IE6.. I have since confirmed that versions 5, 5+ and 6 IE/Win demonstrate the same behaviour..

Suzy