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:

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:

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:

Code:

#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

Thread: Javascript Footer Buggy

Thread Tools

Search Thread

Javascript Footer Buggy

Bookmarks

Bookmarks

Posting Permissions