My webpage has a white footer set at 30px in height. However, when I scroll down the page, the footer expands and overlaps with the text part (a div with a light grey background). Can you help me figure out what's causing this issue and how to fix it? Check out the Jsfiddle here: http://jsfiddle.net/Grek/AdX3m/ Thank you!
Here is a screenshot:
CSS:
@charset"UTF-8";
/* CSS Document */
body:before {
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
z-index: 100;
}
Html, body {
padding: 0;
margin: 0;
height: 100%;
font-family: 'Open Sans', sans-serif;
}
#header {
width: 100%;
height: 60px;
border-bottom: 1px dotted #CCC;
background: #F2F2F2;
}
#logo {
position: absolute;
left: 20px;
top: 35px;
color: #000;
font-size: 20px;
}
#header-text {
width: 400px;
position: absolute;
top: 70px;
left: 20px;
font-size: 12px;
font-weight:300;
color: #FFF;
}
... (remaining CSS code) ...
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">
... (remaining HTML code) ...