Weird Form Problem

Discussion in 'Web Design and Development' started by Jeremy1026, Feb 26, 2008.

  1. Jeremy1026 macrumors 68020

    Jeremy1026

    Joined:
    Nov 3, 2007
    #1
    I am coding a form for my website, but none of the text boxes are visible. Attached is a screenshot, any ideas?
     

    Attached Files:

  2. ChicoWeb macrumors 65816

    ChicoWeb

    Joined:
    Aug 16, 2004
    Location:
    California
    #2
    First idea is post the code.
    Do you have a border color of white on all inputs?
     
  3. Jeremy1026 thread starter macrumors 68020

    Jeremy1026

    Joined:
    Nov 3, 2007
    #3
    Source code of the page.

    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;
    }
    
     
  4. hanschien macrumors 6502

    hanschien

    Joined:
    Oct 2, 2006
    Location:
    Houston, TX
    #4
    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>
    
     
  5. Jeremy1026 thread starter macrumors 68020

    Jeremy1026

    Joined:
    Nov 3, 2007
    #5
    Know of any good code validators?
     
  6. hanschien macrumors 6502

    hanschien

    Joined:
    Oct 2, 2006
    Location:
    Houston, TX
  7. Jeremy1026 thread starter macrumors 68020

    Jeremy1026

    Joined:
    Nov 3, 2007
    #8
    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.
     

Share This Page