ReCaptcha Displaying at top of Page instead of Bottom

A small issue here. I have reCaptcha enabled and it's displaying at the top of the page. See Image

I am using Custom HTML to generate the form code.

<h4>NYSBOC Calendar Submission Form</h4>
<p>Please fill out this form in its entirety. Incomplete event submissions received will be disregarded.</p>
  <table width="428" border="0" align="center">
    <tr>
      <td width="112">Event Name</td>
      <td width="306" colspan="2"><label>
        <input name="Name_of_Event" type="text" id="Name_of_Event" size="50" maxlength="50" />
      </label></td>
    </tr>
    <tr>
      <td>Location</td>
      <td colspan="2"><label>
        <input name="Location" type="text" id="Location" size="50" maxlength="50" />
      </label></td>
    </tr>

    <tr>
      <td colspan="3">Description<br />
        
        <label>
        <textarea name="Description" cols="61" rows="4" id="Description"></textarea>
        </label>
        <br /></td>
    </tr>
    <tr>    </tr>
  </table>
  <p> </p>
  <table width="428" border="0" align="center">
    <tr>
      <td width="85">Start Date</td>
      <td width="110"><label>
        <input name="Start_Date" class="required"  type="text" id="Start_Date" value="MM/DD/YYYY" size="15" maxlength="15" />
      </label></td>
      <td width="85">Start Time</td>
      <td width="130"><label>
        <input name="Start_Time" class="required"  type="text" id="Start_Time" value="00:00 PM" size="15" maxlength="15" />
      </label></td>
    </tr>
    <tr>
      <td>End Date</td>
      <td><label>
        <input name="End_Date" class="required"  type="text" id="End_Date" value="MM/DD/YYYY" size="15" maxlength="15" />
      </label></td>
      <td>End Time</td>
      <td><label>
        <input name="End_Time" class="required"  type="text" id="End_Time" value="00:00 PM" size="15" maxlength="15" />
      </label></td>
    </tr>
  </table>
  <p> </p>
  <table width="428" border="0" align="center">
    <tr>
      <td width="112">Contact Name</td>
      <td width="306" colspan="2"><label>
        <input name="Contact_Name" type="text" id="Contact_Name" size="40" maxlength="40" />
      </label></td>
    </tr>
    <tr>
      <td>Phone Number</td>
      <td colspan="2"><label>
        <input type="text" name="Phone" id="Phone" />
      </label></td>
    </tr>
    <tr>
      <td>Email</td>
      <td colspan="2"><label>
        <input name="Email" type="text" id="Email" size="40" maxlength="40" />
      </label></td>
    </tr>
  </table>
  <p align="center">Enter Verification Code: {ReCaptcha}</p>
  <p align="center">
    <label>
    <input type="submit" name="Submit" id="Submit" value="Submit" />
    </label>
    <label>
    <input type="reset" name="Reset" id="Reset" value="Reset" />
    </label>

Hi Magnotti,

Looks like an unclosed div - but your HTML looks OK. Maybe a CSS problaem?

Please post a link to the form so we can take a quick look.

Bob

Thanks for looking at it. Conflicting tables maybe?
http://purplepearcreative.com/~nysboc/index.php?option=com_chronoforms&chronoform=calendar_submission

Hi magnotti,

The problem is that your template CSS sets an absolute position for the recaptcha div

#recaptcha_widget_div {
position: absolute;
top: -140px;
}

Bob

PS I recommend that you turn off the RokZip compressor - it is beta code and doesn't work well with ChronoForms.

Thanks Bob!
I looked into this and the code is actually in the Joomla.css file under compatibility. I changed it to this:

#recaptcha_widget_div {position: inherit;}

and it works great now.

Also, I turned off RokZip as suggested