Internet Explorer 7 Blues

programming web dev
1

I’ve got an issue going on. Whenever I test the following page on IE7

http://treemonsterinc.com/quote.php

the entire page shifts to the right. I went to w3 to validate my code and css, it does not return any errors.

but what’s going on? Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tree Monster, Inc. - Serving Powder Springs and the Greater Atlanta Area Photo Gallery</title>
<link href="css/quote.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//<![CDATA[
<!--
function MM_validateForm() { //v4.0
  if (document.getElementById){
    var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
    for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args*);
      if (val) { nm=val.name; if ((val=val.value)!="") {
        if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
          if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.
';
        } else if (test!='R') { num = parseFloat(val);
          if (isNaN(val)) errors+='- '+nm+' must contain a number.
';
          if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
            min=test.substring(8,p); max=test.substring(p+1);
            if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.
';
      } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.
'; }
    } if (errors) alert('The following error(s) occurred:
'+errors);
    document.MM_returnValue = (errors == '');
} }
//-->
//]]>
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="navigation"><a href="index.html"><img src="images/header/navigation/Tree-Monster.png" alt="home button" width="111" height="34" border="0" /></a><a href="services.html"><img src="images/header/navigation/Tree-Monster-05.png" alt="services button" width="148" height="34" border="0" /></a><a href="photo.html"><img src="images/header/navigation/Tree-Monster-06.png" alt="photogallery button" width="168" height="34" border="0" /></a><a href="quote.php"><img src="images/header/navigation/Tree-Monster-07.png" width="183" height="34" alt="quote button" /></a></div>
<!--end of navigation--></div>
<!--end of header-->
<div id="contentbox">
<div id="thecontent">
<form id="form1" name="form1" method="post" action="send.php">
<table width="500" border="0">
<tr>
<td width="122" class="bold">*Name:</td>
<td width="268"><input name="name_text" type="text" id="name_text" onblur="MM_validateForm('nameText','','R');return document.MM_returnValue" /><br />
<br /></td>
</tr>
<tr>
<td class="bold">*Email:</td>
<td><input name="email_text" type="text" id="email_text" onblur="MM_validateForm('email','','RisEmail');return document.MM_returnValue" /><br />
<br /></td>
</tr>
<tr>
<td class="bold">Phone:</td>
<td><input type="text" name="phone_text" id="phone_text" /><br />
<br /></td>
</tr>
<tr>
<td class="bold">Address:</td>
<td><input type="text" name="address_text" id="address" /><br />
<br /></td>
</tr>
<tr>
<td class="bold">City:</td>
<td><input type="text" name="city_text" id="city" /><br />
<br /></td>
</tr>
<tr>
<td class="bold">State:</td>
<td><input type="text" name="state_text" id="state_text" /><br />
<br /></td>
</tr>
<tr>
<td class="bold">Zip:</td>
<td><input type="text" name="zip_text" id="zip_text" /><br />
<br /></td>
</tr>
<tr>
<td>Tell us about your needs:</td>
<td>
<textarea name="comment_text" id="comment_text">
</textarea>
<br /></td>
</tr>
<tr>
<td></td>
<td><img src="HDWFormCaptcha/FormCaptcha.php?width=180&amp;height=70&amp;letter_count=5&amp;min_size=35&amp;max_size=45&amp;noise=200&amp;noiselength=5&amp;bcolor=ffffff&amp;border=000000" width="180" height="70" id="captchaimg" alt="security code" border="0" name="captchaimg" /><br />
Enter Security Code:<br />
<input type="text" size="20" name="hdcaptcha" id="hdcaptcha" tabindex="100" value="" /><br /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" id="submit" value="Submit" /> <input type="reset" name="Reset" id="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</div>
<!--end of thecontent-->
<div id="logo"><img src="images/body/logo/official-logo.png" width="310" height="259" alt="tree monster official logo" /></div>
<!--end of contact info-->
<div id="links"><img src="images/body/epictech_logo/epictech_logo.png" width="400" height="123" alt="epic tech logo" /> ©Tree Monster, Inc. All Rights Reserved.</div>
<!--end of links--></div>
<!--end of content box--></div>
<!--end of wrappter-->
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin : 0;
    padding : 0;
    border : 0;
    vertical-align : baseline;
    text-align: center;
}
body {
    line-height : 1;
    background-attachment: fixed;
    background-position: center top;
    background-color: #000;    
}
h1, h2, h3, h4, h5, h6 {
font-weight : normal;
clear : both;
}
ol, ul {

}
blockquote:before, blockquote:after {

}
del {
text-decoration : line-through;
}
table {
border-collapse : collapse;

}
a img {
border : none;
}
#wrapper {
width : 1000px;
margin : 0 auto;
}
#header {
background-image:url(../images/header/treemonsterlogo-header.jpg);
background-repeat : no-repeat;
width:1000px;
height:239px;
}

#navigation {
    position:absolute;
    width: 610px;
    height: 34px;
    margin: 170px 20px;
    
}
#contentbox{
    position:absolute;
    width: 1000px;
    height: 1262px;
    background-image:url(../images/body/Tree-Monster%20body.jpg);
}
#logo{
    position:absolute;
    width:310px;
    height:259px;
    margin: 10px 635px;
}
#thecontent{
    position:absolute;
    width: 560px;
    height: 800px;
    margin: 15px 43px;
    color: #FFF;
}
#button{
    position:absolute;
    width:268px;
    height:90px;
    margin: 10px 15px;
    
}
#treemonster{
    position: absolute;
    width:320px;
    height: 100px;
    left: 134px;
    top: 31px;
}
#contactinfo{
    position:absolute;
    width: 300px;
    height: 700px;
    margin: 280px 635px;
}

#wrapper #contentbox #thecontent p {
    font-family: "Times New Roman", Times, serif;
    font-size: 14pt;
    color: #FFF;
    font-weight: normal;
    padding: 20px;
    letter-spacing: 1px;
}
#wrapper #contentbox #thecontent h1 {
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
    color: #FFF;
    font-size: 24px;
}


#quote{
    position:absolute;
    width: 265px;
    height: 53px;
    margin: 12px 20px;
}


/*#logo {
    position:absolute;
    width: 161px;
    height: 204px;
    background-repeat:no-repeat;
    margin: 105px 739px;
}*/
#links{
position:absolute;
    width: 400px;
    height: 150px;
    margin: 1100px 310px;
    color: #FFF;
    text-align: center;
}
#wrapper #contentbox #contactinfo p {
    font-family: "Times New Roman", Times, serif;
    font-size: 17px;
    color: #000;
    text-align: center;
    font-weight: normal;
    
}
#wrapper #contentbox #thecontent #form1 table {
     position:absolute;
     float:none;
        text-align: center;
}
.bold {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1px;
    font-weight: bold;
    color: #FFF;
}

Please Help