Got a tip for us?
Let us know
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
Weird Form Problem
- Thread starter Jeremy1026
- Start date
- Sort by reaction score
Source code of the page.
And this is my CSS
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Between The Lines Detailing</title>
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="./css/site.css"/>
</head>
<body>
<div id="header">
<div id="masthead">
<img src="./images/your-picture.gif" width="200" height="139" /><img src="./images/your-picture.gif" alt="Your Image Here" />
<h1>Between The Lines Detailing</h1>
<p>Bringing your car back to its factory shine at your home or office.</p>
<ul>
<li><a href="./index.html"><strong>Home</strong></a></li>
<li><a href="./about.html"><strong>About</strong></a></li>
<li><a href="./contact.html"><strong>Contact</strong></a></li>
<li><a href="./services.html"><strong>Services</strong></a></li>
<li><a href="./gallery.html"><strong>Gallery</strong></a></li>
<li><a href="./appointment.html"><strong>Schedule A Detail</strong></a></li>
</ul>
</div>
</div>
<div id="main">
<div id="content">
<!-- Side Column -->
<div id="subContent">
<h2>Recent Details</h2>
<br />
2003 Toyota Corolla<br />
2007 Lexus IS250<br />
2005 MINI Cooper S Convertable<br />
2003 MINI Cooper </p>
</div>
<!-- Beginning of Article -->
<div class="article">
<form name="apptReq" action="submit.php" method="post">
<div align="center">
<input type="hidden" name="subject" value="Appointment Request" />
<input type="hidden" name="redirect" value="thankyou.html" />
</font>
</div>
<p align="left"> Name:
<input name="name" type="text" id="name" size="20" />
</font></p>
<p align="left"> Email <font size="-2">name@domain.com</font>:
<input name="email" type="text" id="email" size="20" />
</font></p>
<p align="left"> Phone <font size="-2">xxx-xxx-xxxx</font>:
<input name="phone" type="text" id="phone" size="13" maxlength="13" />
</font></p>
<p align="left"> Best contact method:
<input type="radio" name="contactMethod" id="contactMethod" value="email" />
Email
<input type="radio" name="contactMethod" id="contactMethod" value="phone" />
Phone</font></p>
<p align="left"> Address Line 1:
<input name="addressline1" type="text" id="addressline1" size="20" />
</font></p>
<p align="left"> Address Line 2:
<input name="addressline2" type="text" id="addressline2" size="20" />
</font></p>
<p align="left"> City:
<input name="city" type="text" id="city" size="20" />
</font></p>
<p align="left"> State:
<input name="state" type="text" id="state" size="20" />
</font></p>
<p align="left"> Zip Code:
<input name="zip" type="text" id="zip" size="5" maxlength="5">
</font></p>
<p align="left"> Make/Model/Year:
<input name="makemodel" type="text" id="makemodel" size="20" />
</font></p>
<p align="left"> Service Requested:
<select name="serviceReq" id="serviceReq">
<option value="" selected="selected"></option>
<option value="basic ext.">Basic Exterior Package</option>
<option value="basic in-out">Basic In-and-Out Package</option>
<option value="int. ext.">Intermediate Exterior Package</option>
<option value="int. in-out">Intermediate In-and-Out Package</option>
<option value="prem. ext.">Premium Exterior Package</option>
<option value="prem. in-out">Premium In-and-Out Package</option>
</select>
</font></p>
<p align="left"> Day you wish to setup appointment <font size="-2">dd/mm</font>:
<input name="aptReqDate" type="text" id="aptReqDate" size="5" maxlength="5" />
</font></p>
<p align="left"> Additional Comments or Special Notes:<br />
<textarea name="comments" cols="50" rows="5"></textarea>
</font></p>
<div align="left">
<input name="submitBtn" type="submit" value="Submit" />
</font>
</div>
</form>
</div>
<!-- Beginning of Article -->
</div>
<center><div id="footer">
<ul>
<li>© 2008 Between The Lines Detailing</li>
</ul>
</div>
</center>
</div>
</body>
</html>And this is my CSS
Code:
/* Layout
---------------------------------------------------------*/
* {
padding:0;
margin:0;
list-style:none;
border:0;
}
body {
background:#000;
}
#header {
background:url(../images/bg.gif) bottom repeat-x;
width:100%;
height:15em;
position:relative;
}
#masthead {
width:50em;
margin:0 auto;
padding:4em 0 5.8em 19em;
height:5.2em;
position:relative;
}
#masthead ul {
position:absolute;
bottom:0;
z-index:0;
}
#masthead li {
float:left;
margin-right:10px;
background:#d8ed46 url(../images/nav_over.gif) bottom repeat-x;
}
#masthead li a {
background:transparent url(../images/nav_over_left.gif) top left no-repeat;
display:block;
}
#masthead li:hover {
background:#d8ed46 url(../images/nav_under.gif) bottom repeat-x;
}
#masthead li a strong {
padding:0.5em 10px 0.5em 0;
margin-left:10px;
display:block;
background:transparent url(../images/nav_over_right.gif) top right no-repeat;
}
#masthead img {
position:absolute;
height:10em;
width:15em;
border:0.3em solid #FFF;
left:0;
bottom:2em;
outline:0.2em solid #000;
}
#main {
background:#FFF url(../images/main.gif) repeat-x;
width:100%;
z-index:2; /* Covers up annoying IE7 nav bar spacing issue. */
position:absolute;
}
#content {
background:#FFF;
width:72em;
margin:0 auto;
padding:2em;
}
#subContent {
width:18em;
padding-left:2em;
background:url(../images/green_vr.gif) repeat-y;
float:right;
}
.article {
width:49.5em;
padding-bottom:6.5em;
padding-right:2em;
background:url(../images/hr.gif) right bottom no-repeat;
position:relative;
left: 6px;
top: 1px;
}
.article ul {
margin:1em 0;
}
.article li {
margin-left:1.5em;
margin-bottom:0.5em;
}
.article ul li, #subContent ul li {
background:url(../images/bullet.gif) left no-repeat;
padding-left:1em;
}
.comments {
position:absolute;
right:3em;
bottom:3em;
}
.article .comments li {
display:inline;
margin:0;
padding:0;
background:none;
}
.hr {
width:55em;
height:128px;
}
#footer {
clear:both;
background:#000;
height:70px;
position:relative;
left: -6px;
top: -17px;
width: 945px;
}
#footer ul {
position:absolute;
text-align:right;
right:50%;
top:37px;
margin-top:-4em;
padding:3em 1em;
border-right:1px solid #CF0;
left: -114px;
}
#footer img {
position:absolute;
left:50%;
top:50%;
margin-top:-2.9em;
background:#CCC;
margin-left:1em;
height:5em;
width:5em;
border:5px solid #FFF;
outline:0.1em solid #333;
}
/* Typography
---------------------------------------------------------*/
body {
font:62.5% "Trebuchet MS"; /* Change this % to alter the size of the whole page */
color:#333;
}
a {
color:#090;
}
p {
line-height:1.5em;
font-size:1.2em;
margin-bottom:1em;
}
h1 {
font-size: 3.6em;
padding:0;
margin:0;
color:#FFF;
}
h2 {
font-size:2em;
line-height:1.5em;
margin-bottom:0.5em;
}
blockquote {
border-left:0.3em solid #090;
padding-left:2em;
margin-left:1em;
color:#666;
}
.article li {
font-size:1.2em;
}
.comments {
font-size:0.95em;
}
#subContent h2 {
font-size:1.3em;
}
#subContent p {
font-size:1.1em;
}
#masthead p {
color:#CF0;
}
#masthead li a {
font-size:1.2em;
color:#000;
text-decoration:none;
}
#footer {
color:#CCC;
}
#footer a {
color:#FFF;
text-decoration:none;
}
#footer a:hover {
text-decoration:underline;
}
#footer p {
margin-bottom:0;
}
Have you tried running your code through a validator?
I noticed that throughout your code, you have a </font> tag after all of your input boxes.
Example:
Code:
<p align="left"> Name:
<input name="name" type="text" id="name" size="20" />
</font></p>
That did it. Thank-you very much, I'm amazed I overlooked that.
Thank-you, that should help me clean up my code, I added some different fonts, didn't like them, and only pulled parts of the font codes, leaving it yucky.