Hi all,
In an effort to create an ACCESSIBLE form, I have abandoned the "FormBuilder verson and hand-coded one of my own. I still need the scripts to make it work and e-mail me the data from users, but a more urgent problem has arisen.
Please go tohttp://www.queens-english-society.com/apply.html and look at what IE has done to it. FF and Safari are fine, but IE has mangled the submit area and the footer.
Here is my code for the form, (which has proved to work with assistive technology) The code runs from the start of the application form <div> to the closing HTML at the foot of the page:

<div id="application">
<p class="emphasise"> There is a temporary fault with the form and it will not work at present.
Please e-mail <a href="mailto:membership@queens-english-society.com">The Membership Secretary</a>for assistance.</p>

<form action="">
<fieldset>
<legend>Your name and address</legend>
<ol>
<li>
<label for"title">Your Title <i>select one</i></label>
<select name="title" id="title">
<option>Mr</option>
<option>Mrs</option>
<option>Miss</option>
<option>Ms</option>
<option>Dr.</option>
<option>Prof.</option>
</select>
<li>
<label for"firstname">Your First Name</label>
<input id="firstname" name="firstname" class="text" type="text" />
</li>
<li>
<label for"lastname">Your Last Name</label>
<input id="lastname" name="lastname" class="text" type="text" />
</li>
<li>
<label for="addressline1">Address line 1</label>
<input id="addressline1" name="addressline1" class="text" type="text" />
</li>
<li>
<label for="addressline2">Address line 2</label>
<input id="addressline2" name="addressline2" class="text" type="text" />
</li>
<li>
<label for="townorcity">Town or City</label>
<input id="townorcity" name="townorcity" class="text" type="text" />
</li>
<li>
<label for="countydistrictstate">County, District or State</label>
<input id="countydistrictstate" name="countydistrictstate" class="text" type="text" />
</li>
<li>
<label for="postalzipcode">Postal / Zip Code</label>
<input id="postalzipcode" name="postalzipcode" class="text" type="text" />
</li>
<li>
<label for="country">Country (if other than UK)</label>
<input id="country" name="country" class="text" type="text" />
</li>
</ol>
</fieldset>
<fieldset>
<legend>Other Contact Details</legend>
<ol>
<li>
<label for"telephonenumber">Telephone Number</label>
<input id="telephonenumber" name="telephonenumber" class="text" type="text" />
</li>
<li>
<label for"mobilenumber">Mobile / Cell Number</label>
<input id="mobilenumber" name="mobilenumber" class="text" type="text" />
</li>
<li>
<label for"email">E-mail Address</label>
<input id="email" name="email" class="text" type="text" />
</li>
<li>
<label for"confirmemail">Confirm E-mail Address</label>
<input id="confirmemail" name="confirmemail" class="text" type="text" />
</li>
</ol>
</fieldset>
<fieldset>
<legend>My Membership</legend>
<ol>
<li>
<label for"mymembership">I want it to start in <i>select one</i>
<select name="mymembership" id="mymembership">
<option>Immediately</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
</li>
</ol>
</fieldset>
<fieldset>
<legend>Further Information</legend>
<ol>
<li>
<label for"furtherinformation">Please tell us about yourself, e.g. current profession, age group etc.</label>
<textarea name="furtherinformatin" rows="10" cols="50"></textarea>
</li>
</ol>
</fieldset>

<fieldset class="submit">
<input class="submit" type="submit"
value="SUBMIT" />
</fieldset>
</form>
</div><!-- end application div -->
</div><!-- end content div -->

<div id="footer">


<p class="footer"><span class="colorpara">Copyright
&copy; 2009. &nbsp;Website Design by &quot;SCOTT&quot;
Enquiries to: <a href=
"mailto:webmaster@queens-english-society.com">QES
Webmaster</a></span></p>

<p></p>
</div><!-- end footer div -->
</div><!-- end main div -->
</div><!-- end wrapper div -->
</body>
</html>

Here is the external style sheet code which refers to the form:
#application {
width: 75%;
}
fieldset {
margin: 1.5em 0 0 0;
padding: o;
}
legend {
margin-left: 1em
color: #000000;
font-weight: bold;
}
fieldset ol {
padding: 1em 1em 0 1em;
list-style: none;
}
fieldset li {
padding-bottm: 1em;
}
fieldset.submit {
border-style: none;
}
label {
float: left;
width: 12em;
margin-right: 1em;
}
fieldset li {
float: left;
clear: left;
width: 100%;
padding-bottom: 1em;
}
fieldset.submit {
float: none;
width: auto;
border: 0 none #FFF;
padding-left: 16em
}

Any ideas folks?
Thanks for taking a look!

I'm afraid Opera mangles it too, but Chrome seems to be coping ok.

Could just be the footer id needs tweaking and that the form is fine. How about if you try putting all the footer div outside the main div but just inside the wrapper div?

Not this:


but this:

Janys is correct. The form itself displays fine in IE when viewed independently.

Really good idea, Janys, but no-go! Why can't browsers dance to the same music eh!

I'm looking at it now, Tony. While I do, it would be a good idea to go to http://validator.w3.org/ and validate the code, both the html and css. They are throwing errors. If you are able to correct the errors, maybe the distortion will disappear. Having said that, I have not gone through your code yet, though...

Yes, Janys and Joker, I also noticed that the footer is inside the main div.

Additional, Thanks for your thoughts too Joker, but I have now removed the <div id="main"></!end main div> which wasn't really serving any purpose, but still no change.

Thanks Inger,
The "main div" is no more as it seemed to be doing nothing inside the wrapper. I will go to W3C as suggested, I had planned to do that for the whole site, soon anyway, but I wanted to solve the problems with the form first, I haven't got a script for it yet.

When you design a page using CSS and HTML, it might be a good idea for you to first start with the page structure without the content. Create each div using a different background color, validate the CSS and HTML code, and view the page in FF and IE. This will give you an idea of what is happening with each div. When you are satisfied that the page structure is correct, then add the content.

Haven't got very far yet, but one thing I noticed: In the CSS you declare #footer (=div footer) but in the html you have <p class="footer>" I have changed that to div...