css popups

[doozer77]

I'm having trouble with this css popup code. It works perfectly in Mozilla but not at all in IE. I have seen the same code wok in IE before but I must be missing something.

Here's an example of th html:

<div id="fourth_line">
<p class="theatre"><a href="#">Millbrook<span>4th Line Theatre<br />Millbrook<br />Robert Winslow, Artistic Director<br />Click to find out more &rsaquo;&rsaquo;</span></a></p>
</div>

And the css:

p.theatre {
font: 9px verdana;
background-color: #FFF7E8;
border: 1px solid #000;
padding: 1px 2px;
letter-spacing: -1px;
}

p.theatre a span {
display: none;
}

p.theatre a:hover span {
display: block;
position: absolute;
top: 50px;
left: 50px;
width: 100px;
color: #000;
font: 10px verdana;
}

What should happen is that the text within the span tags appears only when the link is hovered over. As I said, it works in Mozilla but not in IE Win. Any suggestions?

[edited by: SuzyUK at 7:24 am (utc) on April 30, 2005]
[edit reason] examplified link [/edit]

[SuzyUK]

Hi doozer77 and Welcome to WebmasterWorld!

IE has a a couple of small quirks using this technique, but nothing major..

in your case you simply need to give IE an a:hover rule, any default setting will do, it doesn't seem to recognise a:hover span if there is not a previous a:hover rule!

e.g.
p.theatre a:hover {text-indent: 0;}

Suzy

[doozer77]

Thanks for your help SuzyUK. I added that line and it worked! So frustrating how erratically IE behaves. Nice to know there are people like you out there willing to share your experience.

d.

[doozer77]

Well now that the hover text is apearing I have a new problem. It seems that once a link is clicked on and then the page gets reloaded, the hover text, which should be hidden by default, now displays. The only way to correct it is to clear the browser cache. I think I've read about a solution before but can't think of where.

Anybody know what might cause this? Does this even make sense? I can always email someone a link if they want to see the page in action.

d

[doozer77]

Thanks to createErrorMsg in their response to this thread [webmasterworld.com...] I figured out that
p.theatre a:visited span {display: none;}
needed to be set. Because it wasn't set before, it automatically determined that the span text should be displayed.

Thanks for everyone's input.

d