Welcome to WebmasterWorld Guest from 50.16.78.128

Forum Moderators: not2easy

Message Too Old, No Replies

Problem with a Submit button in IE7

It's where it should be in Firefox.

   
12:09 am on Mar 13, 2009 (gmt 0)

5+ Year Member



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]

3:50 pm on Mar 13, 2009 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



112 in tag: textarea the following required attributes are missing: cols, rows

combined common attributes in "border"

Corrected label markup, no reason to float them

removed unecessary selectors (I think it was the position on the button causing the problem)

Some nesting problems, once validated all is well.

Since there's no XHTML here, used an HTML doctype, probably will work in XHTML but don't see the point.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- doctype all on one line -->
<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>
7:23 pm on Mar 14, 2009 (gmt 0)

5+ Year Member



Thank You SO much! Yes, taking the position of the button off, did the trick.
I liked how you cleaned up my css as well. I have to start working on that. Thanks for you time!
 

Featured Threads

Hot Threads This Week

Hot Threads This Month