Welcome to WebmasterWorld Guest from 23.22.182.29

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)

Junior Member

5+ Year Member

joined:Dec 11, 2006
posts:57
votes: 0


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)

Senior Member

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

joined:Nov 28, 2004
posts:7999
votes: 0


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)

Junior Member

5+ Year Member

joined:Dec 11, 2006
posts:57
votes: 0


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!
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members