...

View Full Version : IE7 issue :: on deadline! ::



webgirrrl1
11-19-2010, 10:07 PM
:confused:

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 or code below: http://www.dvdgalleria.com/form/on_site.html

Any help to untangle IE7 most of all would be appreciated. It might help IE6 issues...

Thanks in advance! :confused:




<!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> &ndash; Our network consists of only fully licensed and insured movers.</div>
<div class="quality"><strong>Quality</strong> &ndash; All our moving companies must pass our strict 28-point inspection process to insure quality service.</div>
<div class="security"><strong>Security</strong> &ndash; 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>

coothead
11-20-2010, 05:54 PM
Hi there webgirrrl1,

you can find a possible solution to your problem here...
http://www.webdeveloper.com/forum/showpost.php?p=1124813&postcount=5
coothead

webgirrrl1
11-20-2010, 08:27 PM
Coothead, THANK YOU THANK YOU!! You're a life saver! :cool: It almost seems miraculous given how messed up it was in IE7. I will have to study all of it in detail. I noticed you made the javascript more compact. And the CSS...
Thanks again! :) :thumbsup:

webgirrrl1
11-21-2010, 04:04 AM
Coothead, THANK YOU THANK YOU!! You're a life saver! It almost seems miraculous given how messed up it was in IE7. I will have to study all of it in detail. I noticed you made the javascript more compact. And the CSS...
Thanks again!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum