SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form columns "jumping" !!

    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:
    form01.jpg

    This is my HTML:

    Code:
    <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

    Code:
    .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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    The form elements are partially hidden on page load, but they want to be visible when active. Looks like you need to clean this up a bit anyway, as it all looks too crowded and the checkboxes too large*. Anyhow, if you remove overflow: hidden from here, it will stop happening (line 99 f.):

    Code:
    .column {
    display: block;
    float: left;
    width: 220px;
    overflow: hidden;
    margin: 10px 10px;
    }
    * This is what I see in Chrome for Mac:

    buttons.png

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Firefox looks completely different also.

    Why are you scaling those checkboxes. They look awful?

    Code:
    fieldset input {
        display: block;
        float: right;
        font-size: 20px;
        margin: 2px 5px;
        padding: 10px;
        transform: scale(4);
        width: 10px;
    }
    Remove the transform rule.

    It also looks like the inputs should be floated right (as shown above) and the label width reduced to about 190px as shown below.
    Code:
    fieldset label {
        color: darkblue;
        display: block;
        float: left;
        font-size: 16px;
        font-weight: bold;
        margin: 0;
        width: 193px;
    }

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks VERY much to both of you.

    Hope it looks better now


    .

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Yep, definitely looks better now.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •