Pure CSS popup + Abs Position = Safari Issue

[ganast]

This code works great with IE6 and FF1.3, but Safari 1.3 borks badly. Positioning is correct, but a major portion of the block is not rendered, the original link "shows through," and a part of the block remains rendered on mouseOut.

The problem appeared when I made the parent div that contains position:relative so that I could have a "relative, yet absolute" reference point for the popup. That is what is killing Safari. Anyone know why?

a.popup span {/*beginning of css popup*/
display: none;
}
a.popup:hover {/*InternetEvil6 display hack for css popup - pure-css-popups-bug*/
text-indent: 0;
}

/*the pos:rel in the next definition sets an Upper Left Ref point for the a.popup:hover span... something here is the source of my error */

div.popupParent {
position:relative;
display:inline;
}

a.popup:hover span { /*the span will display just on :hover state*/
display: block;
position: absolute;
top: -60px;
left: -350;
width: 520px;
z-index: 100;
}

with this HTML:

<div class="popupParent">
<a href="../OrderForm.pdf" class="popup">Printable Order Form<span>This text between the span tags is not displayed unless there is a hover event on the link... the block is positioned such that it covers the link, and it itself is a link.</span></a>
</div>

--gabe

[tedster]

I'm not sure whether this will help you fix you Safari issue or not, but there was a recent thread about essentially the same construct. There may be some insight in there.

[webmasterworld.com...]

[ganast]

No, unfortunately, my code is "perfect" [lol]... well, lets just say it works beautifully in IE6 and FF1.3

But Safari butchers it...

--gabe