There is something wrong with the design of my CSS template. This template is supposed to serve basis for all the pages on a web site by allowing me to control the legth of individual pages using classes with page-specific mark-up. The logic I'm using works fine on the one page and does not work for the next. This is the basic idea:
I've posted an example here (the 'index.html' and 'about_us.html' pages are the only ones meant to work; use links at bottom of page):
http://www.ufpartners.com/mockups/index.htmlThis is what I'm trying to do:
-------BODY
-------------CONTAINER
--------------------------
-CANVAS
-------------FOOTER
As you can see, the footer is not working on the about pages as it does on the index page. This is the significant code:
.pg_index {height: 870px;}
.pg_aboutus {height: 1070px;}
.return { text-align: left; margin: 0; display: block; }
#container { width: 760px; margin: 0 auto; text-align: left; position: relative;
border: solid 1px black; visibility: visible; background-color:#FFFFFF; z-index: 1; }
#canvas {top:1px; left:1px; /*IE6 hack*/ width: 760px; top: 285px;
position: absolute; visibility: visible; z-index: 10; margin: 0 auto; }
.cnv_index {height: 580px;}
.cnv_aboutus {height: 780px;}
#footer { width: 760px; height: 200px; margin: 0 auto; text-align: left; position: relative;
z-index: 1; visibility: visible; }
This is the CSS file in its entirety (most of it is unused at this point):
#footer p { margin: 20px 0 35px 10px;}
#footer img { margin-left: 10px; }
h1 { color: #000000; font-size: 13pt; margin: 0.4em 0;
border-bottom: 1px solid #CC0033; padding-bottom: 6px; }
.inline_red {color:#CC0033;}
a { padding: 3px 4px; color: white; text-decoration: none; font-weight: 900;
font-family: Arial, Helvetica, sans-serif; font-size: 1em;; }
a:hover { background-color:#CC0033; }
a:active { color: #CC0033; background-color: white;}
body { vertical-align: middle; background-image: url(../images/bkgd_horizfa
de.gif);
background-repeat: repeat-x;}
.class { }
.emphasis { font-weight: 600; font-style: italic; }
.inquotes { font-weight: 500; font-style: italic; }
.maintext { color: #000000; font-size: .85em; font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 1.12em; text-align: left; letter-spacing: 0.09em;
overflow: auto; padding-right: 10px; }
.maintext img.portrait_rt { position: relative; top: 15px; float: right;
margin: 5px 5px 15px 15px; border-color: #909090; border-width: 2px; }
.navlist li /* Container for site navigation links. */ { color: gray; font-size: 12pt;
line-height: 1em; padding-right: 5px; list-style-type: none;
list-style-image: none; display: inline; }
.navlist li a { color: #909090; font-weight: 600;
text-decoration: none; padding: 2px 4px; }
.navlist li a { padding: 3px 4px; color: white; text-decoration: none; font-weight: 900;
font-family: Arial, Helvetica, sans-serif; font-size: 1em;; }
.navlist li a:hover { background-color:#CC0033; }
.navlist li a:active { color: #CC0033; background-color: white;}
.navlistbox img { float: left; margin-top: 0; margin-left: 20px; }
.navlistbox ul /* Holds the navlist */ { font-size: 0.95em;
font-family: Verdana, Arial, Helvetica, sans-serif; margin-left: 20px; }
.pg_index {height: 870px;}
.pg_aboutus {height: 1070px;}
.return { text-align: left; margin: 0; display: block; }
.statement { color: #6a6a6a; font-size: 1em;
font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;
font-weight: 600; font-style: italic; line-height: 1.5; }
.subnav { border: solid 2px #909090; }
#canvas {top:1px; left:1px; /*IE6 hack*/ width: 760px; top: 285px;
position: absolute; visibility: visible; z-index: 10; margin: 0 auto; }
.cnv_index {height: 580px;}
.cnv_aboutus {height: 780px;}
/* */
#container { width: 760px; margin: 0 auto; text-align: left; position: relative;
border: solid 1px black; visibility: visible; background-color:#FFFFFF; z-index: 1; }
#footer { width: 760px; height: 200px; margin: 0 auto; text-align: left; position: relative;
z-index: 1; visibility: visible; }
