Problem with a Submit button in IE7

Hey all,
I've got a contact form within a div(#contact) and for some reason my SUBMIT button(In IE7) is waaay up within the form itself instead of at the bottom of the form where it should be. In firefox it is at the bottom of the form right where it should be. I'm thinking this is something simple that I'm not seeing? I'm using transitional xhtml.
-----------------------------------------------------------
html, body, div, span, object,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, code,
del, dfn, em, font, img, ins, kbd, q, s,
small, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}

.border {
border-style:solid;
border-width:1px;
border-color:#cccccc;color:#666666;
background-color:#F2F2F2;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:160%;
height:20px;
float:left;
margin-top:5px;
margin-bottom:10px;
}

.label {
position:relative;
float:left;
}

input:hover {
background-color:#F0E68C;
}

input.border:focus {
background: #fff;
border: 1px solid #595959;
}

.borders {
border-style:solid;
border-width:1px;
border-color:#cccccc;
color:#666666;
background-color:#F2F2F2;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:160%;
height:130px;
float:left;
}

.buttonborder {
position:relative;

}

textarea:hover {
background-color:#F0E68C;
}

textarea.borders:focus {
background: #fff;
border: 1px solid #595959;
}

#contact {
position:absolute;
right:72px;
width:200px;
top:40px;
}
----------------------------------------------------------

<div id="contact">
<div id="contactme"><img src="contactmenote.png" alt="Contact me anytime!" />
</div>
<form action="contactform.php" method="post" name="ContactForm" id="ContactForm">
<label class="label">Name

<input name="textfield" type="text" class="border" maxlength="100" />
</label>
<p>
<label class="label">Email

<input name="textfield2" type="text" class="border" maxlength="100" />
</label>
</p>
<p>
<label class="label">Message
<textarea name="textarea" class="borders" ></textarea>
</label>
<input name="recipient" type="hidden" id="recipient" value="0,1" />
<input name="subject" type="hidden" id="subject" />
<input name="required" type="hidden" id="required" value="Name,Email,Message" />
<input name="Email_Only" type="hidden" id="Email_Only" value="Email" />
<input name="redirect" type="hidden" id="redirect" value="http://www.example.com/thankyou.php" />
<input name="redirect_type" type="hidden" id="redirect_type" value="include" />
</p>
<p>
<label>
<input type="submit" name="Submit" class="buttonborder" value="Submit" />
</label>
</p>
</form></div>

[edited by: encyclo at 12:41 am (utc) on Mar. 13, 2009]
[edit reason] exemplified [/edit]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<style type="text/css">
html, body, div, span, object,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, code,
del, dfn, em, font, img, ins, kbd, q, s,
small, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
.border,.borders {
border:1px solid #cccccc;
color:#666666;
background-color:#F2F2F2;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:160%;
height:20px;
width:100%;
float:left;
margin:5px 0 10px 0;
}
.borders {
height:130px;
}
input:hover,textarea:hover {
background-color:#F0E68C;
}
input.border:focus,textarea.borders:focus {
background: #fff;
border: 1px solid #595959;
}
#contact {
position:absolute;
right:72px;
width:200px;
top:40px;
}
</style>
</head>
<body>
<div id="contact">
<form action="contactform.php" method="post" name="ContactForm" id="ContactForm">
<p id="contactme"><img src="contactmenote.png" alt="Contact me anytime!"></p>
<p><label for="id" >Name</label>
<input name="textfield" id="textfield" type="text" class="border" maxlength="100"></p>
<p><label for="textfield2">Email</label>
<input name="textfield2" id="textfield2" type="text" class="border" maxlength="100"></p>
<p><label for="textarea1" >Message</label>
<textarea name="textarea1" id="textarea1" class="borders" cols="12" rows="4" ></textarea></p>
<p><input type="submit" name="SubmitButton" id="SubmitButton" class="buttonborder" value="Submit"></p>
<input name="recipient" type="hidden" id="recipient" value="0,1">
<input name="subject" type="hidden" id="subject">
<input name="required" type="hidden" id="required" value="Name,Email,Message">
<input name="Email_Only" type="hidden" id="Email_Only" value="Email">
<input name="redirect" type="hidden" id="redirect" value="http://www.example.com/thankyou.php">
<input name="redirect_type" type="hidden" id="redirect_type" value="include">
</form>
</div>
</body>
</html>

Problem with a Submit button in IE7

It's where it should be in Firefox.

Preeminent

rocknbil

Preeminent

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week