My page is working fine in everything else except IE7 (and some in IE6). I have some hacks at the bottom of the CSS. You can view it here below; Any help to untangle IE7 most of all would be appreciated. It might help IE6 issues... Thanks in advance! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>on_rent_com_site_2</title> <style type="text/css"> * { margin:0; padding:0; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; } #inner_wrapper { background:url(web_developer_test_blank.jpg) no-repeat; height:100%; width:60%; padding:0 0 0 15px; overflow:auto; min-height: 303px; height: auto; } #inner_wrapper /* div#moving_form_header {margin:0 0 0 -7; position:relative; display:inline-block; } */ div.form_row { clear:both; height:15px; } div.form_row div { float:left; padding:0px 6px 0px 0px; margin:0px; font-size:.8em; } div.form_row div.zip { padding:0px 14px 0px 0px; } .submit_button { margin:14px 0px 0px 0px; } #residence { width:40px; } #rooms { 50px; } div#form_wrapper { width:200px; padding:7px 0 0 0; float:left; margin:0 0 0 40px; display:inline; } div#form_wrapper p { padding:5px 0px 2px 0px; margin:0px; clear:both; font-size: 0.9em; } div#form_wrapper #submit_btn { margin:0; padding:0; clear:both; } div#form_wrapper #submit_btn input { margin: 25px 0 0 -5px; position:relative; } div#form_wrapper p.move_type { padding-top:0px; font-size: .8em; } #move_type_field { width:90px; } div#form_wrapper a { color:#6a8da9; font-size:10px; display:block; line-height:12px; padding:2px 0 0 0; } .moveform_auto, #residence_type { display:block; } .moveform_auto { padding:4px 0 0 0; margin:0; } .moveform_auto input { margin:2px 0 2px 0; padding:0; } #residence_row, #vehicle_row { padding-top:0px; display:inline-block; } #checklist { float:left; height:280px; width:165px; padding:0px 0 0 63px; margin:-3px 0px 0px 0px; color:#999999; background-image:url(difference_box.jpg) no-repeat; font-size:0.9em; } #the_difference_box { float:right; width:165px; text-align: left; border: 1px solid #d5e2ea; margin-top: 10px; line-height: .95em; 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; } .start_quotes { font-style:italic; font-weight:bold; color:#6a8da9; font-size:1.1em; text-align: left; margin-top:15px; margin-left:35px; font-style:italic; } move_date {font-size:.8em;} .which_is_right {display:inline-block; float:right;} .em8 {font-size:.8em} #month {width:80px;} #day {width:30px;} .approximate{font-size:.8em; color:#777;} #zip_from, #zip_to { width:70px; } #num_rooms {margin-left:6px; float:left; display:inline-block;} #num_room_field { width:70px;} </style> <!--[if IE 8]> <style type="text/css"> #checklist{ padding:0px 0 0 55px; margin:-3px 0px 0px 0px;} </style> <![endif]--> <!--[if IE 7]> <style type="text/css"> #checklist{ padding:0px 0 0 25px; margin:-3px 0px 0px 0px;} </style> <![endif]--> <!--[if IE 6]> <style type="text/css"> #checklist{ padding:0px 0 0 25px; margin:-5px 0px 0px 0px; } </style> <![endif]--> <script type="text/javascript"> function hide(obj) { obj1 = document.getElementById(obj); obj1.style.display = 'none'; } function show(obj) { obj1 = document.getElementById(obj); obj1.style.display = 'block'; } function show_auto(optionValue) { if(optionValue == 'auto') { document.getElementById('vehicle').style.display = ''; document.getElementById('residence_type').style.display = 'none'; document.getElementById('num_rooms').style.display = 'none'; } else { document.getElementById('vehicle').style.display = 'none'; document.getElementById('residence_type').style.display=''; document.getElementById('num_rooms').style.display=''; } } </script> </head> <body onload="hide('vehicle');"> <div id="inner_wrapper"> <div class="start_quotes">Start getting your free moving quotes</div> <div id="form_wrapper"> <div class="form_row"> <p class="move_type"> <label for="moving-move_type">Select Your Move Type</label> </p> <p class="which_is_right"><a href="#" >Which is right for me?</a></p> <select name="moving-move_type" id="move_type_field" onchange="show_auto(this.value)"> <option>Select</option> <option value="full" class='list'>Full</option> <option value="self" class='list'>Self</option> <option value="auto" class='list'>Auto</option> </select> </div> <p> <label for="move_date" class="move_date em8">Move Date</label> <span class="approximate">(approximate)</span> </p> <div class="form_row"> <div id="move_date"> <input name="move_month" id="month" value="" /> <input name="move_day" id="day" value="" /> </div> </div> <div class="form_row"> <div class="zip"> <p> <label for="moving-from_zip">Moving From</label> </p> <input value="" name="moving-from_zip" type="text" id="zip_from" /> <a href="#">ZIP Code Finder</a> </div> <div> <p> <label for="moving-to_zip">Moving To</label> </p> <input value="" name="moving-to_zip" type="text" id="zip_to" /> <a href="#">ZIP Code Finder</a> </div> </div> <div style="clear:both; height:7px;"></div> <div class="form_row" id="residence_row"> <div id="residence_type"> <label for="residence_type">Residence type<br /> <select name="residence_type" id="residence_Type"> <option value="select" class="select">Select</option> <option>Apartment</option> <option value="condo">Condo</option> <option value="single_family">Single Family</option> </select> </label> </div> <div id="num_rooms"> <label for="num_rooms"># of Rooms<br /> <select name="num_rooms" id="num_room_field"> <option value="Select" class="select">Select</option> <option value="one">1</option> <option value="two">2</option> <option value="three">3</option> </select> </label> </div> </div> <div class="form_row" id="vehicle_row"> <div id="vehicle"> <label for="vehicle">Vehicle<br /> <select name="year" id="year" style="width:55px;"> <option>Year</option> <option value="year">year</option> </select> <select name="make" id="make" style="width:60px;"> <option>Make</option> <option value="make">make</option> </select> <select name="model" id="model" style="width:63px;"> <option>Model</option> <option value="model">model</option> </select> </label> </div> </div> <div id="submit_btn"> <input name="submit" value="move" type="image" src="btn_continue_s1.gif" width="135" height="34" alt="Continue" id="btn_continue_car" style="margin-bottom:5px;" /> </div> <!--<div class="spacer"><img src="http://media.rent.com/img/trans.gif" width="1" height="1" alt="" /></div> --> </div> <div id="checklist"> <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> </div><!-- end form_wrapper --> </div><!-- end inner_wrapper --> </body> </html> Code (markup):
instead of making all of those id's ==> why didn't you simply use => input[name=NAME]{ } What's the domain name so I can get the images?..... All of your issues are about position / padding / margin
Thanks for looking at it. It's at dvdgalleria.com/form/on_site.html For some reason, this forum wouldn't let me type in a URL.
I kind of want to stay with my own (i know it's clumsy) javascript there, mainly because I understand it. I'm just not getting why IE7 is having issue.
When I'm done you'll be able to compare the 2 and you'll see what the error is!! This way, ON YOUR OWN, you can make the fix in the appropriate area and way so that you will know for now and the future!! It's not your JS it's your CSS... Which is what I meant about using ==> input[name=NAME]{ } For styling so you could limit the amount of html / css you are using for that little form area.. Putting the k.i.s.s. theory into play..
background-image:url(difference_box.jpg) no-repeat; Code (markup): Wrong usage of background-image property. Must be background-image:url(difference_box.jpg); background-repeat: no-repeat; Code (markup): or background:url(difference_box.jpg) no-repeat; Code (markup): <div id="submit_btn"> <input name="submit" value="move" type="image" src="btn_continue_s1.gif" width="135" height="34" alt="Continue" id="btn_continue_car" style="margin-bottom:5px;" /> </div> Code (markup): Hm, why not styling the div submit_btn itself instead of the button? What should happen when clicking continue? At the moment nothing happens because you use type="image" instead of type="submit"... Remove height:15px; from div.form_section { clear:both; height:15px; } Code (markup): and it should work OK in IE7 (tested with Developer tools in IE7)