Pure CSS popups - Safari Problem

[axys]

Hi,

After reading a few tutorials, I have managed to implement some pure CSS popups that work fine in IE6 and firefox.

If you hover over the little question marks next to "book now" and "get a quote" (about half way down the page) you can see it in action:

http://espanagolf.stage.headland.co.uk/pages/asam

The css that produces this effect is:



.bpop {
display: none;
}

a.itr:hover {
border-width: 0; /* IE Fix */
text-decoration:none;
}


a.itr:link, a.itr:visited, a.itr:active {
position: relative;
text-decoration:none;
}
.itr:hover .bpop {
display: block;
position: absolute;
width: 200px;
background-color: #ffffff;
padding: 1px 3px 2px 3px;
border: 2px #FF9966 solid;
font-size: 10px;
color: #0055A4;
left: 20px;
top: 0.5em;
}



and the HTML is:



<a class="itr" href="#"><img class="infoImage" src="/images/special-offer-book-q.gif" /><span class="bpop">Simply click here and tell us in your email how many people will be travelling and what arrival/departure dates and we'll send your final price via email. All you need to do then is reply by telephone or email, to confirm and book your holiday.</span></a>


The problem is, in Safari the popup is obscured and the text is underlined, I've been trying various things but can't get it sorted. I'd rather do it this way than have to resort to javascript so would really appreciate any ideas!

[Rossario123]

here is a smaller less cumbersome way to do this


a.a1, a.a1:visited{font-size:12px;font-family:verdana,sans-serif;text-decoration:none;position:relative;}
a.a1:hover{text-decoration:none;color:red;}
a.a1 em{visibility:hidden;position:absolute;left:20px;top:0px;height:0;width:0;}
a.a1:hover em{visibility:visible;display:block;height:20px;width:200px;background-color:black;text-decoration:none;}



<a class="a1"><em>Popup here</em>Hover over me!</a>

[axys]

That doesn't work in IE6 for me.