No replies
headknocker
Offline
newbie
Last seen: 12 years 5 weeks ago
Joined: 2009-08-22
Posts: 1
Points: 0

On Firefox the footer is behaving exactly as it should; however on IE 6 not so much. Here is the link to the page http://www.mapsyouthfund.com/indextest.html.

The html is rather simple:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Helping Today's Teens, Become Tomorrow's Leaders</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta name="Description" content="description" />
    <meta name="Keywords" content="keywords" />
    <link rel="stylesheet" href="css/main.css" type="text/css" media="screen, projection" />
  </head>
  <body>
<script type='text/javascript' 
        src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
    <div class="wrapper">
      <div id="header">Mama and Papa Spence Youth Enrichment Fund
 
        <ul id="nav">
          <li><a href="index.html">Home</a></li>
          <li><a href="gallery.html">Image Gallery</a></li>
          <li><a href="contact.php">Contact</a></li>
          <li><a href="support.html">Support</a></li>
        </ul>
      </div>
      <div id="column2">
 
        <div id="sidebar">
          <div id="logo">
            <img src="images/MAPSYEF logo.jpg" alt="Nautica X" />
          </div><br />
          <h3>Wisdom from<br />
          Mama & Papa Spence</h3>
          <hr style="width:75%;text-align:center;margin:auto" />
          <div class="wisdom">
            <p>"Be responsible for your own actions"</p>
            <p class="alignright">-- Papa Spence</p><br />
            <p>"Behave yourself...and have a good time."</p>
            <p class="alignright">-- Mama Spence</p><br />
            <p>"I'd just as soon laugh, as cry"</p>
            <p class="alignright">-- Papa Spence</p>
          </div><br /><br />
        </div>
 
        <div class="content">
          <div id="content-inner">
            <div class="content-full">
              <h2>IMPROVING TOMORROW</h2>
              <p>
                <span>...one young person at a time</span>
              </p>
              <p class="intro">Bob and Carolyn Spence have always had a heart for young people. Both taught Sunday 
                 School and worked with children and youth at Rock Hill Baptist Church when we were younger. Mom was a 
                 school teacher for many years. We three kids were always bringing "strays" home with us or taking 
                 friends along to family reunions or other family road trips. Throughout our time in Stafford County 
                 Public Schools, our "family" continued to grow. Friends spent countless hours at the Spence house, 
                 wanting to hang out with our "cool" parents. Our parents expected a lot, but gave a lot of 
                 love and affirmation in return. This created the perfect environment for a young person's development. A 
                 lot of people started calling them "Mom & Dad" or "Mama & Papa", with many of them "adopting" our 
                 parents as <em>their</em> parents-away-from-home.</p>
 
            </div>
          </div>
        </div>
 
        <div class="clear">&nbsp;</div>
 
      </div>
 
      <div class="footer">
          <ul id="footer-nav">
            <li><a href="index.html">Home</a></li>
            <li><a href="gallery.html">Image Gallery</a></li>
            <li><a href="contact.php">Contact Us</a></li>
            <li><a href="support.html">Support</a></li>
            <li class="last"><a href="privacy.html">Privacy Policy</a></li>
          </ul>
          <p class="copyright">Copyright 2009 Mama and Papa Spence Youth Enrichment Fund <br />
            <a href="http://www.studio7designs.com">original website design by Studio7designs.com</a>
          </p>
      </div>
    </div>
  </body>
</html>

And the css is pretty basic also:

padding:0;
 
margin:0;
 
}
 
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, label, ul, ol, dl, fieldset { margin:5px 0; }
 
li, dd, blockquote { margin-left: 40px; }
 
fieldset { padding:10px; }
 
img { border: 0px; }
/* @end */
 
/* @group HTML, Body */
html, body {
   height: 100%;
}
body {
	text-align: center;
	font-size: 1em;
	font-family: Verdana, sans-serif;
	background: #004261;
}
 
/* @end */
.wrapper {
   background: white;
   border: 1px solid #000000;
   color: white;
   min-height: 100%;        /* For Modern Browsers */
   height: auto !important; /* For Modern Browsers */
   height: 100%;            /* For IE */
   margin: 5px auto;
   position: relative;
   width: 920px;
}
 
#column2 {
   border: 0px solid #FF8C00;
   color: black;
   margin: 0;
   padding-bottom: 4em;
   width: 100%;
   background: white;
}
 
.content {
   border:0px solid #31414a;
   float: right;
   font-family: Verdana, Arial, sans-serif;
   line-height: 1.6em;
   padding-top: 5px;
   padding-right: 23px;
   text-align: justify;
   width: 650px;
}
 
.wisdom p {
   text-align: left;
   font-size: 70%;
   line-height: 1.2em;
   margin-left: 10px;
}
 
p.alignright {
   text-align: right;
   margin-right: 5px;
   font-style: italic;
}
 
div#header {
   background: url(../images/header-background.gif) repeat-x;
/*   background: #B32400; */
   color: white;
   border-bottom: 1px solid #5e534f;
   font-size: 2.5em;
   font-family: "Times New Roman", serif;
   margin: 0px;
}
 
div#logo {
	background: url(../images/logo-box-bkg.gif) no-repeat;
	width: 194px;
	height: 225px;
	margin-top: 10px;
	text-align: center;
	margin-left:14px;
	border: 0px solid red;
	color: white;
 
}
div#logo img {
	margin-top: 80px;
}
div#sidebar {
	float: left;
	width: 215px;
	display: inline;
	border-right: 3px double #e7e5d2;
}
div#content {
	float: right;
    width: 690px;
	padding-right: 15px;
	border: 0px dashed red;
}
div#content-inner {
	margin-top: 10px;
	padding: 1px 0;
}
 
div.content-full {
	clear: both;
	padding-top: 15px;
	border: 0px solid green;
}
 
.footer {
	border-top: 1px solid #5e534f;
	background-color: #FFE099;
	clear: both;
   padding-top: 10px;
   padding-left: 0;
   margin-left: 0px;
   margin-top: -60px;
   width: 100%;
   position: absolute;
   bottom: 0 !important;
   bottom: -1px; /* For Certain IE widths */
   height: 60px;
   }
 
/* @end */
 
/* @group Nav */
ul#nav {
	margin: 0 0 0px 0;
	height: 40px;
	line-height: 45px;
	font-size: .3em;
	font-family: "Times New Roman", serif;
	overflow: hidden;
}
ul#nav li {
	display: inline;
	list-style-type: none;
	text-transform: uppercase;
	margin: 0 20px 0 0;
}
ul#nav li a:link, ul#nav li a:visited {
/*	color: #7d7257;  */
    color: white;
	text-decoration: none;
}
ul#nav li a:hover {
/*	color: #3f3e3a;  */
   color: #bcd;
}
 
ul.side-nav {
	margin: 10px 5px 10px 17px;
	border-top: 1px solid #e9e7e7;
	font-size: .7em;
	text-transform: uppercase;
}
ul.side-nav li {
	margin: 0;
	list-style-type: none;
	padding: 1px 0;
}
ul.side-nav li a {
	display: block;
	border-bottom: 1px solid #e9e7e7;
	margin: 0;
	padding: 10px 0 10px 20px;
	background: url(../images/side-nav-bullet.gif) no-repeat 5px 50%;
}
ul.side-nav li a:link, ul.side-nav li a:visited {
	color: #978f7c;
	text-decoration: none;
}
ul.side-nav li a:hover {
	background: url(../images/side-nav-bullet-light.gif) no-repeat 5px 50% #f6f5f0;
	color: #cac6ba;
}
 
ul#footer-nav {
	font-family: "Times New Roman", serif;
	font-size: .7em;
	text-transform: uppercase;
	margin: 0 0 10px 0;
}
ul#footer-nav li {
	display: inline;
	margin: 0;
	padding: 0 10px 0 10px;
	border-right: 1px solid #958d83;
}
ul#footer-nav li.last {
	border-right: none;
	list-style: none;
	display: inline;
}
ul#footer-nav li a:link, ul#footer-nav li a:visited {
    color: #383838;
/*	color: #5e534f;  */
	text-decoration: none;
}
ul#footer-nav li a:hover {
	color: gray;
}
/* @end */
 
/* @group Headings */
h1 {
    margin: 0 0 0 0;
	font-family: "Times New Roman", serif;
	font-weight: lighter;
	font-size: 2em;
	color: #464031;
}
h2 {
	margin: 0 0 0 0;
	font-family: "Times New Roman", serif;
	font-weight: lighter;
	font-size: 1.6em;
	color: #464031;
}
h3 {
	font-family: "Times New Roman", serif;
	font-size: 1.1em;
	font-weight: lighter;
	color: black;
	margin: 0 0 10px 0;
}
h3.dateline {
	font-size: .8em;
	font-weight: lighter;
	color: #dc3409;
	margin: 0 0 10px 0;
}
h4 {
	margin-left: 25px;
	margin-right: 10px;
	text-transform: uppercase;
	font-weight: lighter;
	margin-bottom: 10px;
	font-family: "Times New Roman", serif;
	color: gray;
}
h5 { }
h6 { }
/* @end */
 
/* @group Text Styles */
div#content-inner {
	font-size: .75em;
	color: #6a6a6a;
	line-height: 1.7em;
	border: 0px solid red;
}
div#content-inner p {
	margin: 0 0 15px 0;
}
p.intro:first-letter {
	font-size: 1.4em;
	letter-spacing: -1px;
}
p.copyright {
	font-size: .65em;
	font-family: "Times New Roman", serif;
/*	color: #797069;  */
    color: #383838;
	text-transform: uppercase;
	margin: 10px 0;
}
 
/* @group Links - link visited hover active */
div#content-inner a:link, div#content-inner a:visited {
	color: #8b7f73;
	text-decoration: none;
	border-bottom: 1px dotted #8b7f73;
}
div#content-inner a:hover {
	color: #706153;
	border-bottom: 1px dotted #706153;
}
 
p.copyright a:link, p.copyright a:visited {
/*	color: #797069;  */
    color: #383838;
	text-decoration: none;
}
p.copyright a:hover {
	color: gray;
}
/* @end */
 
/* @group Misc */
.clear {
   clear: both;
   display: block;
   height: 1px;
   margin: 0;
   overflow: hidden;
   padding: 0;
}

If you look at the page in Firefox, the footer looks good, but in IE6, the footer begins too far to the right.

Can someone see where I have gone wrong?