2 replies [Last post]
djwhisky
djwhisky's picture
Offline
newbie
Tonbridge, Kent, UK
Last seen: 16 years 11 weeks ago
Tonbridge, Kent, UK
Joined: 2004-07-09
Posts: 6
Points: 0

Hi again... hopefully someone will be able to help me with my latest problem...

I'm trying to add a footer to the site i'm developing (you can see the page at http://www.jwalker.me.uk/manback) The footer needs to either be at the bottom of the browser window or the bottom of the text of the page, whichever is longer. In this site, the footer is the Terms & Conditions | Privacy Policy | Site Map bit... I've finally managed to get it to work in IE6 but not in firefox (whenever you shrink the page up, the footer over runs the main body text - it's also currently screwing up the bottom border).

I think the main difference between this one and other footer examples i've come across is that there is the addition of the borders etc for the main body content. The basic examples i've found everywhere just don't seem to work!!! I've had the footer div both inside a wrapper div with the main content and also, as is currently, outside the border divs and just about everywhere inbetween and just can't seem to get it to work!!

If you need the full code then here it is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML lang="en">
	<HEAD>
		<title>Management Backup - Systems Development and Management Consultancy</title>
		
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<style>
		body
{
	margin:0px;
	padding:0px;
	font-family: Verdana, Arial, Helvetica, Sans-Serif;
	height:100%;
}



#outerpagelayout
{
	width:750px;
	margin:5px;
	padding: 0px;
	border: solid 1px #E4E4E4;
	height:100%;
}

#innerpagelayout
{
	border: solid 1px #DADADA;
	padding: 1px;
	margin: 0px;
	height:100%;
}

#pageheader
{
	margin: 0px;
	padding: 0px;
	border: solid 1px #2154B3;
}

#companylogo
{
	margin: 0px;
	padding: 0px;
	border-top: solid 1px #B5D0E1;
	border-left: solid 1px #B5D0E1;
	border-bottom: solid 1px #054B77;
	border-right: solid 1px #054B77;
	height:64px;
	background-image: url(images/manbacktop.jpg);
	background-repeat: no-repeat;
	
}

#companylogo h1
{
	display:none;
}

#mainnavigation
{
	font-size: 0.7em;
	border-right: solid 1px #054B77;
	border-top: solid 1px #B5D0E1; 
	border-bottom: solid 1px #054B77;
	background-color: #2154B3;
	display:block; 

}

#mainnavigation ul
{
	margin:0px;
	padding-top:3px;
	padding-bottom: 3px;
	padding-left:0px;
	padding-right:0px;
	white-space: nowrap;
	background-color: #2154B3;
	border-right: solid 1px #B5D0E1;
	float:left; 

}

.clear {
clear:both; 
content:"";
} 

#mainnavigation ul li
{

	display:inline;
	padding-top:3px;
	padding-bottom:3px;

}




#mainnavigation ul li a
{
	background-color: #2154B3;
	color: #ffffff;
	text-decoration:none;
	padding-left: 10px;
	padding-right: 10px;
	padding-top:3px;
	padding-bottom:3px;
	border-right: solid 1px #054B77;
	border-left: solid 1px #B5D0E1;
	margin:0px;

}

#mainnavigation ul li a:hover
{
	
	background-color: #5F79A5;
	
}

#mainnavigation ul li#endnav
{
	padding-right:0px;
	margin-right:0px;
	border-right: solid 1px #B5D0E1;
}

#pagebody
{
	color: #2154B3;
	font-size:0.8em;
	padding:10px;
	line-height:1.4em;
}

p.firstpara
{
	font-weight:bold;
}

#footer
{
	clear:both;
	bottom:0;
	width:750px;
	padding-top:3px;
	padding-bottom:3px;
	margin-top:-2em;
	margin-bottom:0px;
	margin-left:0px;
	margin-right:0px;
	
}

#footer ul
{
	clear:both;
	margin:0px;
	padding-right:1em;
	padding-left:1em;
	white-space: nowrap;
	float:right;

}

#footer ul li
{
	display:inline;
	font-size: 0.7em;
	color: #2154B3;
	padding-right:0.8em;
	padding-left:0.8em;
	border-right: solid 1px #2154b3;
	margin:0px;
}

#footer ul li#lastitem
{
	border-right:none;
}

#maincontents
{
	min-height:100%;
}</style>
	</HEAD>
	<body>
		<div id="outerpagelayout">
			<div id="innerpagelayout">
				<div id="pageheader">
					<div id="companylogo"><h1>Management Backup</h1></div>
					<div id="mainnavigation">
						<ul>
							<li><a href="">About Us</a></li><li><a href="">Services</a></li><li><a href="">Products</a></li><li><a href="">Case Studies</a></li><li><a href="">Support</a></li><li><a href="">Contact Us</a></li>
						</ul>
						<div class="clear"></div>
					</div>
				</div>
				<div id="maincontents">
					<div id="pagebody">
						<p class="firstpara">We are a management consultancy and software development house which aims to help our clients manage their organisations in an efficient, effective and economical way by using practical management techniques and information technology.</p>
						<p>With extensive years experience acquired in local government, health services, banking, engineering and commerce, the team at Management Backup is well positioned to deal with your business systems.</p>
						<p>Our focus mainly involves the effective use of Microsoft Office products with Microsoft Access and SQL Server as the main database environments. Our systems help companies in a wide range of industries, from temporary employment agencies to cable manufacturers, and from health and safety consultants to photographic agenices.</p>
					</div>
					
						
				</div>
				
			
						
			</div></div>
		<div id="footer">
						<ul>
							<li>Terms &amp; Conditions</li><li>Privacy Policy</li><li id="lastitem">Site Map</li>
						</ul>
						<div class="clear"></div>
						
					</div>
	</body>
</HTML>

Thanks in advance for any help anyone out there can give!!

Cheers

James

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Footer nightmares

Hi djwhisky,
Here's a great article on footer problems and how to overcome them.
http://www.alistapart.com/articles/footers/

Hope that helps

djwhisky
djwhisky's picture
Offline
newbie
Tonbridge, Kent, UK
Last seen: 16 years 11 weeks ago
Tonbridge, Kent, UK
Joined: 2004-07-09
Posts: 6
Points: 0

Footer nightmares

Hi Tony,

Thanks for that, but i'd actually already read that one and tried out what they suggest but just cant seem to get it to work in this instance... not sure where i'm going wrong?!