Results 1 to 3 of 3

Thread: Javascript Footer Buggy

  1. #1
    Join Date
    Nov 2005
    Posts
    26
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default Javascript Footer Buggy

    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>

  2. #2
    Join Date
    Nov 2005
    Posts
    93
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    An example of a Footer Buggy:


    Okay seriously I will have a look at your code.

  3. #3
    Join Date
    Nov 2005
    Posts
    93
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by Wedgy; 11-16-2005 at 02:29 AM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •