popup positioning

[TravisLaborde]

Hello! I'm just starting to use z-index spans to produce "popups" in IE6, and so far it's all good, but I have a question regarding positioning of the span. Please look at this quick code, then consider my question:

<style>
.hasMore
{
font-size: 8pt;
cursor: hand;
color: darkblue;
font-family: Tahoma, Verdana, 'Times New Roman';
background-color: #99ccff;
}
.hooverSpace
{
z-index: 10;
position: absolute;
background-color: yellow;
}
</style>
Name: <span id=hooverTest class=hasMore>Travis Laborde</span>
<span class=hooverSpace id=hooverSpace>more information about Travis</span>
<script language=vbscript>
sub hooverTest_onMouseOver()
set e = window.event
document.body.all(&quot;hooverSpace&quot.style.top = e.ClientY
document.body.all(&quot;hooverSpace&quot.style.left = e.ClientX
document.body.all(&quot;hooverSpace&quot.style.display = &quot;&quot;
end sub
sub hooverTest_onMouseOut()
document.body.all(&quot;hooverSpace&quot.style.display = &quot;none&quot;
end sub
sub hooverSpace_onMouseOver()
document.body.all(&quot;hooverSpace&quot.style.display = &quot;&quot;
end sub
sub hooverSpace_onMouseOut()
document.body.all(&quot;hooverSpace&quot.style.display = &quot;none&quot;
end sub
</script>


OK, all of that works 100% fine, but what I'm looking to change is, right now, when the &quot;hidden&quot; span appears, it's position is relative to where the mouse was when the event occurred. I'd like to always cause the position to be relative to the element that caused the event instead of the mouse.

For example, my usage is that I have a <span> with a few words which are of the class .hasMore, so when you MouseOver that span, the popup appears. But, since there are a few words inside the span, the popup might appear in a slightly different place depending on if you brought your mouse in near the left or near the right side of the span. I hope I've explained properly.

Thanks!
Travis

 

[Boomerang]

Hi Travis,

Change the 'position' of '.hooverSpace' to inherit:

.hooverSpace
{
z-index: 10;
position: inherit;
background-color: yellow;
}

or better just leave, because inherit is the default value:

.hooverSpace
{
z-index: 10;
background-color: yellow;
}

Hope this helps,
Erik
<-- My sport: Boomerang throwing !!
!! Many Happy Returns !! -->