IE7 issues

**webgirrrl1** · 11-19-2010, 09:08 PM

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!

Code:

<!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>

**Beverleyh** · 11-20-2010, 08:18 AM

Not exactly sure what your asking. If you want help with IE stylesheets, try here: css-tricks.com/how-to-create-an-ie-only-stylesheet/

**coothead** · 11-21-2010, 11:03 AM

A possible solution to this problem has been posted here...

http://www.webdeveloper.com/forum/sh...13&postcount=5

coothead

Thread: IE7 issues

Thread Tools

Search Thread

IE7 issues

Bookmarks

Bookmarks

Posting Permissions