My sticky footer now floats in the middle of the page after i declared a doc type. Any suggestions for a quick fix?
doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
HTML Code:
<body>
<div id="wrap">
<div id="header"></div>
<div id="logoimg"></div>
<div id="logotext"></div>
<div id="searchbox">
<img src="" align="absmiddle" vspace="2px"/>
<label for="searchfield">search: area, position, area+position</label><br>
<input type="text" name="searchfield" value=""
id="searchfield"/> <div id="geist"></div>
</div>
<div id="main"></div>
</div>
<div id="footer"></div>
Code:
body {
background-color: #99ccff;
background-image: url(http://);
background-repeat: repeat-x;
overflow: auto;
margin: 0;
padding: 0;
height: 100%;
}
#wrap{
min-height: 100%;
margin-top: -151px;
}
#footer {
margin: auto;
width: 100%;
height: 100px; /* Height of the footer */
background: #3e4041;
border-top: 1px solid #e0e0e0;
clear: both;
margin-top: 50px;
}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
margin-bottom: 51px;
}
h1, h2, p {
padding:0 10px;
}
#outer:after {/* thank you Erik J - instead of using display table for ie8*/
clear:both;
display:block;
height:1%;
content:" ";
}
|
