Hi, Please can someone help, I paid someone to create a form for me and it was a total mess and they refused to admit there was a problem and that everyone else seeing the same as me is basically wrong, so I gave up trying to get help from them.. I have aligned it the best I can but it isn't perfect, when you click on number in party and select 10-12 the last the 3 imput boxes are misaligned. Also the Party leader field is as misaligned. Please can someone help me, I need to get this sorted asap. Here is the form link http://www.lm-lakeland-design.co.uk/Villa/Form.html This is the code in the header <script type="text/javascript"> var listNames = ["arrival_day","departure_day","birth_day[]","arrival_month","departure_month","birth_mon th[]","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.previousSibl ing.previousSibling); lastGuest--; } } prevGuests = nGuests; document.body.focus(); } function fillSelect(nList){ for (n=0; n<listOpts; 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) } 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"> form {width: 420px; font-family: Arial; font-size: 12pt;} fieldset {width: 420px; background-color: #F6EABC; border: 1px solid #E6B280; padding-left: 8px; padding-bottom: 8px;} legend {font-family: Arial; font-size: 14pt; color: #000000; background-color: transparent; padding-left: 8px; padding-right: 8px; padding-top: 3px; margin-bottom: 5px;} select {font-family: Arial; font-size: 10pt; margin-top: 3px; margin-bottom: 3px; margin-right: 3px; width: 53px; vertical-align:middle} .input_field {font-family: Arial; font-size: 10pt; padding-left: 2px; padding-top: 1px; padding-bottom: 1px; margin-top: 3px; margin-bottom: 3px;} .input_textarea {font-family: Arial; font-size: 10pt; width: 218px; height: 65px; padding: 2px; margin-top: 3px; margin-bottom: 3px; overflow: hidden;} .submitBtn {font-family: Arial; font-size: 10pt; font-weight: bold; cursor: pointer; padding-top: 2px; padding-bottom: 2px; margin: 15px 0 5px; background-color: #ffffff; border: solid 1px #000000;} .label_1 {position: relative; top: -0px;margin-right: 23px; } .label_2 {position: relative; top: -40px; margin-right: 109px;} .label_3 {position: relative; top: +3px;margin-right:93px;} .label_4 {position: relative; top: +3px;margin-right: 49px;} .label_5 {position: relative; top: +3px;margin-right: 121px;} .label_6 {position: relative; top: +3px;margin-right: 128px;} .label_7 {position: relative; top: +5px;margin-right: 86px;} .label_8 {position: relative; top: +5px;margin-right: 60px;} .label_9 {position: relative; top: +6px;margin-right: 56px;} .label_10 {position: relative; top: +3px;margin-left: 25px; margin-top: 9px;} .label_11 {margin-right: 5px; margin-top: 5px;} label {vertical-align: 25%} #submit {margin-left:180px;} </style> Anh the form HTML <form method="post" action="mailto:"> <fieldset> <legend>Reservation/Enquiry Form</legend> <label class="label_1">Party / Group Leader:</label> <input type="text" name="group_leader" size="30" 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="30" class="input_field"> <br> <label class="label_4">Home Telephone:</label> <input type="text" name="home_phone" size="30" class="input_field"> <br> <label class="label_5">Mobile:</label> <input type="text" name="mobile_phone" size="30" class="input_field"> <br> <label class="label_6">Email:</label> <input type="text" name="email_address" size="30" 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">?</option> </select> <div class="label_10">Guest Details - Name & Date of Birth:</div> <div class="label_11" id="guest_info">Guest1: <input type="text" name="guest_name[]" size="19" class="input_field" style="vertical-align:middle"> <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> </DIV> </div> </td> </tr> </table> </BODY> </HTML> Thanks Loads to anyone who can help m Dee
Hello, Put the "Guest##" labels inside a span tag with a classname of your choice, like: <span class="lanelspan">Guest 1:</span> Code (markup): and then add to your style sheet: .labelspan { width: 100px; //or any other width to fit your needs } Code (markup): Cheers
Probably, I hadn't even looked at your code. In my opinion, it's to much code for a simple thing, and you're using some techniques that are not the best around. You should consider rebuilding the entire script. Cheers
Hi, thanks for clarifying what I said from the beginning that the person who did this code (not me a so called professional coder from this forum) has make a total mess of it. Only problem is he won't admit it. And there are other flaws in the code, if you select 2 from the number in party and then need to change it to 1, it doesn't update. I feel you should be very wary, when paying someone off this forum, not to intent to insult any genuine coder/designers, but not everyone can deliver what they promise and they walk away with your money in their back pocket. And he was one of the worst people I have ever had to deal with. Been 100% ripped off Dee