View Full Version : Footer Problems

07-25-2006, 06:10 PM
Hi, I am new to CSS, and am having trouble with my first CSS website and the footer in particular - it looks different on IE and Firefox and both are wrong! I want it to sit neatly on the bottom - what am I doing wrong? I have spent weeks going through an excellent book (Head first html with css and xhtml) but all that I thought I had learnt doesn't seem to work in practice! The test site is:


and the CSS is:

width: 800px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: auto;
margin-right: auto;

body {
background-color: #ID3F7A;
font-size: small;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 1.7em;
background-color: #538DCC;

font-size: 1.6em;
color: #538DCC;
background-image: url(images/bluetile.gif);
width: 800px;
height: 99px;
padding-top: 3px;
margin-left: auto;
margin-right: auto;

font-weight: normal;
font-size: 75%;

#slantedmenu:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;

#slantedmenu ul{
width: 800px;
text-indent: 10px;
padding: 0px 0;
margin: 0;
background-color: #e76694;
border: 1px solid #ID3F7A;
text-align: center; /*set value to "center" for example to center items*/

#slantedmenu ul li{
display: inline;

#slantedmenu ul li a{
color: #494949;
padding: 3px 0;
padding-right: 15px;
margin: 0;
text-decoration: none;
background: transparent url(images/menudivider.gif) top right no-repeat;

#slantedmenu ul li a:visited{
color: #494949;

#slantedmenu ul li a:hover{
color: white;

background-color: #F0F8FF;
font-size: 75%;
line-height: 1.4em;
padding: 50px 40px 40px 20px;
margin: 0px 0px 0px 0px;
width: 420px;
float: left;

background-color: #203A6D;
font-size: 80%;
text-align: center;
padding: 50px;
padding-bottom: 170px;
margin: 0px 0px 0px 480px;
font-weight: normal;
font-style: italic;

line-height: 1.5em;
padding: 10px 0px 0px 10px;

padding:140px 45px 0px 5px;
margin: 100px 10px 15px;

background-color: #E76694;
font-size: 64%;
display: block;
clear: both;


and the XHTML is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<link rel="shortcut icon" href="favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="St Martins' School is a friendly, family run school."/>
<meta name="keywords" content=" St Martins School,School, Bournemouth, private, friendly, family, Christian."/>
<title>St Martins - the friendly family school in Bournemouth</title>
<link rel="stylesheet" type="text/css" href="stmartins.css" />


<div id="allcontent">

<div id="header">
<img src="images/stm_header.jpg" alt="St Martins School logo" />

<div id="slantedmenu">
<li><a href="http://www.dynamicdrive.com"title="home">home</a></li>
<li><a href="http://www.dynamicdrive.com"title="about us">about us</a></li>
<li><a href="http://www.cssdrive.com"title="atmosphere">atmosphere</a></li>
<li><a href="http://www.javascriptkit.com"title="curriculum">curriculum</a></li>
<li><a href="http://www.codingforums.com"title="sport and music">sport and music</a></li>
<li><a href="http://tools.dynamicdrive.com"title="ofsted">ofsted</a></li>
<li><a href="http://tools.dynamicdrive.com"title="parents">parents</a></li>
<li><a href="http://tools.dynamicdrive.com"title="gallery">gallery</a></li>
<li><a href="http://tools.dynamicdrive.com"title="prospectus">prospectus</a></li>
<li><a href="http://tools.dynamicdrive.com"title="contact us">contact us</a></li>
<li><a href="http://tools.dynamicdrive.com"title="news">news</a></li>

<div id="leftpane">

<h5>A word from the headmaster</h5>
<p class="bodytext">
I have worked at St Martin's for over twenty years and it has been both a priviledge and a joy to serve the children.
It is so rewarding to watch them haveing fun as they learn together, grow in confidence, develop new skills and make
friendships that may last a lifetime.</p>
My aim is to make sure that every child fulfils his/her potential, enjoys school to the maximum and looks back at St
Martin's as a wonderful learning experience.</p>
Unlike many heads today I am a teaching head and without doubt the best part of the job is being with the children,
instructing them, encouraging them, laughing with them, and making sure that they thrive both academically and socially. </p>
I know from personal experience how enriching our education is to children. Both my girls spent seven happy years at St Martin's
and are now flourishing at the Grammar School. Even now I get comments from them such as, "St Martin's is such an amazing school.
I wish I could have stayed there for ever."</p>
I hope that you can tell from these few lines how enthusiastic I am about St Martin's, its wonderful children and the all-round
education it provides. I know it's a great school - in fact, I know it's the best!</p>
Please do come and look round.</p>
Headmaster, Tim Shenton.</p>

<div id="sidebar">
<span class="photo">
<img src="images/stm_tim.jpg" alt="Tim Shenton Headmaster" />
<p class="sidequote">
"In a recent government survey 100% of our parents agreed that their child was happy at St Martin's, that the teaching was good
and that the school was well run."</p>

<div id="footer">
&copy; 2006, St Martin's School, 15 Stokewood Road, Bournemouth, Dorset.


Any advice would be fantastic- I really want to get my head around CSS!:)

07-25-2006, 09:50 PM
Footers usually need display:block; and clear:both; in order to hammer themselves a square full width area. Other than that, check validation with w3 to see that html is correct.

07-25-2006, 09:55 PM
I hope that you can tell from these few lines how enthusiastic I am about St Martin's, it's wonderful children and the all-round
education it provides. I know it's a great school - in fact, I know it's the best!</p>... but doesn't teach its staff how to form a possessive? :p
Oh, and before "diving headfirst" into XHTML, you should know this (http://www.hixie.ch/advocacy/xhtml).

07-26-2006, 11:47 AM
Thanks Mike, that seems to have fixed the footer but I still don't seem to get the "leftpane" and "sidebar" divs to go down to meet the footer in both IE and firefox. Is it a case of not being able to keep both browsers happy?

I have also been trying to reposition the "photo" and "sidequote" further down, but this seems to affect the "sidebar" div. I guess it might be to do with inheritance, but I'm not sure how to correct it, other than make the class and span into divs?

I have checked validation with W3 and it validates fine.

I have updated the css/xhtml in my previous post to account for the changes I have made.

Any more advice would be great!


P.S. Twey, I actually alltered the original text with 'its' to 'it's' - thanks for showing me how little I know about English- and making sure that I didn't include my mistake!

07-27-2006, 07:49 AM
I thought, so not as to confuse things (as the header issue is sorted) that I would start a new thread for the div/firefox issue.

Many thanks for your help so far.