homepage Welcome to WebmasterWorld Guest from 54.145.182.50
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Problem with a Submit button in IE7
It's where it should be in Firefox.
Preeminent

5+ Year Member



 
Msg#: 3869249 posted 12:09 am on Mar 13, 2009 (gmt 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]

 

rocknbil

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



 
Msg#: 3869249 posted 3:50 pm on Mar 13, 2009 (gmt 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>

Preeminent

5+ Year Member



 
Msg#: 3869249 posted 7:23 pm on Mar 14, 2009 (gmt 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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved