Hi,
I have a problem with one of my sites. The footer is showing up in the middle of the pages, on all my pages…
It should show up at the bottom ofcourse…
for example check here, the footer is in the middle of the page… now I think something is wrong with the CSS or maybe html code…
Can someone please help me?? I am breaking my head on this.
Thanks in advance,
Probably something simple like a missing closing div tag.
Run it through a W3C test http://validator.w3.org/ and that should find missing tags.
Or use a text editor like PSPad and past the source into html mode then click on each div and if there is not partner to close it will show red.
Lookis like <div id=“page”> is not closed. Could be an issue
adding index.php and the css
The index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lukas Podolski, Lukas Podolski Profile, Lukas Podolski Photos, Lukas Podolski Videos - LukasPodolski.info</title>
<META NAME="description" CONTENT="Lukas Podolski, Lukas Podolski, Lukas Podolski Profile, Lukas Podolski Biography, Lukas Podolski Photos, Lukas Podolski Videos, Lukas Podolski Wallpapers">
<META NAME="keywords" CONTENT="Lukas Podolski, Lukas Podolski Profile, Lukas Podolski Biography, Lukas Podolski Photos, Lukas Podolski Videos, Lukas Podolski Wallpapers">
<meta name="google-site-verification" content="5SRoFrmgQEfPXWo-CENWqZ7SAo2T3Tm32KyGlRH0Kq8" />
<META NAME="robot" CONTENT="index,follow">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<style type="text/css">
<!--
.style1 {color: #173D7F}
.style3 {color: #173D7F; font-weight: bold; }
-->
</style>
</head>
<body>
<div id="page">
<div id="wrap">
<div id="header">
<h1> </h1>
</div>
<div id="navigation">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="lukas-podolski-profile.php">Profile</a></li>
<li><a href="lukas-podolski-biography.php">Biography</a></li>
<li><a href="lukas-podolski-photos.php">Photos</a></li>
<li><a href="lukas-podolski-videos.php">Videos</a></li>
<li><a href="lukas-podolski-wallpapers.php">Wallpapers</a></li>
<li><a href="lukas-podolski-links.php">Links</a></li>
</ul>
</div>
<div id="introduction">
<p> </p>
<p align="center"><?php include("top.php"); ?></p>
</div>
<div id="content">
<div id="right1">
<h2>Welcome to Lukas Podolski </h2>
<p align="left">Welcome to the number 1 unnofficial <a href="http://www.lukaspodolski.info"><strong>Lukas Podolski</strong></a> fansite, your online resource for everything regarding Lukas Podolski.</p>
<p align="left"> </p>
<p align="left"><?php include("content.php"); ?></p>
<h2 class="style1">Welcome to Lukas Podolski </h2>
<p><a href="lukas-podolski-profile.php"><strong>Lukas Podolski <span class="style1">Profile</span></strong></a> - Check out Lukas Podolski's profile with up to date personal information and stats. </p>
<p> </p>
<p><span class="style3"><a href="lukas-podolski-biography.php">Lukas Podolski Biography</a></span> - Check out Lukas Podolski's biography from the roots to the present time. </p>
<p> </p>
<p><span class="style3"><a href="lukas-podolski-photos.php">Lukas Podolski Photos</a></span> - Check out the constantly updating photos gallery.</p>
<p> </p>
<p><span class="style3"><a href="lukas-podolski-videos.php">Lukas Podolski Videos</a></span> - Check out the cool varied videos, these include anything from goals to interviews </p>
<p> </p>
<p><span class="style3"><a href="lukas-podolski-wallpapers.php">Lukas Podolski Wallpapers</a></span> - A nice selection of Lukas Podolski wallpapers can be found here. </p>
<p> </p>
<p><span class="style3"><a href="lukas-podolski-links.php">Lukas Podolski Links</a></span> - Links to other sites. <br />
</p>
</div>
<div id="left1">
<div align="center"><br>
<?php include("links.php"); ?>
</div>
<div style="clear:both;"> </div>
</div>
<br>
</div>
<div id="footer">
<div align="center">
<br>
<a href=http://www.lgthemes.net>LG Coookie Themes</a> |
<a href=http://www.playerdb.net>Footbal Player Database</a>
</div>
</div>
</div>
</body>
</html>
The style.CSS
* {
padding: 0;
margin: 0;
}
body {
background: #CECFCE url(images/bg.jpg) top center repeat-y;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 12px;
padding: 0;
margin: 0;
color: #555;
}
img {border: none;}
a {
text-decoration: none;
color: #173D7F;
}
a:hover {
color: #333;
}
h3 { color: #808080; font-size: 12px; border-bottom: 1px solid #eee; margin: 10px 0 10px 0; }
ol { padding-left: 20px; }
#wrap {
border-top: 22px solid #333;
margin: 0 auto;
width: 700px;
padding: 10px 10px 0 10px;
}
#header {
margin: 0 auto;
height: 100px;
background :#111 url(images/header.jpg) no-repeat;
}
#header h1 { padding: 25px 0 0 225px; font-size: 23px; font-weight: 100; letter-spacing: -1px; }
#header h1 a { color: #f7f7f7; }
#header h1 a:hover { color: #aaa; }
#header h2 { padding: 0 0 0 225px; font-size: 15px; color: #eee; font-weight: 100; }
#navigation {
background: #000 url(images/menu.gif) repeat-x;
height: 30px;
line-height: 30px;
margin: 10px auto 0 auto;
}
#navigation li {
float:left;
list-style-type:none;
border-right:1px solid #444;
}
#navigation li a {
display:block;
padding:0 20px;
text-decoration:none;
color: #fff;
letter-spacing:1px;
}
#navigation li a:hover {
background: #222 url(images/menuover.gif) repeat-x;
color:#fff;
text-decoration:none;
}
#introduction {
background: #ddd;
padding: 10px;
border-bottom: 4px solid #666;
margin: 0 auto;
}
#content {
margin: 0 auto;
width: 700px;
}
#left1 {
float:left;
width:200px;
margin-top: 0px;
padding-bottom: 20px;
}
#left1 h3 {
margin: 10px 0 0 0;
padding: 5px 0 5px 10px;
font: bold 13px Verdana, 'Trebuchet MS', Sans-serif;
color: #555;
background: #EEF0F1 url(images/menubg.gif) repeat-x left bottom;
border: 1px solid #EFF0F1;
}
#left1 .box {
border: 1px solid #EFF0F1;
margin: 0 0 5px 0;
}
#left1 ul {
color: #aaa;
text-align: left;
margin: 3px 0 8px 0; padding-left: 20px;
text-decoration: none;
}
#left1 ul li {
padding: 2px 0 2px 0px;
margin: 0 2px;
}
#left1 ul a {
font-weight: 600;
color: #001F4F;
}
#left1 ul a:hover { color : #333; }
#right1 {
float: right;
width: 480px;
padding: 0px 0 20px 10px;
line-height: 17px;
}
#right1 h2 {
padding: 5px 0 5px 0;
font: bold 13px Verdana, 'Trebuchet MS', Sans-serif;
color: #555;
text-decoration: none;
border-bottom: 1px dotted #aaa;
margin-bottom: 10px;
margin-top: 10px;
}
#right h2 a { color: #173D7F; text-decoration: none; }
#right1 h2 a:hover { color: #336699; }
#footer {
background: #333;
height: 25px;
text-align: center;
font-size: 10px;
color: #999;
margin: -10px;
width: 700px;
}
#footer a { text-decoration: underline; margin: 0 auto; }
#footer a:hover { color : #fff; }
html { height: 100%;}
body { height: 100%; }
#page {
position: relative;
min-height: 100%;
height: auto;
}
* html #page { height: 100%; }
#footer {
position: fixed;
bottom: -30px;
left: 295px;
}
Anyone knows whats wrong?
did you run it through the w3c or close the missing div?
yes I did, it is closed though, and the other errors, are errors that are no errors (its giving me http:// than the second / it shows as error)…
any 1?
The page is showing 61 serious errors -any one of which could break the page.
However the issue with the footer is because you have absolutely placed the footer and you cannot use absolute positioning like that. You need to put the footer back in the flow of the document and clear the floats.
e.g.
/* remove
#footer {
position: absolute;
bottom: -187px;
left: 295px;
}
*/
#footer{
clear:both;
width:100%;
margin:auto;
}
You have three doctypes in your page? (and you are using a strict doctype which means no presentational attributes are allowed in the html).
If you are using “includes” to include sections then you should only be including the relevant html. You don’t include a whole page.
Here is a quick re-jig into valid code and more organised css.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lukas Podolski, Lukas Podolski Profile, Lukas Podolski Photos, Lukas Podolski Videos - LukasPodolski.info</title>
<meta name="description" content="Lukas Podolski, Lukas Podolski, Lukas Podolski Profile, Lukas Podolski Biography, Lukas Podolski Photos, Lukas Podolski Videos, Lukas Podolski Wallpapers" />
<meta name="keywords" content="Lukas Podolski, Lukas Podolski, Lukas Podolski Profile, Lukas Podolski Biography, Lukas Podolski Photos, Lukas Podolski Videos, Lukas Podolski Wallpapers" />
<meta name="robot" content="index,follow" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<style type="text/css">
/*Opera and IE8 Fix for sticky footer*/
body:before, #page:after {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* negate effect of float*/
display:block;
}
#page:after, #content:after {
clear:both;
float:none;
margin:0;
}
/* defaults */
.style1 {
color: #173D7F
}
img {
border: none;
}
a {
text-decoration: none;
color: #173D7F;
}
a:hover {
color: #333;
}
h3 {
color: #808080;
font-size: 12px;
border-bottom: 1px solid #eee;
margin: 10px 0 10px 0;
}
ol {
padding-left: 20px;
}
* {
padding: 0;
margin: 0;
}
/* structure*/
html, body {
height: 100%;
}
body {
background: #CECFCE;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 12px;
color: #555;
}
#page {
position: relative;
min-height: 100%;
margin: -25px auto 0;
width: 740px;
background:#fff url(http://www.lukaspodolski.info/images/bg.jpg) top center repeat-y;
}
* html #page {
height: 100%;
}
h1.logo {
border-top: 47px solid #333;
margin: 0 auto;
width:720px;
padding:10px 0 0;
height:110px;
font-size: 23px;
font-weight: 100;
letter-spacing: -1px;
position:relative;
overflow:hidden;
}
h1.logo em {
position:absolute;
left:0px;
top:10px;
width:720px;
height:100px;
background:#fff url(http://www.lukaspodolski.info/images/header.jpg) no-repeat 10px 0;
}
h1 a {
color: #f7f7f7;
}
h1 a:hover {
color: #aaa;
}
#header h2 {
padding: 0 0 0 225px;
font-size: 15px;
color: #eee;
font-weight: 100;
}
#navigation {
background: #ddd url(http://www.lukaspodolski.info/images/menu.gif) repeat-x;
height: 30px;
width:700px;
line-height: 30px;
margin:0 auto 0 auto;
background: #ddd;
border-bottom: 4px solid #666;
padding:0 0 34px;
}
#navigation ul {
height:30px;
margin:0;
padding:0;
width:700px;
background:#000;
}
#navigation li {
float:left;
list-style-type:none;
border-right:1px solid #444;
}
#navigation li a {
display:block;
padding:0 20px;
text-decoration:none;
color: #fff;
letter-spacing:1px;
}
#navigation li a:hover {
background: #222 url(http://www.lukaspodolski.info/images/menuover.gif) repeat-x;
color:#fff;
text-decoration:none;
}
#content {
margin: 0 auto;
width: 700px;
}
#left1 {
float:left;
width:200px;
padding-bottom: 20px;
}
#left1 h3 {
margin: 15px 0 0 0;
padding: 5px 0 5px 10px;
font: bold 13px Verdana, 'Trebuchet MS', Sans-serif;
color: #555;
background: #EEF0F1 url(http://www.lukaspodolski.info/images/menubg.gif) repeat-x left bottom;
border: 1px solid #EFF0F1;
text-align:center;
}
#left1 .box {
border: 1px solid #EFF0F1;
margin: 0 0 5px 0;
}
#left1 ul {
color: #aaa;
text-align: left;
margin: 3px 0 8px 0;
padding-left: 20px;
text-decoration: none;
}
#left1 ul li {
padding: 2px 0 2px 0px;
margin: 0 2px;
}
#left1 ul a {
font-weight: 600;
color: #001F4F;
}
#left1 ul a:hover {
color : #333;
}
#right1 {
float: right;
width: 480px;
padding: 0px 0 20px 10px;
line-height: 17px;
}
#right1 h2 {
padding: 5px 0 5px 0;
font: bold 13px Verdana, 'Trebuchet MS', Sans-serif;
color: #555;
text-decoration: none;
border-bottom: 1px dotted #aaa;
margin-bottom: 10px;
margin-top: 10px;
}
#right h2 a {
color: #173D7F;
text-decoration: none;
}
#right1 h2 a:hover {
color: #336699;
}
#footer {
background:#333 url(http://www.lukaspodolski.info/images/bg.jpg) repeat-y 0 0;
height: 25px;
text-align: center;
font-size: 10px;
color: #999;
width: 740px;
clear:both;
margin:auto;
overflow:hidden;
}
.inner {
width:720px;
margin:auto;
height: 25px;
line-height:25px;
background:#333;
}
#footer a {
text-decoration: underline;
margin: 0 auto;
color:#fff;
}
#footer a:hover {
color : #fff;
}
ul.image-list {
clear:both;
width:100%;
margin:0;
padding:0;
list-style:none;
text-align:center;
}
ul.image-list li {
display:inline;
margin:2px;
}
</style>
</head>
<body>
<div id="page">
<h1 class="logo">Lukaspodolski<em></em></h1>
<div id="navigation">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="lukas-podolski-profile.php">Profile</a></li>
<li><a href="lukas-podolski-biography.php">Biography</a></li>
<li><a href="lukas-podolski-photos.php">Photos</a></li>
<li><a href="lukas-podolski-videos.php">Videos</a></li>
<li><a href="lukas-podolski-wallpapers.php">Wallpapers</a></li>
<li><a href="lukas-podolski-links.php">Links</a></li>
</ul>
</div>
<div id="introduction"></div>
<div id="content">
<div id="right1">
<h2>Lukas Podolski Photos</h2>
<p>Below is a collection of<strong><a href="lukas-podolski-photos.php">Lukas Podolski Photos</a></strong>.</p>
<h2 class="style1">Lukas Podolski Photos</h2>
<ul class="image-list">
<li><a href="photos/1.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn1.jpg" width="75" height="100" alt="" /></a></li>
<li><a href="photos/2.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn2.jpg" width="90" height="100" alt="" /></a></li>
<li><a href="photos/3.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn3.jpg" width="67" height="100" alt="" /></a></li>
<li><a href="photos/4.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn4.jpg" width="78" height="100" alt="" /></a></li>
<li><a href="photos/5.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn5.jpg" width="59" height="100" alt="" /></a></li>
<li><a href="photos/6.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn6.jpg" width="100" height="100" alt="" /></a></li>
<li><a href="photos/7.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn7.jpg" width="100" height="94" alt="" /></a></li>
<li><a href="photos/8.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn8.jpg" width="75" height="100" alt="" /></a></li>
<li><a href="photos/9.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn9.jpg" width="100" height="81" alt="" /></a></li>
<li><a href="photos/10.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn10.jpg" width="65" height="100" alt="" /></a></li>
<li><a href="photos/11.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn11.jpg" width="100" height="79" alt="" /></a></li>
<li><a href="photos/12.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn12.jpg" width="69" height="100" alt="" /></a></li>
<li><a href="photos/13.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn13.jpg" width="78" height="100" alt="" /></a></li>
<li><a href="photos/14.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn14.jpg" width="100" height="100" alt="" /></a></li>
<li><a href="photos/15.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn15.jpg" width="100" height="72" alt="" /></a></li>
<li><a href="photos/16.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn16.jpg" width="67" height="100" alt="" /></a></li>
<li><a href="photos/17.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn17.jpg" width="63" height="100" alt="" /></a></li>
<li><a href="photos/18.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn18.jpg" width="75" height="100" alt="" /></a></li>
<li><a href="photos/19.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn19.jpg" width="77" height="100" alt="" /></a></li>
<li><a href="photos/20.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn20.jpg" width="100" height="70" alt="" /></a></li>
<li><a href="photos/21.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn21.jpg" width="73" height="100" alt="" /></a></li>
<li><a href="photos/22.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn22.jpg" width="67" height="100" alt="" /></a></li>
<li><a href="photos/23.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn23.jpg" width="100" height="72" alt="" /></a></li>
<li><a href="photos/24.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn24.jpg" width="90" height="100" alt="" /></a></li>
<li><a href="photos/25.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn25.jpg" width="100" height="75" alt="" /></a></li>
<li><a href="photos/26.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn26.jpg" width="85" height="100" alt="" /></a></li>
<li><a href="photos/27.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn27.jpg" width="75" height="100" alt="" /></a></li>
<li><a href="photos/28.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn28.jpg" width="100" height="71" alt="" /></a></li>
<li><a href="photos/29.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn29.jpg" width="89" height="100" alt="" /></a></li>
<li><a href="photos/30.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn30.jpg" width="100" height="67" alt="" /></a></li>
<li><a href="photos/31.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn31.jpg" width="90" height="100" alt="" /></a></li>
<li><a href="photos/32.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn32.jpg" width="71" height="100" alt="" /></a></li>
<li><a href="photos/33.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn33.jpg" width="100" height="75" alt="" /></a></li>
<li><a href="photos/34.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn34.jpg" width="80" height="100" alt="" /></a></li>
<li><a href="photos/35.jpg"><img src="http://www.lukaspodolski.info/photos/thumbnails/tn35.jpg" width="100" height="74" alt="" /></a></li>
</ul>
</div>
<div id="left1">
<h3>Links :</h3>
<div class="box">
<ul>
<li><a href="http://www.playerdb.net/">Football Player Database</a></li>
<li><a href="lukas-podolski-links.php">More links</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="inner">
<p><a href="index.php">Lukas Podolski</a>-<a href="lukas-podolski-profile.php">Lukas Podolski Profile</a>-<a href="lukas-podolski-photos.php">Lukas Podolski Photos</a>-<a href="lukas-podolski-videos.php">Lukas Podolski Videos</a></p>
</div>
</div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-746419-67']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
Lots of thanks Paul! Its fixed 
rep++