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%} Code (markup): 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> Code (markup): 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....
Well... first you might want to try VALID markup. You might even want to try using the proper tags inside your form - like LABEL. Another good idea would be to take a giant axe to that prototype and jquery ****otry - Nothing like turning a 4k form into a 100k download... oh and that using javascript for hover states? STOP using .js to try and do CSS' job. From what I'm seeing for code though, you're 100% min-height methodology is flawed since it should be adding 100% height AFTER the content instead of AROUND the content. That 'wrapper' should be around everything but the footer. (at which point you'd also not need that height:auto bull) put the min-height wrapper around EVERYTHING EXCEPT the footer, then for CSS: #wrapper { overflow:hidden; /* wrap floats, just in case */ min-height:100%; } Code (markup): * html #wrapper { /* IE has no min-height, but will incorrectly treat height as such if overflow is visible. Thankfully height trips haslayout in IE which wraps floats anyways */ overflow:visible; height:100%; }[/code] Then move the PUSH div right before you close #wrapper... it and #footer should get: #push { height:3em; /* make identical to height of #footer */ padding-top:1em; /* any padding you want between the content and the footer */ } #footer { position:relative; height:3em; margin-top:-3em; } Code (markup): But really you've got bigger problems in there than min-height.