Forum Moderators: not2easy
On shorter pages with this CSS, I have issues with the page length in both Firefox and Chrome. Instead of stopping at the footer, the page continues the length of the page. So I have white space below the footer. IE does not do this, and stops the page body at the footer. When I delete the repeating background code it doesn't do this anymore. Here is the CSS:
/* CSS Document */
/*------------------------------------------------------------------------
------------------------------------------------------------------------*/
/* =General
------------------------------------------------------------------------*/
/* Remove all padding and margins */
* {
margin: 0;
padding: 0;
}
/* Html and body padding & margins */
html, body{
height: 100%;
margin: 0;
padding: 0;
/* BUG: Fix IE6 bug */
text-align: center;
}
body {
background: url(../images/bg.gif) 50% ;
background-repeat: repeat-y;
background-color: #cccccc;
}
/* =Typography
------------------------------------------------------------------------*/
body {
font-family: Trebuchet MS1, Helvetica, sans-serif;
}
h1 {
font-size: 1.5em;
color: #024b88;
}
h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
font-size: 1em;
color: #024b88;
}
#banner {
font-size: 1.2em;
}
#form {
text-align: left;
font-size: .75em;
}
#privacy {
text-align: left;
font-size: .7em;
}
.blue {
color: #024b88;
font-weight: bold;
}
/* =Wrappers
------------------------------------------------------------------------*/
#wrapper {
margin: 0px auto;
width: 811px;
}
#innerwrapper {
background: #ffffff;
float: left;
width: 811px;
}
/* =Banner
------------------------------------------------------------------------*/
#top {
background-color: #004934;
height: 8px;
width: 811px;
}
#logowrapper {
height: 95px;
width: 811px;
background-color: #ffffff;
}
#logo1 {
margin: 15px auto auto 15px;
float:left ;
text-decoration: none;
border:0;
}
#logo2 {
margin: 15px 15px auto auto;
float:right ;
text-decoration: none;
border: 0;
}
#banner {background: #ffffff;
background-image:url(../images/Banner-2.jpg);
background-repeat: no-repeat;
text-align: left;
padding: 30px;
height: 100px;
}
/* =Main content
------------------------------------------------------------------------*/
#maincontent {
float: left;
font-size: .75em;
margin: 15px auto auto 30px;
text-align: left;
width: 475px;
}
#maincontent p {
margin-bottom: 15px;
}
ul, li {
margin-left: 15px;
}
.spaced_list li
{
margin-bottom: 1.3em;
}
/* =Secondary nav
------------------------------------------------------------------------*/
#secondarynav {
float: right;
margin: 15px 15px 15px 0px;
padding: 0;
width: 215px;
}
#form {
float: right;
background-color: #d5ece2;
margin: 15px 0px 0px 0px;
padding: 15px 15px 15px 15px;
width: 183px;
border-style: solid;
border-color: #b2b2b2;
border-width: 1px;
text-align: left;
}
#privacy {
float: right;
padding: 15px 15px 15px 15px;
width: 185px;
text-align: left;
}
/* =Footer
------------------------------------------------------------------------*/
#footer {
background: #004934;
clear: both;
color: #ffffff;
font-size: .7em;
height: 60px;
margin: 0px auto;
padding-top: 20px;
width: 811px;
}
