Footer doesn't goes all the way down in IE7

co.ador · November 4, 2009

The CSS

.
* {margin:0;}
html { height: 100%; width: 100%; margin:0; padding:0;}
body  {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: justify;
background-color:#FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;

}

.abajo {background-image:url(../images/fieldsetfront2.gif); 
margin:10em 0 10em 190px;;  
padding:0;  
width: 820px; 
height:357px; 

left:200px; }

.segundo1{  
float:left;
width:400px; 
height:240px; 
border-color:#FFFFFF;
margin:1em 2em 0 2em;}

.abajo .primero{
margin:0;  
padding: 0;
float:left;
width:99.8%;
height:99.7%
}
.abajo .fieldset{
margin:0;  
padding: 0;
float:left;}

.abajo fieldset legend {  
margin:0; 
color: #000000;  
font-weight:500;
  
}  
.abajo fieldset ol {  
padding: 1em 0.5em 0 0.5em;  
list-style: none;
width:340px; 

} 
.abajo fieldset li {  
padding-bottom: 1em;  
}
.abajo fieldset label {
text-align:right;
float: left;    
width: 10em;    
margin-right: 1em;    
text-align: right; } 
.abajo fieldset label select { vertical-align:middle;}

.tercero { margin-top:1em;  width:200px; height:240px; }
.abajo .primero .tercero ol{  
padding: 0.8em 1em 0 2em;  
list-style: none;
width:100px; ; 
border-color:#FFFFFF;
}



.wrapper {
     min-height: 100%;
 height: auto !important;
     height: 100%;
     margin: 0 auto -4em;
}
.footer, .push {
     height: 2em;
}
* html .wrapper{height:100%}

HTML

<!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" />
<link type="text/css" href="../stylesheets/webpageprueba.css" rel="stylesheet" media="all" />
<title>www.finefood.com</title>
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/rating.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
(
function()
{
  var default_image = $('td.largethumb img').attr('src');
  $('table.smallthumbs a').mouseover(function() { $('td.largethumb img').attr('src', $('img', this).attr('src')); });
});
</script>
</head>

<body>



<div id="sidebar1">
<ul id="mainNav">
      <!--<li id="Vegeterian"><a href="../Vegeterians/index.php" title=" class="first">Home</a></li>
                <li id="takeouts"><li><a href="../../Take Outs/Take Outs frontpage.html" title="">Contact us</a></li>
              <li id="Supermarkets"><a href="../../Supermarkets/Supermarkets frontpage.html" title="">Supermarkets</a></li>
                 <li id="fishmarkets"><a href="../../Fish Markets/Fish Market frontpage.html" title="">Fish Markets</a></li>-->
  </ul>
<!-- end #sidebar1 --></div>
<!--<table id="coloseview">

<a href=""><td width="40" id="contenido1">tropiezo></td></a>
<a href=""><td width="40" id="contenido2">colozar1></td></a>
<a href=""><td width="40" id="contenido3">colozar2></td></a>
<a href=""><td width="40" id="contenido4">colozar3></td></a> 
<a href=""><td width="40" id="contenido4">colozar4></td></a>
<a href=""><td width="40" id="contenido4">colozar3</td></a>
</table>-->


<form class="abajo" action=""> 
<fieldset class="primero">

<legend class="primerosub">Search For a store</legend> 
<fieldset class="segundo1" style="border-color:#FFFFFF" >  
<legend>Location Details</legend>  
<ol>  
<li>  
<label for="name">Name:</label>  
<input name="name" type="text" class="text" id="name" size="20" />  
</li>  
<li>  
<label for="email">Zip Code:</label>  
<input id="email" name="email" class="text" type="text" />  
</li>  
<li>  

<label for="state">State:</label>  
<input id="state" name="state" class="text" type="text" /> 
</li> 
<li><label for="state">Type of food:</label> 
  <select name="food-type" style="width:155px;" >
   <option value="spanish">Spanish Food</option>
      <option>Vegetarian Food</option>
      <option>Culinary Food</option>
      <option>Low fat Food</option>
  </select></li> 
</ol>
</fieldset>

<fieldset class="tercero" style="border-color:#FFFFFF" >
<legend>Services</legend> 
<ol>
<li>
  <input type="checkbox" name="example" value="delivery" />Delivery<br />
  <input type="checkbox" name="example" value="eat-in" />Eat-in<br />

  <input type="checkbox" name="example" value="wifi" />Wi-Fi<br />
  <input type="checkbox" name="example" value="buffet" />Buffet<br />
  <input type="checkbox" name="example" value="tv" />Tv<br />
  <input type="checkbox" name="example" value="parking" />Parking<br />
  <input type="checkbox" name="example" value="catering" />Catering<br />
  <input type="checkbox" name="example" value="take-out" />Take Out

</li></ol>
</fieldset> 
</fieldset>
</form>
       
<div class="wrapper">
             <p><a href="../stores/index.php" >  www.finefood.com </a></p>
             <div class="push"></div>
         </div>
         <div class="footer">
           <p>Copyright (c) 2009</p>
</div>
       
</body>
</html>

There is an problem in Internet explorer 7 there is like a 40em space after the footer.. It seems like there is a marging added in there but I don't know where is coming from.

I have improved the code to the best of my abilities to the point where is display ok in safari, mozzila. But then internet explorer is adding some margin that I don't know how to hack it...

I trying clearing the class "abajo" of the Form and it worked some it pushed the footer down and now instead of having 40em of margin space between the footer and the end of the screen now the space is reduced to 2 to 3em space but still it doesn't look right having a 2-3em space in there....

haku · November 5, 2009

Have you validated your code on W3C? Often these things are either caused by errors, or absolute positioning, but I don't see you using any absolute positioning.

Dorky · November 5, 2009

ie ads margins to elements that other browsers do not. the fix for this is to either remove the unwanted margin from that element or use

* { margin: 0px; }

at the top of you css but this will effect your entire site. if you cant find the element with the unwanted margin, add a

border-style: solid;

to all elements of interest until you identify then remove them when your done.

Sign In

Footer doesn't goes all the way down in IE7

Recommended Posts

co.ador

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

Dorky

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information