I need help with my form and wordpress

i have a site:
http://dageniusmarketer.com

Ive put code into it that should generate a drop in form, more specifically:
http://www.dynamicdrive.com/dynamicindex17/dropinbox.htm


Anyways, this code works fine when using a regular html page. However, i am trying this with wordpress and am coming up with all sorts of distortions. And the distortions differ across different browsers, like safari and firefox. All the code is going into the header.php section of my theme. Id like to know why is it distorting the page and how can i stop it. I also would like the page to go dark behind it when the drop in comes down. I need the solution ASAP.

THIS PART GOES IN BETWEEN THE HEAD TAGS

<script language="JavaScript1.2">

// Drop-in content box- By Dynamic Drive
// For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
// This credit MUST stay intact for use

var ie=document.all
var dom=document.getElementById
var ns4=document.layers
var calunits=document.layers? "" : "px"

var bouncelimit=32 //(must be divisible by 8)
var direction="up"

function initbox(){
if (!dom&&!ie&&!ns4)
return
crossobj=(dom)?document.getElementById("dropin").style : ie? document.all.dropin : document.dropin
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossobj.top=scroll_top-250+calunits
crossobj.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropin()",50)
}

function dropin(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossobj.top)<100+scroll_top)
crossobj.top=parseInt(crossobj.top)+40+calunits
else{
clearInterval(dropstart)
bouncestart=setInterval("bouncein()",50)
}
}

function bouncein(){
crossobj.top=parseInt(crossobj.top)-bouncelimit+calunits
if (bouncelimit<0)
bouncelimit+=8
bouncelimit=bouncelimit*-1
if (bouncelimit==0){
clearInterval(bouncestart)
}
}

function dismissbox(){
if (window.bouncestart) clearInterval(bouncestart)
crossobj.visibility="hidden"
}

function truebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}


window.onload=initbox

</script>
<style type="text/css">
<!--
.style1 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}
.closeButton {
	margin-left: 580px;
}
body {
	background-color: #000099;
}
.style2 {color: #FFFFFF}
-->
</style>









THIS PART IS SUPPOSED TO GO IN THE BODY


<div id="dropin" style="position: relative; visibility: hidden; left: 109; top: 105; width: 382; height: 300; background-color:">
<center><form method="post" action="http://www.aweber.com/scripts/addlead.pl">
<input type="hidden" name="meta_web_form_id" value="stuff">
<input type="hidden" name="meta_split_id" value="">
<input type="hidden" name="unit" value="dagenius">
<input type="hidden" name="redirect" value="http://www.dageniusmarketer.com/bigbluebook/CheckYourEmail.html" id="redirect_stuff">
<input type="hidden" name="meta_redirect_onlist" value="">
<input type="hidden" name="meta_adtracking" value="SidebarWidget">
<input type="hidden" name="meta_message" value="1">
<input type="hidden" name="meta_required" value="name,from">
<input type="hidden" name="meta_forward_vars" value="0">
<table width="600" height="326" border="0" cellpadding="0" cellspacing="0" bordercolor="#FF0000" background="http://dageniusmarketer.com/bigbluebook/Graphics/GeniusWebsiteForm.jpg">
<tr><td colspan=3><center>
</center></td></tr>
<tr><td width="282">&nbsp;</td>
<td colspan="2">&nbsp;</td></tr>
<tr><td height="69">&nbsp;</td><td colspan="2">&nbsp;</td></tr>
    <tr><td height="81" rowspan="4"><center>
    </center></td>
      <td height="22" colspan="2"><p>&nbsp;</p>        </td>
    </tr>
    <tr>
      <td width="124" height="22">&nbsp;</td>
      <td width="194"><input type="text" name="name" value="Full Name" size="20" /></td>
    </tr>
    <tr>
      <td height="20">&nbsp;</td>
      <td height="20"><input type="text" name="from" value="Email" size="20" /></td>
    </tr>
    <tr>
      <td height="21" colspan="2">&nbsp;</td>
    </tr>
<tr><td height="111" align="center">&nbsp;</td>
  <td height="111" colspan="2" align="center"><input name="submit" type="image" value="Submit" src="http://dageniusmarketer.com/bigbluebook/Graphics/KeepMeInLoop_Button.jpg" /></td>
</tr>
</table>
<div class="closeButton"><a href="#" class="style1 style2" onclick="dismissbox();return false">[X] </a></div>
</form>

</center>

<center>
</center>


<script type="text/javascript" src="http://forms.aweber.com/form/stuff.js"></script>
</div>

Code (markup):

please hit me on my skype if anything for that will be my quickest contact method to walk me through this. my sn is: dageniusmarketer or email me at:

info@dageniusmarketer.com