HTML Forum

**Dee2007** · 01:03 AM

Hi All, someone did a form for me and it is all messed up the alignment is all out, everything is left aligned, the submit button isn't centered etc. I emailed and told them of the problem, but they said the form was fine and it was a problem my end.

Please can someone help me fix this, I had ideally needed it ready by tomorrow, so am very upset. And the person who did it isn't back at work until Monday.

Here is the code

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
 var listNames = ["arrival_day","departure_day","birth_day[]","arrival_month","departure_month","birth_month[]","number_in_party"];
 var listOpts = ["31","31","31","12","12","12","12"];  // the last integer is the maximum number of guests;
 var prevGuests = 1;
 var lastGuest = 1; 
 function updateGuests(nGuests){
  if (nGuests == 0)
   {
    return; 
   } 
  var desiredGuests = nGuests-prevGuests; 
  if (desiredGuests > 0)
   {
    for (i=0; i<desiredGuests; i++)
    {
     var nFields = document.forms[0].getElementsByTagName('fieldset')[0];
     var nClone = document.forms[0].getElementsByTagName('div')[1].cloneNode(true);     
     var nFloor = document.getElementById('submit');  
       nFields.insertBefore(nClone,nFloor);
     if (lastGuest < 9)
     {
       nClone.firstChild.nodeValue = nClone.firstChild.nodeValue.replace(/\d{1,}/,Number(lastGuest + 1));
      var nGuest = document.getElementsByName('guest_name[]');
      nGuest[nGuest.length-1].value = "";     
     } 
     else  {
      nClone.firstChild.data = nClone.firstChild.data.substring(0,10).replace(/\d{1,}/,Number(lastGuest + 1));
      var nGuest = document.getElementsByName('guest_name[]');
      nGuest[nGuest.length-1].value = "";          
     }
     lastGuest = Number(nClone.firstChild.data.match(/\d{1,}/)[0]); 
    }
   }
  else  {
    desiredGuests = Math.abs(desiredGuests);
    for (i=0; i<desiredGuests; i++)
    {
     var nFields = document.forms[0].getElementsByTagName('fieldset')[0];
     nFields.removeChild(nFields.lastChild.previousSibling.previousSibling);
     lastGuest--;
    }
   }
  prevGuests = nGuests;
  document.body.focus();
 }
 function fillSelect(nList){
  for (n=0; n<listOpts[i]; n++)
   {
    var nOption = document.createElement('option'); 
    if (n < 9 && nList != "number_in_party")
    {
     var nData = document.createTextNode("0"+(n+1)); 
     nOption.setAttribute("value","0"+(n+1)); 
    }
     else  {
      var nData = document.createTextNode(n+1); 
     nOption.setAttribute("value",n+1); 
    }     
     nOption.appendChild(nData); 
    document.forms[0][nList].appendChild(nOption); 
   }
 }
 
 function init(){
  
  for (i=0; i<listNames.length; i++)
   {
    fillSelect(listNames[i])
   }
  for (i=2007; i>1906; i--)
   {
    var nOption = document.createElement('option'); 
     var nData = document.createTextNode(i); 
     nOption.setAttribute('value',i); 
     nOption.appendChild(nData); 
    document.forms[0]['birth_year[]'].appendChild(nOption); 
   }   
 }
 onload=init; 
 
</script>
<style type="text/css">
  body {background-color: #f0f8ff; margin-top: 60px; margin-bottom: 60px;}
  form {width: 480px; margin:auto; font-family: 'Myriad Roman'; font-size:  12pt;}
  fieldset {width: 480px; background-color: #ffffe0; border: 1px solid #000000; padding-left: 8px; padding-bottom: 8px;}
  legend {font-family: 'Myriad Roman'; font-size: 14pt; color: #000000; background-color: transparent; padding-left: 8px; padding-right: 8px; padding-top: 3px; margin-bottom: 5px;}
  select {font-family: 'Myriad Roman'; font-size: 10pt; margin-top: 3px; margin-bottom: 3px; margin-right: 3px; width: 53px;}
 .input_field {font-family: 'Myriad Roman'; font-size: 10pt; padding-left: 2px; padding-top: 1px; padding-bottom: 1px; margin-top: 3px; margin-bottom: 3px;}
 .input_textarea {font-family: 'Myriad Roman'; font-size: 10pt; width: 218px; height: 65px; padding: 2px; margin-top: 3px; margin-bottom: 3px; overflow: hidden;}
 .submitBtn {font-family: 'Myriad Roman'; font-size: 10pt; font-weight: bold; cursor: pointer; display: block; padding-top: 2px; padding-bottom: 2px; margin-left: auto; margin-right: auto; margin-top: 15px; margin-bottom: 5px; background-color: #ffffff; border: solid 1px #000000;}
 .label_1 {margin-right: 95px;}
 .label_2 {position: relative; top: -25px; margin-right: 178px;}
 .label_3 {margin-right: 163px; }
 .label_4 {margin-right: 115px;}
 .label_5 {margin-right: 182px;}
 .label_6 {margin-right: 191px;}
 .label_7 {margin-right: 149px;}
 .label_8 {margin-right: 125px;}
 .label_9 {margin-right: 118px;}
 .label_10 {margin-left: 115px; margin-top: 9px;}
 .label_11 {margin-right: 5px; margin-top: 5px;}
</style>
</head>
 <body>
  <form method="post" action="">
     <fieldset>
   <legend>Registration Form</legend>
    <label class="label_1">Party / Group Leader:</label>
    <input type="text" name="group_leader" size="35" class="input_field">
    <br>
    <label class="label_2">Address:</label>
    <textarea name="postal_address" class="input_textarea"></textarea>
    <br>
    <label class="label_3">Post Code:</label>
    <input type="text" name="postal_code" size="35" class="input_field">
    <br>
    <label class="label_4">Home Telephone:</label>
    <input type="text" name="home_phone" size="35" class="input_field">
    <br>
    <label class="label_5">Mobile:</label>
    <input type="text" name="mobile_phone" size="35" class="input_field">
    <br>
    <label class="label_6">Email:</label>
    <input type="text" name="email_address" size="35" class="input_field">
 
    <br>
    <label class="label_7">Arrival Date:</label>
    <select name="arrival_day">
     <option value="">dd</option>
    </select>
    <select name="arrival_month">
     <option value="">mm</option>
    </select>
    <select name="arrival_year">
     <option value="">yyyy</option>
     <option value="2007">2007</option>
     <option value="2008">2008</option>
     <option value="2009">2009</option>
     <option value="2010">2010</option>     
    </select>
    <br>
    <label class="label_8">Departure Date:</label>
    <select name="departure_day">
     <option value="">dd</option>
    </select>
    <select name="departure_month">
     <option value="">mm</option>
    </select>
    <select name="departure_year">
     <option value="">yyyy</option>
     <option value="2007">2007</option>
     <option value="2008">2008</option>
     <option value="2009">2009</option>
     <option value="2010">2010</option> 
    </select>
    
    <br>
    <label class="label_9">Number in Party:</label>
    <select name="number_in_party" onchange="updateGuests(this.value)">
     <option value="0">&nbsp;&nbsp;&nbsp;?</option>
    </select>
    <div class="label_10">Guest Details - Name &amp; Date of Birth:</div>  
    
    <div class="label_11" id="guest_info">Guest&nbsp;1:&nbsp;&nbsp;&nbsp;&nbsp;
     <input type="text" name="guest_name[]" size="35" class="input_field">
     <select name="birth_day[]">
      <option value="">dd</option>
     </select>
     <select name="birth_month[]">
      <option value="">mm</option>
     </select>
     <select name="birth_year[]">
      <option value="">yyyy</option>
     </select>
    </div>
    <input type="submit" name="submit" id="submit" value="Submit" class="submitBtn">
     </fieldset>
  </form>
 </body>
</html>

A HUGE thank you to anyone willing to help

Dee

**Tom_M** · 11-21-2007, 11:19 PM

Can you be a little more specific? It looks OK to me. Other than some oddities in the CSS.

**Dee2007** · 11-22-2007, 01:00 AM

Hi, thank you for your reply.

Yes I can explain, the contents of the form is meant to more centered not aligned to the left, the address field is a mile out to the right, the arrival boxes are misaligned and the DOB isn't all on one line, and the submit button isn't in the centre.

I have been had big time on this form I feel, it is not what I asked for. Yet the guy is saying me and now 10 other peoples screenshots are incorrect

What I really need is someone who can help me, to center it and align everything correctly

PLEASE

Dee

**rion** · 11-22-2007, 02:20 AM

This probably isn't exactly what you want but it's a start.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
 var listNames = ["arrival_day","departure_day","birth_day[]","arrival_month","departure_month","birth_month[]","number_in_party"];
 var listOpts = ["31","31","31","12","12","12","12"];  // the last integer is the maximum number of guests;
 var prevGuests = 1;
 var lastGuest = 1; 
 function updateGuests(nGuests){
  if (nGuests == 0)
   {
    return; 
   } 
  var desiredGuests = nGuests-prevGuests; 
  if (desiredGuests > 0)
   {
    for (i=0; i<desiredGuests; i++)
    {
     var nFields = document.forms[0].getElementsByTagName('fieldset')[0];
     var nClone = document.forms[0].getElementsByTagName('div')[1].cloneNode(true);     
     var nFloor = document.getElementById('submit');  
       nFields.insertBefore(nClone,nFloor);
     if (lastGuest < 9)
     {
       nClone.firstChild.nodeValue = nClone.firstChild.nodeValue.replace(/\d{1,}/,Number(lastGuest + 1));
      var nGuest = document.getElementsByName('guest_name[]');
      nGuest[nGuest.length-1].value = "";     
     } 
     else  {
      nClone.firstChild.data = nClone.firstChild.data.substring(0,10).replace(/\d{1,}/,Number(lastGuest + 1));
      var nGuest = document.getElementsByName('guest_name[]');
      nGuest[nGuest.length-1].value = "";          
     }
     lastGuest = Number(nClone.firstChild.data.match(/\d{1,}/)[0]); 
    }
   }
  else  {
    desiredGuests = Math.abs(desiredGuests);
    for (i=0; i<desiredGuests; i++)
    {
     var nFields = document.forms[0].getElementsByTagName('fieldset')[0];
     nFields.removeChild(nFields.lastChild.previousSibling.previousSibling);
     lastGuest--;
    }
   }
  prevGuests = nGuests;
  document.body.focus();
 }
 function fillSelect(nList){
  for (n=0; n<listOpts[i]; n++)
   {
    var nOption = document.createElement('option'); 
    if (n < 9 && nList != "number_in_party")
    {
     var nData = document.createTextNode("0"+(n+1)); 
     nOption.setAttribute("value","0"+(n+1)); 
    }
     else  {
      var nData = document.createTextNode(n+1); 
     nOption.setAttribute("value",n+1); 
    }     
     nOption.appendChild(nData); 
    document.forms[0][nList].appendChild(nOption); 
   }
 }
 
 function init(){
  
  for (i=0; i<listNames.length; i++)
   {
    fillSelect(listNames[i])
   }
  for (i=2007; i>1906; i--)
   {
    var nOption = document.createElement('option'); 
     var nData = document.createTextNode(i); 
     nOption.setAttribute('value',i); 
     nOption.appendChild(nData); 
    document.forms[0]['birth_year[]'].appendChild(nOption); 
   }   
 }
 onload=init; 
 
</script>
<style type="text/css">
  body {background-color: #f0f8ff; margin-top: 60px; margin-bottom: 60px;}
  form {width: 480px; margin:auto; font-family: 'Myriad Roman'; font-size:  12pt;}
  fieldset {width: 480px; background-color: #ffffe0; border: 1px solid #000000; padding-left: 8px; padding-bottom: 8px;}
  legend {font-family: 'Myriad Roman'; font-size: 14pt; color: #000000; background-color: transparent; padding-left: 8px; padding-right: 8px; padding-top: 3px; margin-bottom: 5px;}
  select {font-family: 'Myriad Roman'; font-size: 10pt; margin-top: 3px; margin-bottom: 3px; margin-right: 3px; width: 53px;}
 .input_field {font-family: 'Myriad Roman'; font-size: 10pt; padding-left: 2px; padding-top: 1px; padding-bottom: 1px; margin-top: 3px; margin-bottom: 3px;}
 .input_textarea {font-family: 'Myriad Roman'; font-size: 10pt; width: 218px; height: 65px; padding: 2px; margin-top: 3px; margin-bottom: 3px; overflow: hidden;}
 .submitBtn {font-family: 'Myriad Roman'; font-size: 10pt; font-weight: bold; cursor: pointer; display: block; padding-top: 2px; padding-bottom: 2px; margin-left: auto; margin-right: auto; margin-top: 15px; margin-bottom: 5px; background-color: #ffffff; border: solid 1px #000000;}
 .label_1 {margin-left: 95px;}
 .label_2 {position: relative; top: -25px; margin-left: 178px;}
 .label_3 {margin-left: 153px; }
 .label_4 {margin-left: 115px;}
 .label_5 {margin-left: 182px;}
 .label_6 {margin-left: 191px;}
 .label_7 {margin-left: 149px;}
 .label_8 {margin-left: 125px;}
 .label_9 {margin-left: 118px;}
 .label_10 {margin-left: 115px; margin-top: 9px;}
 .label_11 {margin-right: 5px; margin-top: 5px;}
</style>
</head>
 <body>
  <form method="post" action="">
     <fieldset>
   <legend>Registration Form</legend>
    <label class="label_1">Party / Group Leader:</label>
    <input type="text" name="group_leader" size="35" class="input_field">
    <br>
    <label class="label_2">Address:</label>
    <textarea name="postal_address" class="input_textarea"></textarea>
    <br>
    <label class="label_3">Post Code:</label>
    <input type="text" name="postal_code" size="35" class="input_field">
    <br>
    <label class="label_4">Home Telephone:</label>
    <input type="text" name="home_phone" size="35" class="input_field">
    <br>
    <label class="label_5">Mobile:</label>
    <input type="text" name="mobile_phone" size="35" class="input_field">
    <br>
    <label class="label_6">Email:</label>
    <input type="text" name="email_address" size="35" class="input_field">
 
    <br>
    <label class="label_7">Arrival Date:</label>
    <select name="arrival_day">
     <option value="">dd</option>
    </select>
    <select name="arrival_month">
     <option value="">mm</option>
    </select>
    <select name="arrival_year">
     <option value="">yyyy</option>
     <option value="2007">2007</option>
     <option value="2008">2008</option>
     <option value="2009">2009</option>
     <option value="2010">2010</option>     
    </select>
    <br>
    <label class="label_8">Departure Date:</label>
    <select name="departure_day">
     <option value="">dd</option>
    </select>
    <select name="departure_month">
     <option value="">mm</option>
    </select>
    <select name="departure_year">
     <option value="">yyyy</option>
     <option value="2007">2007</option>
     <option value="2008">2008</option>
     <option value="2009">2009</option>
     <option value="2010">2010</option> 
    </select>
    
    <br>
    <label class="label_9">Number in Party:</label>
    <select name="number_in_party" onchange="updateGuests(this.value)">
     <option value="0">&nbsp;&nbsp;&nbsp;?</option>
    </select>
    <div class="label_10">Guest Details - Name &amp; Date of Birth:</div>  
    
    <div class="label_11" id="guest_info">Guest&nbsp;1:&nbsp;&nbsp;&nbsp;&nbsp;
     <input type="text" name="guest_name[]" size="35" class="input_field">
     <br>
         <select name="birth_day[]">
      <option value="">dd</option>
     </select>
     <select name="birth_month[]">
      <option value="">mm</option>
     </select>
     <select name="birth_year[]">
      <option value="">yyyy</option>
     </select>
    </div>
    <input type="submit" name="submit" id="submit" value="Submit" class="submitBtn">
     </fieldset>
  </form>
 </body>
</html>

**BlackWater** · 11-22-2007, 09:09 AM

Browser difference? If he made it and viewed it in Firefox and you then viewed it in Microsoft IE than that would most likely be part of your problem. IE has this nasty habit of screwing with your website.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!