PDA

View Full Version : Javascript Footer Buggy



wyclef
11-11-2005, 05:05 PM
Hi, can someone help me figure out why the Javascript Footer on this page gets bumped to the top if the browser window width is minimized? Also, is there a way to float the bottom footer line to the right to align it with the sidebar?

Here is the code:



<!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" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style tyle="text/css">

#header {
margin: 0; padding: 0;
}

h1 {
width: 320px; height: 140px;
margin: 0; padding: 0;
border-left: 4px solid #000;
}

h2 {
font-weight: normal;
}


h3, h4 {
font-size: 11px;
margin: 0 0 0 17px; padding: 0 0 0 9px;
}

h5 {
margin: 0; padding: 17px 0 0 0;
font-size: 26px;
}

h6 {
margin: 0; padding: 5px 0;
line-height: 18px;
}

#content p {
margin: 0; padding: 5px 0;
font-size: 14px;
font-family: serif;
line-height: 18px;
}

#leftcontent {
position: absolute;
margin-right: 300px;
}

#rightcontent {
margin: 0; padding: 0 25px 0 0;
top: 0; right: 0;
width: 250px;
position: absolute;
}

#content {
margin: 0; padding: 40px 0;
}

#info {
margin: 0; padding: 0 0 0 17px;
border-left: 4px solid #000;
}

#date {
font-size: 10px;
margin: 0 0 164px 0; padding: 17px;
height: 35px;
border-left: 4px solid #000;
}

#side-info {
font-size: 11px;
height: 315px;
line-height: 14px;
margin: 0; padding: 5px 17px;
border-left: 4px solid #000;
}


a {
text-decoration: none;
font-weight: bold;
}

#footer {
font-size: 10px; width: 85%;
margin: 0; padding: 10px 17px;
border-left: 4px solid #000;
}

</style>


<script type="text/javascript">
<!--
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setFooter() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentHeight = document.getElementById('leftcontent').offsetHeight;
var footerElement = document.getElementById('footer');
var footerHeight = footerElement.offsetHeight;
if (windowHeight - (contentHeight + footerHeight) >= 0) {
footerElement.style.position = 'absolute';
footerElement.style.top = (windowHeight - footerHeight) + 'px';
}
else {
footerElement.style.position = 'static';
}
}
}
}
window.onload = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}
//-->
</script>

</head>

<body id="home">

<!-- Start Left Content -->
<div id="leftcontent">

<!-- Start Header -->
<div id="header"><h1>Header 1</h1></div>
<!-- End Header -->

<!-- Start Content -->
<div id="content">
<div id="info">
<h5>page title</h5>
<p>The text contains The text contains The text contains The text contains The text contains The text contains The text contains</p>
<p>The text contains The text contains The text contains The text contains The text contains The text contains The text contains</p>
<p>The text contains The text contains The text contains The text contains The text contains The text contains The text contains</p>
<p>The text contains The text contains The text contains The text contains The text contains The text contains The text contains</p>
<p>The text contains The text contains The text contains The text contains The text contains The text contains The text contains</p>
<p>The text contains The text contains The text contains The text contains The text contains The text contains The text contains</p>
<p>The text contains The text contains The text contains The text contains The text contains The text contains The text contains</p>
<p>The text contains The text contains The text contains The text contains The text contains The text contains The text contains</p>
</div>
</div>
<!-- End Content -->

</div>
<!-- End Left Content -->

<!-- Start Right Content -->
<div id="rightcontent">
<div id="side-info">Side</div>
</div>
<!-- End Right Content -->

<!-- Start Footer -->
<div id="footer">
<p>&#169; Footer Text Footer Text Footer Text Footer Text Footer Text Footer Text Footer Text Footer Text </p>
<p>How do i get this line to float right aligned with sidebar</p>
</div>
<!-- End Footer -->

</body>
</html>

Wedgy
11-14-2005, 01:38 PM
An example of a Footer Buggy:
http://lentils.imagineis.com/p/Horse-Buggy.jpg

Okay seriously I will have a look at your code.

Wedgy
11-16-2005, 12:36 AM
Okay I tried your code. I assume there may be a stylesheet somewhere you haven't posted.

Yeah, your footer does do some wierd things.

The first thing I tried was this:

#footer {
font-size: 10px; width: 85%;
margin: 0; padding: 10px 17px;
border-left: 4px solid #000;
position: absolute; top: 90%; left:2%;
}
This should have placed the footer at the bottom of the page regardless of how the window was re-sized. Instead it placed the footer at the top of the page permanently, (in Firefox:) which tells me the footer thinks it is inside a smaller element or content area.

So I thought you had too many "DIV"s, confusing the browser. But your formatting is so nice that it appears you don't. Perhaps the browser is miscounting " />" for elements generally. I've seen that before.
Right now I'm going to see what it looks like in IE...
-----
That's funny: in IE it just does what it did before, without the absolute positioning.

http://lentils.imagineis.com/p/buggy/buggy.html