Hi,
On my form I have 4 columns of data with check boxes.
When a user clicks on the wording of the column to tick the check box,
the columns jump sideways to the left !!!
How can I stop this ??
Here is an image:
This is my HTML:
<form action ='saver_profile.php' method = 'POST'>
<input type='hidden' name = 'profile' value = 'pr785pg' >
<input type='hidden' name = 'x_member_id' value= "<?php echo $N_member_id ?>" >
<p style="float:left; clear:left;">
<br>
Edit Your Account Details:
</p>
<fieldset>
<legend> Select Your Areas of Interest </legend>
<div class="column">
<div>Entertainment</div>
<label for = "x_mus">Music</label>
<input type = "checkbox" id = "x_mus" name='ch1' <?php echo $chk_1 ?> >
<label for = "x_mov">Movies</label>
<input type = "checkbox" id = "x_mov" name='ch2' <?php echo $chk_2 ?> >
<label for = "x_gam">Games</label>
<input type = "checkbox" id = "x_gam" name='ch3' <?php echo $chk_3 ?> >
<label for = "x_gad">Gadgets</label>
<input type = "checkbox" id = "x_gad" name='ch4' <?php echo $chk_4 ?> >
<label for = "x_cam">Camera & Video</label>
<input type = "checkbox" id = "x_cam" name='ch5' <?php echo $chk_5 ?> >
<label for = "x_hom">Home Audio & Theater</label>
<input type = "checkbox" id = "x_hom" name='ch6' <?php echo $chk_6 ?> >
<label for = "x_ins">Musical Instruments</label>
<input type = "checkbox" id = "x_ins" name='ch7' <?php echo $chk_7 ?> >
<div>Computers</div>
<label for = "x_des">Desktops</label>
<input type = "checkbox" id = "x_des" name='ch8' <?php echo $chk_8 ?> >
<label for = "x_lap">Laptops & Tablets</label>
<input type = "checkbox" id = "x_lap" name='ch9' <?php echo $chk_9 ?> >
<label for = "x_acc">Accessories</label>
<input type = "checkbox" id = "x_acc" name='ch10' <?php echo $chk_10 ?> >
<label for = "x_par">Parts & Components</label>
<input type = "checkbox" id = "x_par" name='ch11' <?php echo $chk_11 ?> >
<div>Cars, Bikes, Etc.</div>
<label for = "x_apa">Auto Parts & Accessories</label>
<input type = "checkbox" id = "x_apa" name='ch12' <?php echo $chk_12 ?> >
<label for = "x_ate">Auto Tools & Equipment</label>
<input type = "checkbox" id = "x_ate" name='ch13' <?php echo $chk_13 ?> >
<label for = "x_car">Car Electronics & GPS</label>
<input type = "checkbox" id = "x_car" name='ch14' <?php echo $chk_14 ?> >
<label for = "x_mot">Motorcycle & ATV</label>
<input type = "checkbox" id = "x_mot" name='ch15' <?php echo $chk_15 ?> >
<label for = "x_cav">Caravaning</label>
<input type = "checkbox" id = "x_cav" name='ch16' <?php echo $chk_16 ?> >
<div>Property / Real Estate</div>
<label for = "x_pty">Property Deals</label>
<input type = "checkbox" id = "x_pty" name='ch52' <?php echo $chk_52 ?> >
<label for = "x_buy">Buying Strategies</label>
<input type = "checkbox" id = "x_buy" name='ch53' <?php echo $chk_53 ?> >
<label for = "x_res">Restoration</label>
<input type = "checkbox" id = "x_res" name='ch54' <?php echo $chk_54 ?> >
<label for = "x_fli">Flipping</label>
<input type = "checkbox" id = "x_fli" name='ch55' <?php echo $chk_55 ?> >
<label for = "x_inv">Investments</label>
<input type = "checkbox" id = "x_inv" name='ch56' <?php echo $chk_56 ?> >
</div>
<div class="column">
<div>Clothing & Accessories</div>
<label for = "x_cfl">Clothing for Ladies</label>
<input type = "checkbox" id = "x_cfl" name='ch17' <?php echo $chk_17 ?> >
<label for = "x_cfm">Clothing for Men</label>
<input type = "checkbox" id = "x_cfm" name='ch18' <?php echo $chk_18 ?> >
<label for = "x_cfc">Clothing for Children</label>
<input type = "checkbox" id = "x_cfc" name='ch19' <?php echo $chk_19 ?> >
<label for = "x_cfb">Clothing for Babies</label>
<input type = "checkbox" id = "x_cfb" name='ch20' <?php echo $chk_20 ?> >
<label for = "x_sbl">Shoes & Boots - Ladies</label>
<input type = "checkbox" id = "x_sbl" name='ch21' <?php echo $chk_21 ?> >
<label for = "x_sbm">Shoes & Boots - Men</label>
<input type = "checkbox" id = "x_sbm" name='ch22' <?php echo $chk_22 ?> >
<label for = "x_scl">Sports Clothing</label>
<input type = "checkbox" id = "x_scl" name='ch23' <?php echo $chk_23 ?> >
<label for = "x_odc">Outdoor Clothing</label>
<input type = "checkbox" id = "x_odc" name='ch24' <?php echo $chk_24 ?> >
<label for = "x_bag">Bags & Wallets</label>
<input type = "checkbox" id = "x_bag" name='ch25' <?php echo $chk_25 ?> >
<label for = "x_jew">Jewelry & Watches</label>
<input type = "checkbox" id = "x_jew" name='ch26' <?php echo $chk_26 ?> >
<div>Software</div>
<label for = "x_wdg">Web Design & Graphics</label>
<input type = "checkbox" id = "x_wdg" name='ch27' <?php echo $chk_27 ?> >
<label for = "x_reg">Registry Cleaners</label>
<input type = "checkbox" id = "x_reg" name='ch28' <?php echo $chk_28 ?> >
<label for = "x_sec">Computer Security</label>
<input type = "checkbox" id = "x_sec" name='ch29' <?php echo $chk_29 ?> >
<label for = "x_aud">Audio & Video</label>
<input type = "checkbox" id = "x_aud" name='ch30' <?php echo $chk_30 ?> >
<label for = "x_int">Internet Tools</label>
<input type = "checkbox" id = "x_int" name='ch31' <?php echo $chk_31 ?> >
<label for = "x_fex">Foreign Exchange</label>
<input type = "checkbox" id = "x_fex" name='ch32' <?php echo $chk_32 ?> >
<label for = "x_map">Mobile Apps</label>
<input type = "checkbox" id = "x_map" name='ch33' <?php echo $chk_33 ?> >
</div>
<div class="column">
<div>Health & Fitness</div>
<label for = "x_enf">Exercise & Fitness</label>
<input type = "checkbox" id = "x_enf" name='ch34' <?php echo $chk_34 ?> >
<label for = "x_die">Diets & Weight Loss</label>
<input type = "checkbox" id = "x_die" name='ch35' <?php echo $chk_35 ?> >
<label for = "x_str">Strength Training</label>
<input type = "checkbox" id = "x_str" name='ch36' <?php echo $chk_36 ?> >
<label for = "x_exe">Exercise & Fitness</label>
<input type = "checkbox" id = "x_exe" name='ch37' <?php echo $chk_37 ?> >
<label for = "x_wom">Womens Health</label>
<input type = "checkbox" id = "x_wom" name='ch38' <?php echo $chk_38 ?> >
<label for = "x_meh">Mens Health</label>
<input type = "checkbox" id = "x_meh" name='ch39' <?php echo $chk_39 ?> >
<div>Sports</div>
<label for = "x_ore">Outdoor Recreation</label>
<input type = "checkbox" id = "x_ore" name='ch40' <?php echo $chk_40 ?> >
<label for = "x_boa">Boating & Water Sports</label>
<input type = "checkbox" id = "x_boa" name='ch41' <?php echo $chk_41 ?> >
<label for = "x_hun">Hunting & Fishing</label>
<input type = "checkbox" id = "x_hun" name='ch42' <?php echo $chk_42 ?> >
<label for = "x_cyc">Cycling</label>
<input type = "checkbox" id = "x_cyc" name='ch43' <?php echo $chk_43 ?> >
<label for = "x_tea">Team Sports</label>
<input type = "checkbox" id = "x_tea" name='ch44' <?php echo $chk_44 ?> >
<label for = "x_gol">Golf</label>
<input type = "checkbox" id = "x_gol" name='ch45' <?php echo $chk_45 ?> >
<div>Home & Garden</div>
<label for = "x_kit">Kitchen & Dining</label>
<input type = "checkbox" id = "x_kit" name='ch46' <?php echo $chk_46 ?> >
<label for = "x_art">Arts, Crafts & Hobbies</label>
<input type = "checkbox" id = "x_art" name='ch47' <?php echo $chk_47 ?> >
<label for = "x_pet">Pet Supplies</label>
<input type = "checkbox" id = "x_pet" name='ch48' <?php echo $chk_48 ?> >
<label for = "x_pat">Patio, Lawn & Garden</label>
<input type = "checkbox" id = "x_pat" name='ch49' <?php echo $chk_49 ?> >
<label for = "x_hom">Home Improvement</label>
<input type = "checkbox" id = "x_hon" name='ch50' <?php echo $chk_50 ?> >
<label for = "x_pwr">Power & Hand Tools</label>
<input type = "checkbox" id = "x_pwr" name='ch51' <?php echo $chk_51 ?> >
</div>
<div class="column">
<div>Bussiness</div>
<label for = "x_mkt">Make Money Online</label>
<input type = "checkbox" id = "x_mkt" name='ch57' <?php echo $chk_57 ?> >
<label for = "x_trf">Getting Traffic</label>
<input type = "checkbox" id = "x_trf" name='ch58' <?php echo $chk_58 ?> >
<label for = "x_off">Mobile Websites & Mkg</label>
<input type = "checkbox" id = "x_off" name='ch59' <?php echo $chk_59 ?> >
<label for = "x_biz">Bussiness Opportunities</label>
<input type = "checkbox" id = "x_biz" name='ch60' <?php echo $chk_60 ?> >
<label for = "x_bbd">Bussiness Building</label>
<input type = "checkbox" id = "x_bbd" name='ch61' <?php echo $chk_61 ?> >
<label for = "x_off">Office & School Supplies</label>
<input type = "checkbox" id = "x_off" name='ch62' <?php echo $chk_62 ?> >
<div>Education</div>
<label for = "x_lan">Languages</label>
<input type = "checkbox" id = "x_lan" name='ch63' <?php echo $chk_63 ?> >
<label for = "x_par">Parenting & Families</label>
<input type = "checkbox" id = "x_par" name='ch64' <?php echo $chk_64 ?> >
<label for = "x_rel">Relationships</label>
<input type = "checkbox" id = "x_rel" name='ch65' <?php echo $chk_65 ?> >
<label for = "x_sel">Self Help & Growth</label>
<input type = "checkbox" id = "x_sel" name='ch66' <?php echo $chk_66 ?> >
<div>Special Events</div>
<label for = "x_hby">Home Buying</label>
<input type = "checkbox" id = "x_hby" name='ch67' <?php echo $chk_67 ?> >
<label for = "x_eng">Engagement & Weddings</label>
<input type = "checkbox" id = "x_eng" name='ch68' <?php echo $chk_68 ?> >
<label for = "x_bab">Baby Shower</label>
<input type = "checkbox" id = "x_bab" name='ch69' <?php echo $chk_69 ?> >
<label for = "x_gpy">Garden Parties</label>
<input type = "checkbox" id = "x_gpy" name='ch70' <?php echo $chk_70 ?> >
<label for = "x_cpy">Children Parties</label>
<input type = "checkbox" id = "x_cpy" name='ch71' <?php echo $chk_71 ?> >
<label for = "x_hol">Travel & Holiday </label>
<input type = "checkbox" id = "x_hol" name='ch72' <?php echo $chk_72 ?> >
<label for = "x_trv">Travel Accessories</label>
<input type = "checkbox" id = "x_trv" name='ch73' <?php echo $chk_73 ?> >
</div>
</fieldset>
<div style="float:left;margin:10px 0 10px 400px;">
<input style='font-size:20px;margin:10px;padding:10px;' type='submit' value='Update Profile Now'>
</div>
</form>
AND my CSS
.column {
display:block;
float:left;
width:220px;
overflow:hidden;
margin:10px 10px;
}
.column div{
display:block;
font-size:20px;
color:maroon;
font-weight: bold;
margin:20px 0px 0px 0px;
}
.column span{
font-size:14px;
color:black;
font-weight: normal;
}
fieldset{
display:block;
float:left;
clear:left;
margin:20px 0px;
}
fieldset label{
display:block;
float:left;
width:200px;
margin:0px 0px;
font-size:16px;
color:darkblue;
font-weight: bold;
}
fieldset input{
display:block;
float:left;
width:10px;
margin:2px 5px;
font-size:20px;
-ms-transform: scale(4); /* IE */
-moz-transform: scale(4); /* FF */
-webkit-transform: scale(4); /* Safari and Chrome */
-o-transform: scale(4); /* Opera */
padding: 10px;
}
I you want to see the actual page …
The page can only be seen after logging in
but you can do so without any email address by using
this test account.
The site needs a login to see that page because that is the
account preferences page.
This is the link to the page Test Link
Enter the following:
Client id: test
Access: test
Just hit the “Click her to login” and you go straight to the problem page.
Scroll down to see the table.
Thanks
