Chronoforms form moved right column

Hi,

I am new to the forum and absolutely love chronoforms. Now I am having some slight problem.

I created a form that worked absolutely fine. However I needed to arrange some of the form items in tabular form.

However when I added the table, the whole right column of my site was pushed down, below my form.

I have looked at every letter in the code and cannot seem to find the error.

You can take a look at the problem here: http://www.cubemovers.co.ke/index.php?option=com_chronocontact&chronoformname=form2test

Please help.

See below my form code.

<p> <img src="images/steptwo.png" border="0" alt="Step Three" /></p>
<div class="form_item">
  <div class="form_element cf_heading">
    <h1 class="cf_text">Details of move</h1>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_text"> <span class="cf_text">Origin/ 'Moving from' details</span> </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Estate</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_2" name="text_7" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Street Name</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_13" name="text_21" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">City/Town</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_4" name="text_8" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Country</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_5" name="text_9" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Type of House</label>
    <select class="cf_inputbox" id="select_14" size="1" title=""  name="select_2">
    <option value="">Choose Option</option>
      <option value="Apartment">Apartment</option>
<option value="Maisonette">Maisonette</option>
<option value="Bungalow">Bungalow</option>

    </select>
    
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">If Apartment, which floor?</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_8" name="text_10" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">No. of bedrooms incl. S/Q</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_9" name="text_11" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_text"> <span class="cf_text">Property Details</span> </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Total No. of beds</label>
    <input class="cf_inputbox required validate-number" maxlength="150" size="30" title="" id="text_9" name="text_12" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textarea">
    <label class="cf_label" style="width: 150px;">Total No. of  Couches</label>
    <textarea class="cf_inputbox" rows="1" id="text_12" title="" cols="30" name="text_13"></textarea>
    
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Number of Boxes of Utensils (approximately)</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_15" name="text_22" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Number of Boxes of Clothes (approximately)</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_17" name="text_23" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
<div class="float_left">
<table border="0" >
  <div class="form_element cf_checkbox">
  <tr>
   <th> <label class="cf_label" style="width: 150px;"><u>| Additional items (Important). Please tick what you have | </u></label></th>
   <th><label class="cf_label" style="width: 150px;"><u> | How Many?|</u></th>
   </tr>
   
   <!--First Set-->
   
   <tr>
   <td>
      <input value="Dining Table" title="" class="radio" id="check00" name="check0[]" type="checkbox" />
      <label for="check00" class="check_label">Dining Table</label>
      <br />
      </td>
	  <td>
  <div class="form_element cf_textbox">
    <input class="cf_inputbox validate-number" maxlength="3" size="2" title="" id="text_20" name="text_25" type="text" />
	</div>
	</td>
	</tr>
	
	   <!--Second Set-->
	   
	  <tr>
   <td>
      <input value="TV Set" title="" class="radio" id="check01" name="check0[]" type="checkbox" />
      <label for="check01" class="check_label">TV Set</label>
      <br />
      </td>
	  <td>
  <div class="form_element cf_textbox">
    <input class="cf_inputbox validate-number" maxlength="3" size="2" title="" id="text_20" name="text_26" type="text" />
	</div>
	</td>
	</tr>
	
	   <!--Third Set-->
	  
	    <tr>
   <td>
      <input value="Chairs" title="" class="radio" id="check02" name="check0[]" type="checkbox" />
      <label for="check02" class="check_label">Chairs</label>
      <br />
      </td>
	  <td>
  <div class="form_element cf_textbox">
    <input class="cf_inputbox validate-number" maxlength="3" size="2" title="" id="text_20" name="text_27" type="text" />
	</div>
	</td>
	</tr>

      <!--Fourth Set-->

	  	    <tr>
   <td>
      <input value="Fridge" title="" class="radio" id="check03" name="check0[]" type="checkbox" />
      <label for="check03" class="check_label">Fridge</label>
      <br />
      </td>
	  <td>
  <div class="form_element cf_textbox">
    <input class="cf_inputbox validate-number" maxlength="3" size="2" title="" id="text_20" name="text_28" type="text" />
	</div>
	</td>
	</tr>
      
	 <!--Fifth Set-->

	  	    <tr>
   <td>
    <input value="Wall Units" title="" class="radio" id="check04" name="check0[]" type="checkbox" />
      <label for="check04" class="check_label">Wall Units</label>
      <br />
      </td>
	  <td>
  <div class="form_element cf_textbox">
    <input class="cf_inputbox validate-number" maxlength="3" size="2" title="" id="text_20" name="text_29" type="text" />
	</div>
	</td>
	</tr>
      
 <!--Sixth Set-->
      
	  	  	    <tr>
   <td>
    <input value="Wooden Chests" title="" class="radio" id="check05" name="check0[]" type="checkbox" />
      <label for="check05" class="check_label">Wooden Chests</label>
      <br />
      </td>
	  <td>
  <div class="form_element cf_textbox">
    <input class="cf_inputbox validate-number" maxlength="3" size="2" title="" id="text_20" name="text_30" type="text" />
	</div>
	</td>
	</tr>
	
	 <!--Seventh Set-->  

	   	  	    <tr>
   <td>
   <input value="Cupboards" title="" class="radio" id="check06" name="check0[]" type="checkbox" />
      <label for="check06" class="check_label">Cupboards</label>
      <br />
      </td>
	  <td>
  <div class="form_element cf_textbox">
    <input class="cf_inputbox validate-number" maxlength="3" size="2" title="" id="text_20" name="text_31" type="text" />
	</div>
	</td>
	</tr>
	
   <!--8th Set-->      

   	   	  	    <tr>
   <td>
 <input value="DSTV" title="" class="radio" id="check07" name="check0[]" type="checkbox" />
      <label for="check07" class="check_label">DSTV</label>
      <br />
      </td>
	  <td>
  <div class="form_element cf_textbox">
    <input class="cf_inputbox validate-number" maxlength="3" size="2" title="" id="text_20" name="text_32" type="text" />
	</div>
	</td>
	</tr>
	
	   <!--9th Set-->   
	   
	   
	      	   	  	    <tr>
   <td>
<input value="Cookers" title="" class="radio" id="check08" name="check0[]" type="checkbox" />
      <label for="check08" class="check_label">Cookers</label>
      <br />
      </td>
	  <td>
  <div class="form_element cf_textbox">
    <input class="cf_inputbox validate-number" maxlength="3" size="2" title="" id="text_20" name="text_33" type="text" />
	</div>
	</td>
	</tr>
	
	   <!--10th Set-->   
	<tr>
   <td>
<input value="Freezers" title="" class="radio" id="check09" name="check0[]" type="checkbox" />
      <label for="check09" class="check_label">Freezers</label>
      <br />
      </td>
	  <td>
  <div class="form_element cf_textbox">
    <input class="cf_inputbox validate-number" maxlength="3" size="2" title="" id="text_20" name="text_34" type="text" />
	</div>
	</td>
	</tr>
	   
		   <!--11th Set-->   
	<tr>
   <td>
<input value="Microwaves" title="" class="radio" id="check010" name="check0[]" type="checkbox" />
      <label for="check010" class="check_label">Microwaves</label>
      <br />
      </td>
	  <td>
  <div class="form_element cf_textbox">
    <input class="cf_inputbox validate-number" maxlength="3" size="2" title="" id="text_20" name="text_35" type="text" />
	</div>
	</td>
	</tr>
	
			   <!--12th Set-->   
	<tr>
   <td>
<input value="Dressing Tables" title="" class="radio" id="check011" name="check0[]" type="checkbox" />
      <label for="check011" class="check_label">Dressing Tables</label>
      <br />
      </td>
	  <td>
  <div class="form_element cf_textbox">
    <input class="cf_inputbox validate-number" maxlength="3" size="2" title="" id="text_20" name="text_36" type="text" />
	</div>
	</td>
	</tr>
	
			   <!--12th Set-->   
	<tr>
   <td>
<input value="Study Desks" title="" class="radio" id="check012" name="check0[]" type="checkbox" />
      <label for="check012" class="check_label">Study Desks</label>
      <br />
      </td>
	  <td>
  <div class="form_element cf_textbox">
    <input class="cf_inputbox validate-number" maxlength="3" size="2" title="" id="text_20" name="text_37" type="text" />
	</div>
	</td>
	</tr>
	
				   <!--13th Set-->   
	<tr>
   <td>
<input value="Hi-Fi Systems" title="" class="radio" id="check013" name="check0[]" type="checkbox" />
      <label for="check013" class="check_label">Hi-Fi Systems</label>
      <br />
      </td>
	  <td>
  <div class="form_element cf_textbox">
    <input class="cf_inputbox validate-number" maxlength="3" size="2" title="" id="text_20" name="text_38" type="text" />
	</div>
	</td>
	</tr>
		<tr>
   <td>
<input value="Carpets" title="" class="radio" id="check014" name="check0[]" type="checkbox" />
      <label for="check014" class="check_label">Carpets</label>
      <br />
      </td>
	  <td>
  <div class="form_element cf_textbox">
    <input class="cf_inputbox validate-number" maxlength="3" size="2" title="" id="text_20" name="text_39" type="text" />
	</div>
	</td>
	</tr>
	
</table>       
</div>
</div>
</div>


  
  </div>
  <div class="cfclear"> </div>
</div>




<div class="form_item">
  <div class="form_element cf_text"> <span class="cf_text">Kindly confirm that the details you have input are correct. <br> Additionally, please provide any additional information that may help us understand your needs better.</span> </div>
  <div class="cfclear"> </div>
</div>



<div class="form_item">
  <div class="form_element cf_button">
    <input value="Next" name="button_12" type="submit" /><input type="reset" name="reset" value="Reset"/>
  </div>
  <div class="cfclear"> </div>
</div>

Hi mkkay,

Looks as though you have left a couple of stray </div>s in the Form HTML

    </div>
</div> <!-- here -->
</div> <!-- and here -->
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
    <div class="form_element cf_text"> <span class="cf_text">Kindly confirm that the details you have input are correct. <br>
        Additionally, please provide any additional information that may help us understand your needs better.</span> </div>
    <div class="cfclear"> </div>
</div>
<div class="form_item">
    <div class="form_element cf_button">
        <input value="Next" name="button_12" type="submit" />
        <input type="reset" name="reset" value="Reset"/>
    </div>
    <div class="cfclear"> </div>
</div>

Bob

Hi Greyhead....thanks for the quick reply and sorry I have taken so long to respond.

Now I have checked the code and even removed the divs you spotted buta new problem has arisen. When i click on a checkbox on the form, the text box next to it moves to the right.

What could be causing this? How can i fix it?

Hi mkkay,

The URL you posted doesn't seem to work any more so hard to be specific.

This is probably because the validation adds a message span: <span id='CF_LV_VALID'> </span> to the page. If you use CSS to hide this all should be OK. I posted the code for this a couple of weeks ago.

Bob

Hi Greyhead. I cant seem to find the article where you posted this. Could you please provide me the link? Otherwise the form is working great and this is the only problem left. thanks so much for everything.

Hi,

So after checking the code being generated with firebug, I realised that as you said, it is generating the following code

<span class=" LV_validation_message LV_valid"> </span>

each time the checkbox is clicked. How can I avoid this from happening?

Hi mkkay ,

Try this CSS

span.LV_valid {
  display:none;
}

Bob

Hi Greyhead,

All I can say is that you are absolutely amazing.....IT WORKS!!!! Ur a star.

So simple, yet, as it seems, not so obvious.

Great work.

Hi Friends! I get this issue making me crazy... Where exactly do I have to paste that code (before mentioned on other post. My site is <!-- w --><a class="postlink" href="http://www.asesoresdinamicos.com">www.asesoresdinamicos.com</a><!-- w --> I really love Chronoforms and I will like to resolve this issue. Hope you can help me! Thanks a lot :0)

Ivan

Hi Ivan,

In the Form CSS box (in CFv3) or in a Load CSS action (in CFv4).

Bob

Hi Greyhead! Thanks for all your help! I put a Load CSS action (CFv4) and inside the code, but is not working (maybe I'm doing something wrong) attached an image of the form actions to know if they are well done.

The code that I need to add is just span.LV_valid {display:none;} or it has something else after or before??

The issue form is here: http://asesoresdinamicos.cloudaccess.net/contactenos.html

Thanks in advance for your time and help!

Ivan

Hi Ivan,

You have a different problem; and it's with your template. Please see my reply to your other post about this.

Bob