I have a simple page that has two popup windows ran with css and javascript. Using the edit button, the windows popup correctly, but I cannot get the position to be right. When I click edit on either of the two links, the div opens at the top edit rather than where it should. I think this must be a problem with the focus, but i cannot seem to figure it out. Any help would be greatly appreciated. My code is below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<script language="JavaScript" type="text/JavaScript">
// runs pop for block
function $(id) {
return document.getElementById(id);
}
</script>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META NAME="ROBOTS" CONTENT="INDEX,FOLLOW"><title>dc</title>
<META NAME="keywords" CONTENT="">
<META NAME="description" CONTENT="">
<META name="verify-v1" content="w8sNurkJBCUSIZIvSgp4K4X/KQhdVloilC9uZ4agL3s=" />
<link href="/dc_v1.css" rel="stylesheet" type="text/css">
<style>
/* runs pop */
.popup {
position: absolute; display: none;
}
</style>
</head><body>
<tr>
<td colspan="2" valign="top"><table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<div id="regform91" class="popup" style="padding:10px; border:solid 1px #0033CC; background-color:#E1E1E1; text-align:left;">
<p style="text-align:right; margin:0;" class="t11"><a href="javascript
:var%20f=$('regform91');%20f.style.display=(f.style.display=='block'?'none':'block');%20%20/*%20$('91').focus();%20*/%20void%200;" style="cursor:pointer; color:#0033CC">close x</a></p>
Comment (optional)
<form name="form_block91" method="get" style="position: relative;">
<input name="piccomments_edit" type="text" size="50" maxlength="50"><br>
<input name="commentid" type="text" value="91">
<input type="submit" name="button" value="Save" onclick="document.form_block91.submit()">
</form>
</div>
<tr><td valign="top">one <a href="javascript
:var%20f=$('regform91');%20f.style.display=(f.style.display=='block'?'none':'block');%20%20/*%20$('namefield91').focus();%20*/%20void%200;" style="cursor:pointer; color:#0033CC"> - edit</a><br><img src=/profile/pictures/391622/9110R05205NX14J5513ZZ.jpg width=200px height=250px border=0><br><a href="edit_profile_pictures.asp?removeid=91">Remove Picture</a><p style="padding-top:12px;"> </p></td></tr>
<div id="regform92" class="popup" style="padding:10px; border:solid 1px #0033CC; background-color:#E1E1E1; text-align:left;">
<p style="text-align:right; margin:0;" class="t11"><a href="javascript
:var%20f=$('regform92');%20f.style.display=(f.style.display=='block'?'none':'block');%20%20/*%20$('92').focus();%20*/%20void%200;" style="cursor:pointer; color:#0033CC">close x</a></p>
Comment (optional)
<form name="form_block92" method="get" style="position: relative;">
<input name="piccomments_edit" type="text" size="50" maxlength="50"><br>
<input name="commentid" type="text" value="92">
<input type="submit" name="button" value="Save" onclick="document.form_block92.submit()">
</form>
</div>
<tr><td valign="top">two <a href="javascript
:var%20f=$('regform92');%20f.style.display=(f.style.display=='block'?'none':'block');%20%20/*%20$('namefield92').focus();%20*/%20void%200;" style="cursor:pointer; color:#0033CC"> - edit</a><br><div style="height:250px; width:200px; text-align:center; position:relative;"><img src=/profile/pictures/391622/9210X05661LH56V1445ZZ.jpg width=200px height=250px border=0></div>
<a href="edit_profile_pictures.asp?removeid=92">Remove Picture</a><p style="padding-top:12px;"> </p></td></tr>
</body></html>
Unsolved 
