Results 1 to 3 of 3

Thread: IE7 issues

  1. #1
    Join Date
    Nov 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question IE7 issues



    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>

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,968
    Thanks
    16
    Thanked 306 Times in 305 Posts
    Blog Entries
    11

    Default

    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/
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    689
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

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

    coothead

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
  •