CSS positioning problem on IE7 w/ HTML tables

[webeneezer]

I need to dynamically position a div within a scrolled window and have is vertically-centered in the window. The triggering event is the click of an image located in a HTML table cell. I would also like the left offset of the div to be relative to either the image or the HTML table.

This problem is for IE7. Additional help on other browsers is welcome.

Thanks in advance!

[encyclo]

Welcome to WebmasterWorld webeneezer! :)

Could you give a short snippet of the code as you have it at the moment?

[webeneezer]

HTML:

<div id="outer" style="position: absolute; top:50%; width:100%; overflow:visible;
height:1px; margin: 0; ">

<div id="dest" style="position: absolute; border: solid 1px #336699; width: 400px; height: 500px;
visibility: hidden; background-color: white; z-index: 100; padding: 5px 5px 5px 5px;
text-align: center; vertical-align: middle">
</div>
</div> <!-- outer div -->

JS:

var myDiv = document.getElementById ('dest');

(g_ele is the global variable representing the image within the HTML table that is being clicked)

From here I am trying to position myDiv. I have tried to get a meaningful value for the distance from the top of the document to the top of the viewport, but can't. I've tried:

window.scrollY
document.documentElement.scrollTop
document.documentElement.offsetTop
myDiv.scrollTop
window.scrollTop
g_ele.offsetTop (computed by iterating and accumulating the g_ele.offsetParent values)
myDiv.offsetHeight
myDiv.offsetTop

Right now I'm without a workable strategy, but I think the answer is in finding the y-position of the top of the viewport. I just don't know how to do that.