Edit:
This is currenty kinda resolved, Instead of struggling with the problem, I started making a new one.
I’ve got a problem, now it’s that when I add content to the Content div on my site, for example a 100% height iframe, it makes the Content div expand and floats out of the Conatiner div.
So the css code is this..
@charset "utf-8";
/* CSS Document */
body{background-image:url('/media/Background.png');}
#Container{
position:relative;
width: 900px;
min-height:200px;
margin: 0px auto 0 auto;
text-align: left;
padding-left: 1px;
cursor: de;
border-left: 1px solid #000001;
border-right: 1px solid #000001;
border-top: 1px solid #000001;
background-color:#C1E9FF;
overflow:inherit;
}
#LogoContainer{
position:absolute;
background-image:url('/media/Logo.png');
border-right-width:1px;
border-bottom-width:1px;
border-right-color:rgb(0,0,1);
border-bottom-color:rgb(0,0,1);
border-right-style:solid;
border-bottom-style:solid;
width:400px;
height:50px;
}
#LikeBar{
position:absolute;
border-bottom-width:1px;
border-bottom-color:rgb(0,0,1);
border-bottom-style:solid;
width:500px;
height:50px;
left:400px;
}
#ButtonHome{
position:absolute;
background-image:url('/media/Bt.png');
width:100px;
height:30px;
top:50px;
z-index:1;
}
#ButtonVideo{
position:absolute;
background-image:url('/media/Bt.png');
width:100px;
height:30px;
left:105;
top:50px;
z-index:1;
}
#ButtonSpeedtest{
position:absolute;
background-image:url('/media/Bt.png');
width:100px;
height:30px;
left:210;
top:50px;
z-index:1;
}
#ButtonYVideos{
position:absolute;
background-image:url('/media/Bt.png');
width:100px;
height:30px;
left:315;
top:50px;
z-index:1;
}
#YouTubeBox{
position:absolute;
background-image:url('/media/Box.png');
width:100px;
height:30;
left:10px;
text-align:center;
}
#TwitterBox{
position:absolute;
background-image:url('/media/Box.png');
width:100px;
height:30;
left:110px;
text-align:center;
}
#FaceBookBox{
position:absolute;
background-image:url('/media/Box.png');
width:100px;
height:30;
left:210px;
text-align:center;
}
#Content{
position:relative;
top:90px;
width:780px;
min-height:80%;
border-top:1px solid #000001;
}
#Footer{
position:relative;
border-top-width:1px;
border-top-color:rgb(0,0,1);
border-bottom: 1px solid #000001;
border-top-style:solid;
width:900px;
bottom:0px;
z-index:1;
text-align:center;
}
#AdFooter{
position:relative;
width:728px;
height:100px;
margin: 0px auto 0 auto;
border-left: 1px solid #000001;
border-right: 1px solid #000001;
}
#AdSidebar{
position:absolute;
width:120px;
height:600px;
left:780px;
top:50px;
border-left: 1px solid #000001;
border-bottom: 1px solid #000001;
}
p{line-height: 1px;}
And the Current html code, without the content that is not related to the error.
<html>
<head>
<title>Faulty css</title>
<link href="ThemeV1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="Container"> <!-- Start Container -->
<div id="LogoContainer">
</div>
<div id="LikeBar">
<p class="DivT">
</p>
</div>
<!-- Menu Controls -->
<a href="/"><div id="ButtonHome"><center><p>Home</p></center></div></a>
<!-- <a href="/blog"><div id="ButtonVideo"><center><p>Blog</p></center></div></a> -->
<a href="/Speedtest.html"><div id="ButtonSpeedtest"><center><p>SpeedTest</p></center></div></a>
<a href="/videos.html"><div id="ButtonVideo"><center><p>Videos</p></center></div></a>
<!-- WEBSITE CONTENT -->
<div id="Content">
<iframe src="about:blank" width="100%" height="100%" allowTransparency="true"></iframe>
</div>
<!-- END WEBSITE CONTENT -->
<!-- Footer -->
<div id="Footer">
<p>Test</p>
<th>
</div>
<!-- End Footer -->
<div id="AdFooter">
</div>
<div id="AdSidebar">
</div>
</div> <!-- End Container -->
</body>
</html>
My guess for why this is caused, is that the footer is locked, and doesn’t move when the content is getting bigger.
And that I don’t wanna do is to recode everything cause this was the first theme I created, but it works, but with the bug on footer.
The problem is the
pwithin your#Footer. You haveline-height: 1px, which is forcing that text up out of the footer. You should probably be either padding the#Footer por forcing a much largerline-height. I’d also set a static height or some sort of padding on the footer itself.