Woody
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:
http://www.woodenteacher.org.uk
and the CSS is:
#allcontent{
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;
}
h5{
font-size: 1.6em;
color: #538DCC;
}
#header{
background-image: url(images/bluetile.gif);
width: 800px;
height: 99px;
padding-top: 3px;
margin-left: auto;
margin-right: auto;
}
#slantedmenu{
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;
}
#leftpane{
background-color: #F0F8FF;
font-size: 75%;
line-height: 1.4em;
padding: 50px 40px 40px 20px;
margin: 0px 0px 0px 0px;
width: 420px;
float: left;
}
#sidebar{
background-color: #203A6D;
font-size: 80%;
text-align: center;
color:white;
padding: 50px;
padding-bottom: 170px;
margin: 0px 0px 0px 480px;
font-weight: normal;
font-style: italic;
}
.sidequote{
line-height: 1.5em;
padding: 10px 0px 0px 10px;
}
.photo{
padding:140px 45px 0px 5px;
margin: 100px 10px 15px;
}
#footer{
background-color: #E76694;
font-size: 64%;
text-align:center;
display: block;
clear: both;
}
and the XHTML is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<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" />
</head>
<body>
<div id="allcontent">
<div id="header">
<img src="images/stm_header.jpg" alt="St Martins School logo" />
</div>
<div id="slantedmenu">
<ul>
<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>
</ul>
</div>
<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>
<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>
<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>
<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>
<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>
<p>
Please do come and look round.</p>
<p>
Headmaster, Tim Shenton.</p>
</div>
<div id="sidebar">
<span class="photo">
<img src="images/stm_tim.jpg" alt="Tim Shenton Headmaster" />
</span>
<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>
<div id="footer">
© 2006, St Martin's School, 15 Stokewood Road, Bournemouth, Dorset.
</div>
</div>
</body>
</html>
Any advice would be fantastic- I really want to get my head around CSS!:)
http://www.woodenteacher.org.uk
and the CSS is:
#allcontent{
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;
}
h5{
font-size: 1.6em;
color: #538DCC;
}
#header{
background-image: url(images/bluetile.gif);
width: 800px;
height: 99px;
padding-top: 3px;
margin-left: auto;
margin-right: auto;
}
#slantedmenu{
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;
}
#leftpane{
background-color: #F0F8FF;
font-size: 75%;
line-height: 1.4em;
padding: 50px 40px 40px 20px;
margin: 0px 0px 0px 0px;
width: 420px;
float: left;
}
#sidebar{
background-color: #203A6D;
font-size: 80%;
text-align: center;
color:white;
padding: 50px;
padding-bottom: 170px;
margin: 0px 0px 0px 480px;
font-weight: normal;
font-style: italic;
}
.sidequote{
line-height: 1.5em;
padding: 10px 0px 0px 10px;
}
.photo{
padding:140px 45px 0px 5px;
margin: 100px 10px 15px;
}
#footer{
background-color: #E76694;
font-size: 64%;
text-align:center;
display: block;
clear: both;
}
and the XHTML is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<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" />
</head>
<body>
<div id="allcontent">
<div id="header">
<img src="images/stm_header.jpg" alt="St Martins School logo" />
</div>
<div id="slantedmenu">
<ul>
<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>
</ul>
</div>
<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>
<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>
<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>
<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>
<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>
<p>
Please do come and look round.</p>
<p>
Headmaster, Tim Shenton.</p>
</div>
<div id="sidebar">
<span class="photo">
<img src="images/stm_tim.jpg" alt="Tim Shenton Headmaster" />
</span>
<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>
<div id="footer">
© 2006, St Martin's School, 15 Stokewood Road, Bournemouth, Dorset.
</div>
</div>
</body>
</html>
Any advice would be fantastic- I really want to get my head around CSS!:)