PDA

View Full Version : div background length/firefox



Woody
07-27-2006, 08:01 AM
:( Hi, I am very new to CSS and am having a problem with my first CSS website in dealing with changing div background (color) lengths, the home page and the 'about us' page are up, the lengths of the background divs change in IE and firefox, and on the amount of text( I want them both to meet the footer). It seems a simple problem - but I can't get my head around it!! Please help and help me learn from my mistakes!

The test site is:

http://www.woodenteacher.org.uk

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;
height: auto;
float: left;
}


#sidebar{
background-color: #203A6D;
font-size: 80%;
text-align: center;
color:white;
padding: 20px 0px 122px 0px;
margin: 0px 0px 0px 480px;
height: auto;
font-weight: normal;
font-style: italic;

}
.sidequote{
text-align:left;
line-height: 1.5em;
padding: 30px 20px 0px 30px;
margin: 0px 0px 0px 0px;
}
.sidequoteaboutus{
text-align:left;
line-height: 1.5em;
padding:25px 25px 0px 25px;
}

}
.photo{
padding:75px 15px 0px 0px;

}
.photoaboutus{
padding:45px 15px 0px 0px;
}
.aboutus{
padding:0px 0px 178px 0px;
}

#footer{
background-color: #E76694;
font-size: 64%;
text-align:center;
display: block;
clear: both;

}

And the XHTML is:
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="index.html"title="home">home</a></li>
<li><a href="aboutus.html"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">
<p class="photo">
<img src="images/stm_tim.jpg" alt="Tim Shenton Headmaster" />
</p>
<p class="sidequote">
"In a recent government survey 100% of our parents agreed</br> that their child was happy at St Martin's, that the teaching was good
and that the school was</br> well run."</p>
</div>

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


</div>
</body>
</html>

Woody
07-28-2006, 07:16 AM
Hi just to add, I think I have worked out how to make the div background reach the footer (in IE at least): It is obviously effected by the elements, so I have for instance made the last paragraph on the 'about us' page a class and then added padding to it, which causes the div background to extend. I guess I thought I could make one rule and that it would work through the site, but I guess that only works if all the content is the same size?!(I have updated CSS)

But although it seems to working in IE (so far), it sure isn't in FF. From what I read it is normally the other way around, but please help me solve the problem; if I make it right for FF then it won't be right for IE - it could drive me crazy!!!

jscheuer1
07-28-2006, 07:42 AM
#allcontent{
width: 800px;
margin-top: 5px;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
background-color:#203A6D;
}

Woody
07-28-2006, 10:02 AM
Thanks John!

I had the same question running on the W3Schools CSS Forum, and a member
has also just replied with the same answer! And you are both very right!!!

Many, many thanks!

Laura