IE8 doesn't display half my jQuery-rendered Form.

IE8 doesn't display half my jQuery-rendered Form.

Live at www.organic-effects.co.uk/portfolio.htm

Click the contact us button on the top right. A 'contactable' style plug-in should slide down, asking for user details with a submit button. On firefox, the html renders thus (comments added by me for this post only)

  1. <div style="display: block;" class="container contactForm">
  2.       <div class="spacer row"><div class="twelvecol last"><p></p></div></div>
  3. <!--IE STOPS RENDERING HERE-->
  4. <div class="form row">
  5.       <div class="threecol formblurb">
  6.       <br><img src="media/OELogo-white.png">
  7.       <p>Enter your details into our web form, and we will contact you by phone or e-mail within the working day.</p><hr><p class="closep">
  8.       <a class="close" href="">[close]</a></p></div><!-- end blurb column-->
  9. <form id="contactForm" method="" action="">
  10.       <div class="threecol">
  11.             <p>Contact Details:</p>
  12.             <div><input name="name" value="" class="info" title="[Your Name]" type="text"><p class="orange"> &nbsp;*&nbsp; </p></div><br>
  13.             <div><input name="phone" value="" class="info" title="[Your Mobile / Phone Number]" type="text"><p class="orange"> (*)</p></div><br>
  14.             <div><input name="email" value="" class="info" title="[Your E-mail Address]" type="text"><p class="orange"> (*)</p></div><br>
  15.             <div><label for="option">
  16. <!--IE RENDERS EVERYTHING BELOW HERE
  17. [Check this box if you prefer to be contacted by e-mail.]<input name="option" value="" id="option" align="top" type="checkbox"><p></p></label></div>
  18.             </div> <!--end column-->
  19.       <div class="threecol">
  20.             <p>Street Address:</p>
  21.             <div><input name="house" value="" class="info" title="[House Number &amp; Street Address]" type="text"><p class="orange"> * </p></div><br>
  22.             <div><input name="pcode" value="" class="info" title="[Post Code]" type="text"><p class="orange"> *</p></div><br>
  23.             <div><input name="town" value="" class="info" title="[Your Town or Village]" type="text"><p class="orange"> *</p></div>
  24.       </div><!--close column-->
  25.       <div class="threecol last">
  26.             <p>Message:</p><p class="orange"> (*) </p>
  27.             <div><textarea type="text" name="msg" value="" class="info msg" title="[Enter a brief description of the service(s) you require.]"></textarea></div>
  28.             <div><input name="submit" value="Contact Us." class="info active" type="submit"></div>
  29.             <hr><p class="closep"><a class="close" href="">[close]</a></p>
  30.       </div><!--close column-->
  31. </form><!--close form-->
  32. </div><!--close form row-->
  33. <div class="row spacer"><div class="twelvecol last"><p></p></div></div>
  34. </div><!--close contactForm-->

All well and good.

However, using IE8, only the following is rendered:

  1. <DIV style="DISPLAY: block" class="container contactForm">
  2.  <!-- CONTACT FORM -->
  3.  <DIV class="row spacer">
  4.   <DIV class="twelvecol last">
  5.    <P>
  6.    </P>
  7.   </DIV>
  8.  </DIV>
  9.  [Check this box if you prefer to be contacted by e-mail.]<INPUT id="option" align="" type="checkbox" name="option" value="" />
  10.  <P>
  11.  </P>
  12.  <DIV class="threecol">
  13.   <P>
  14.    Street Address:
  15.   </P>
  16.   <DIV>
  17.    <INPUT class="info" title="[House Number & Street Address]" name="house" value="[House Number & Street Address]" />
  18.    <P class="orange">
  19.     *
  20.    </P>
  21.   </DIV>
  22.   <BR />
  23.   <DIV>
  24.    <INPUT class="info" title="[Post Code]" name="pcode" value="[Post Code]" />
  25.    <P class="orange">
  26.     *
  27.    </P>
  28.   </DIV>
  29.   <BR />
  30.   <DIV>
  31.    <INPUT class="info" title="[Your Town or Village]" name="town" value="[Your Town or Village]" />
  32.    <P class="orange">
  33.     *
  34.    </P>
  35.   </DIV>
  36.  </DIV>
  37.  <DIV class="threecol last">
  38.   <P>
  39.    Message:
  40.   </P>
  41.   <P class="orange">
  42.    (*)
  43.   </P>
  44.   <DIV>
  45.    <TEXTAREA class="info msg" title="[Enter a brief description of the service(s) you require.]" name="msg" value="" type="text">[Enter a brief description of the service(s) you require.]</TEXTAREA>
  46.   </DIV>
  47.   <DIV>
  48.    <INPUT class="info active" type="submit" name="submit" value="Contact Us." />
  49.   </DIV>
  50.   <HR />
  51.   <P class="closep">
  52.    <A class="close" href="http://organic-effects.co.uk/">[close]</A>
  53.   </P>
  54.  </DIV>
  55.  <DIV class="row spacer">
  56.   <DIV class="twelvecol last">
  57.    <P>
  58.    </P>
  59.   </DIV>
  60.  </DIV>
  61. </DIV>

Only a little more than half the form! (Although on twice the number of lines, due to editing)

It renders the first spacer row, then doesn't render the opening form tag, or almost half of the form. But then it starts rendering html from inside an open column div.

Me is confused.

Also, the script:
(which works in firefox [hurrah! send me a message!] but doesn't work in IE :)
  1. function buildForm(){
  2.         $('.contactForm').append("<div class='spacer row'><div class='twelvecol last'><p></p></div></div>");
  3.         $('.contactForm').append("<div class='form row'><div class='threecol formblurb'><br><img src='media/OELogo-white.png' />"+
  4.             "<p>Enter your details into our web form, and we will contact you by phone or e-mail within the working day.</p>"+
  5.             "<hr><p class='closep'><a class='close' href=''>[close]</a></p></div>"+
  6.             "<form id='contactForm' method='' action=''><div class='threecol'><p>Contact Details:</p>"+
  7.             "<div><input type='text' name='name' value='' class='info' title='[Your Name]' /><p class='orange'> &nbsp;*&nbsp; </p></div><br>"+
  8.             "<div><input type='text' name='phone' value='' class='info' title='[Your Mobile / Phone Number]' /><p class='orange'> (*)</p></div><br>"+
  9.             "<div><input type='text' name='email' value='' class='info' title='[Your E-mail Address]' /><p class='orange'> (*)</p></div><br>"+
  10.             "<div><label for='option'>[Check this box if you prefer to be contacted by e-mail.]<input type='checkbox' name='option' value='' id='option' align='top'/></p></div></div>"+
  11.             "<div class='threecol'><p>Street Address:</p>"+
  12.             "<div><input type='text' name='house' value='' class='info' title='[House Number & Street Address]' /><p class='orange'> * </p></div><br>"+
  13.             "<div><input type='text' name='pcode' value='' class='info' title='[Post Code]' /><p class='orange'> *</p></div><br>"+
  14.             "<div><input type='text' name='town' value='' class='info' title='[Your Town or Village]' /><p class='orange'> *</p></div></div>"+
  15.             "<div class='threecol last'><p>Message:</p><p class='orange'> (*) </p>"+
  16.             "<div><textarea type='text' name='msg' value='' class='info msg' title='[Enter a brief description of the service(s) you require.]'></textarea></div>"+
  17.             "<div><input type='submit' name='submit' value='Contact Us.' class='info' /></div>"+
  18.             "<hr><p class='closep'><a class='close' href=''>[close]</a></p></div></form></div>");
  19.         $('.contactForm').append("<div class='row spacer'><div class='twelvecol last'><p></p></div></div>");
  20.         insertHelpText();
  21.       }; //end build function
I have also tried it with out my added "+" line breaks, no difference.

Script is at www.organic-effects.co.uk/js/contactForm.jquery.js

Any help much appreciated, not even sure where to start debugging, or even what to google for help. As far as I can see, the script is fine, no typos or anything, all tags match up, etc.