Thanks to all of you who helped with the previous problems I was having with this form. I need to figure out is why is the submit ("continue") button moving when "auto" is selected (under "Select Your Move Type") and how to fix it. See: http://www.dvdgalleria.com/form/TEST_DIVsCENTERED.html It doesn't look like a CSS problem as far as I can tell. Any pointers would be so appreciated! I have to finish it by tonight! Thanks in advance. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> /* zero out margins */ * { margin:0; padding:0 } /* mac hide \*/ html, body { height:100%; width:100%; } /* end hide */ body { text-align:center; min-height:300px;/* for ie7*/ font-family:Arial, Helvetica, sans-serif; font-size:.85em; } #xouter { height:100%; width:100%; display:table; vertical-align:middle; } #xcontainer { text-align: center; position:relative; vertical-align:middle; display:table-cell; height: 300px; } #xinner { width: 453px; background:#fff; height: 300px; text-align: left; margin-left:auto; margin-right:auto; background: url(web_developer_test_blank.jpg) no-repeat center; } /* not required for demo */ p, h1 { margin-bottom:1em } #header { margin-right:0 } .maintxt { text-align:left; margin:1em; } .formItem { float:left; height: 37px; } .em1 { font-size:1em; } .em95 { font-size:.95em; } .em9 { font-size:.9em; } .em85 { font-size:.85em; } .em8 { font-size:.8em; } .em75 { font-size:.75em; } .select { font-style:italic; } .start_quotes { font-style:italic; font-weight:bold; color:#6a8da9; font-size:1.35em; text-align: left; margin-left: 25px; margin-top: 15px; float:left; position:relative; width:100%; } #the_difference_box { float:right; width:165px; text-align: left; border: 1px solid #d5e2ea; margin-top: -55px; line-height: 1.1em; font-family: Arial, Helvetica, sans-serif; color:#383838; background-color: #fff; padding: 8px 10px 15px 12px; margin-right: 15px; height: 212px; } .the_difference { font-size:1em; font-weight:bold; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#666; margin-top:2px; } .safety, .quality, .security, .privacy, zipcode_finder { margin-bottom:8px; font-size: .8em; } .safety { margin-top:5px; } .security { margin-bottom:3px; } .which_is_right, .zipcode_finder { font-size: 0.75em; float: right; margin-left: -10px; } .which_is_right, .privacy { color:#2b5774; text-decoration:underline; margin: 0; } a:link, a:visited, a:active { color:#2b5774; } #wrapper_form { width:453px; float: left; } #main_form { width:220px; float:left; padding-left: 25px; height: 238px; padding-top: 8px; margin-top: -66px; } input { color: #999; background: #fff; border: 1px solid #06c; border-color: #06C; font-style: italic; height:20px; } .approximate { color: #777; font-size: 0.85em; } .submit input { color: #000; background: #ffa20f; border: 2px outset #d7b9c9 } select { color: #999; border: 1px solid #666699; } label { color:#444; font-size:.85em; font-family:Arial, Helvetica, sans-serif; font-weight:bold; } .continue_button { float:left; position:relative; } #arrow { position:relative; top:-17px; /* -18 for gecko */ left:-27px; width: 28px; height: 66px; } #move_type { width:100px; } #move_type_id { width:220px; } #year, #make, #model { width:70px; } #residence_Type { width:100px; } </style> <!--[if lt IE 8]> <style type="text/css"> #xouter{display:block} #xcontainer{top:50%;display:block} #xinner{top:-50%;position:relative} </style> <![endif]--> <!--[if IE 7]> <style type="text/css"> #xouter{ position:relative; overflow:hidden; } </style> <![endif]--> <script type="text/javascript"> function hide(obj) { obj1 = document.getElementById(obj); obj1.style.visibility = 'hidden'; } function show(obj) { obj1 = document.getElementById(obj); obj1.style.visibility = 'visible'; } function show_auto(optionValue) { if(optionValue=='auto'){ show('vehicle'); document.getElementById('residence_type').style.display='none'; document.getElementById('num_rooms').style.display='none'; } else{ hide('vehicle'); document.getElementById('residence_type').style.display=''; document.getElementById('num_rooms').style.display=''; } } </script> </head> <body onload=hide('vehicle');> <div id="xouter"> <div id="xcontainer"> <div id="xinner"> <div class="start_quotes">Start getting your free moving quotes</div> <div id="wrapper_form"> <div id="arrow"><img src="arrow.gif" alt="" /></div> <form action="#" id="main_form"> <div id="move_type_id" class="formItem"> <label for="move_type">Select Your Move Type<br /> <select id="move_type" name="move_type" onchange="show_auto(this.value)"> <option value="">Select</option> <option value="full">Full</option> <option value="self">Self</option> <option value="auto">Auto</option> </select> </label> <div class="which_is_right"><a href="#">Which is right for me?</a></div> </div> <div class="formItem" style="clear:left;"> <label for="moving_from" id="moving_from">Move Date <span class="approximate">(approximate)</span><br /> <input type="text" name="move_date_month" size="12" maxlength="10" value="Month" style="display:inline-block;float:left; margin-right:6px;" /> <input type="text" name="move_date_day" size="3" maxlength="2" value="Day" /> </label> </div> <div class="formItem" style="clear:left;"> <label for="moving_from" class="moving_from">Moving From<br /> <input type="text" name="Moving_From" size="12" maxlength="5" value="Zipcode" style="display:inline-block;float:left;"/> </label> </div> <div class="formItem" style="margin-left:6px;"> <label for="moving_to" class="moving_to">Moving to<br /> <input type="text" name="Moving_To" size="12" maxlength="5" value="Zipcode" /> </label> </div> <div style="width:150px; margin-left:10px; padding-top:5px;"> <div class="zipcode_finder" style="float:left; height:14px; padding-top:2px;"><a href="">Zipcode Finder</a></div><div class="zipcode_finder" style="float:left; height:14px; padding-top:2px; margin-left:19px;"><a href="">Zipcode Finder</a></div> </div> <div style="clear:both;"></div> <div id="residence_type" class="formItem"> <label for="residence_type">Residence type<br /> <select name="residence_type" id="residence_Type" /> <option value="select" selected="selected" class="select">Select</option> <option>Apartment</option> <option value="year">Condo</option> <option value="year">Single Family</option> </select> </label> </div> <div id="num_rooms" class="formItem" style="margin-left:6px;"> <label for="num_rooms"># of Rooms<br /> <select name="num_rooms" id="num_rooms_sel" /> <option value="Select" selected="selected" class="select">Select</option> <option value="one">1</option> <option value="two">2</option> <option value="three">3</option> </select> </label> </div> <div id="vehicle" class="formItem" style="height:40px;"> <label for="vehicle"> Vehicle<br /> <select name="year" id="year" /> <option>Year</option> <option value="year">year</option> </select> <select name="make" id="make" /> <option>Make</option> <option value="make">make</option> </select> <select name="model" id="model" /> <option>Model</option> <option value="model">model</option> </select> </label> </div> <div class="continue_button"> <a href="javascript:document.myform.submit()" onmouseover="document.myform.sub_but.src='Fireworks_image/btn_continue_s1.gif'" onmouseout="document.myform.sub_but.src='Fireworks_image/btn_continue_s1.gif'" onclick="return val_form_this_page()"> <img src="btn_continue_s1.gif" border="0" alt="Submit this form" name="sub_but" align="left" /> </a> </div> </form> <div id="the_difference_box"> <div class="the_difference">The Difference</div> <div class="safety"><strong>Safety</strong> – Our network consists of only fully licensed and insured movers.</div> <div class="quality"><strong>Quality</strong> – All our moving companies must pass our strict 28-point inspection process to insure quality service.</div> <div class="security"><strong>Security</strong> – GigaMoves does not permit moving companies to broker or sell customer information.</div> <div class="privacy"><a href="#">Privacy Policy</a></div> </div> <!-- end wrapper_form --> </div> </div> </div> </body> </html> Code (markup):
it's because you change the 'visibility' property. when that is set to hidden, the element is not being displayed yet the space that it occupies is preserved as if it were being shown. hence, when you set the visibility of items futrher up to hidden, the element you unhide for auto does not move up to occupy their space but is just revealed instead. you really ought to look at setting display only and removing visibility references (seem to be doing a mixture of both atm)