Please assist oldie html guy with newbie css learning cycle?

[BobMCT]

OK all you css guru's out there. Please help me "understand" what I (and I am sure many others) are missing on this rather simple page layout. Below I've posted the content of my working .css file and a code snippet of some output. What is occuring is that the page footing is NOT where it should be on this particular page (it is on all others). My guess would be in the use of the "absolute" directive in the css for the footer. But only YOU GUYS will be able to tell.

In more detail, in this typical example of an account update page there is a large number of fields being displayed all included within a fieldset that is encompassing it all very well. However, the horizontal line and the page closing copyright,etc is occuring about 2/3's of the way down the page on this page only. Can someone please advise how one goes about "floating the footing BELOW the lowest page output BUT no higher than a specified minimum for those pages that have very short or little output? This method would maintain a consistent page layout/appearance.

Your learned advice will be GREATLY appreciated.

Thanks,

Bob


ps: code samples follow

====content of my css module====

/* Main Site Declarations */
html, body {
height: 100%;
margin: 0;
padding: 0;
background: #ffffff
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
color: #000000;
}
/*************************************************************************/
// Common Overall Page Container
#container {
position: relative;
min-height: 100%;
}
/*************************************************************************/
// Common Page Heading Declarations
#heading {
text-align: center;
color: #00b600;
font-weight: bold;
font-style: italic;
}
/*************************************************************************/
#sub-1 {
font-size: 30px;
}
/*************************************************************************/
#sub-2 {
font-size: 20px;
}
/**************************************************************************/
// Classes Required for Left Side Vertical Menu #2 */
/**************************************************************************/
#col {
width: 20%;
float: left;
}
/*************************************************************************/
#main {
width: 80%;
float: left;
}
/*************************************************************************/
#nav {
margin: 0;
margin-left: 2px;
padding: 0;
list-style-type: none;
}
/*************************************************************************/
#nav a {
display: block;
background-color: #00b600;
width: 120px;
line-height: 25px;
margin: 0;
padding: 0;
font-family: verdana, arial, helvetic, san-serif;
font-size: 8pt;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #ffffff;
border: 1px solid #000000;
}
/*************************************************************************/
#nav a:hover {
color: #00b600;
background-color: #ffffff;
}
/*************************************************************************/
#nav a:active {
color: #CF0;
background-color: #0F3;
}
/*************************************************************************/
// Common Page Footing Declarations
#footing {
position: absolute;
bottom: 0;
font-size: x-small;
text-align: center;
width: 100%;
}
/*************************************************************************/
// Central Part of Page Declarations
.Page_Content_10 {
font-size: 13px;
text-align: center;
margin-top: 10%;
width: auto;
margin-left: auto;
margin-right: auto;
}
/*************************************************************************/
.Page_Content_0 {
font-size: 13px;
text-align: center;
margin-top: 1%;
width: auto;
margin-left: auto;
margin-right: auto;
}
/*************************************************************************/
.prompt {
text-align: left;
width: 20em;
margin-left: 18%;
margin-right: auto;
}
/*************************************************************************/
.data-entry {
text-align: center;
width: auto;
margin-left: auto;
margin-right: auto;
}
/*************************************************************************/
.red {
color: #ff0000;
font-weight: bold;
}
/*************************************************************************/
.bar2 {
border-top: 1px solid #000000;
}
/**************************************************************************/
// Submit Button Definitions
.button {
background-color: #00b600;
border: 1px solid #000000;
font-family: verdana, arial, helvetic, san-serif;
font-size: 8pt;
text-align: center;
text-decoration: none;
color: #ffffff;
padding: 2px;
}
/**************************************************************************/

====snippets of generated output=====

<body>
<div id="container">
<!-- Page Heading Section -->
<div id="heading">
<span id="sub-1">blah blah blah</span>
<span id="sub-2">&nbsp;-&nbsp;more blah</span>
<hr class="bar2" />
</div>
<!-- End of Page Heading Section -->

<!-- Start of Tabbed Navigation Menu -->
<br />
<!-- Setup TWO Column Basic Page Layout -->
<div id="col">
<!-- Setup Left Side Button Menu -->
<ul id="nav">
<li><a href="$PHP_SELF."?s=1\">item 1</a></li>
<li><a href="$PHP_SELF."?s=2\">item 2</a></li>
<li><a href="$PHP_SELF."?s=3\">item 3</a></li>
<li><a href="$PHP_SELF."?s=4\">item 4</a></li>
<li><a href="$PHP_SELF."?s=5\">item 5</a></li>
</ul>
</div>
<!-- End of Tabbed Navigation Menu -->
<!-- Second Column is General Page Content Area -->
<div id="main">

<!-- Main Content Section -->
<div class="Page_Content_0">
<div class="data-entry">
<fieldset><legend>Update Information</legend>
<form action="$PHP_SELF?s=2" method="post">
<table border="0" cellpadding="0" align="center">
<tr><td colspan="2" align="left"><b>demographic information</b></td></tr>
<!-- First Field Area -->
<tr><td align="left">
First Name:</td><td align="left">
<input name="_fname" type="text" size="20" maxlength="20" value="$_fname" />$_f1
</td></tr>
<!-- Second Field Area -->
<tr><td align="left">
Last Name:</td><td align="left">
<input name="_lname" type="text" size="20" maxlength="20" value="$_lname" />$_f2
</td></tr>
<!-- Third Field .etc, etc, etc -->
</table><br />
<input name="_BTN1" type="submit" value="Submit" />
<input name="_BTN1" type="submit" value="Return" />
<br /><br />
<span class="red">$_eMsg</span><br /><br />
<input name="_Huserid" type="hidden" value="$_userid" />
<input name="_dba" type="hidden" value="$_dba" />
</form>
</fieldset>
</div>
</div>
<!-- End of Info Section -->

<!-- End of General Page Content Area -->
</div>

<!-- Page Footing Section -->
<div id="footing">
<hr />
Copyright &copy; 2006&nbsp;
Blah Blah Blah, LLC - all rights reserved
<!-- End of Footing Section -->
</div>
</div>

</body>

 

[JillC]

Hi Bob,

I copied your code into Dreamweaver and found that it baulked at lines like
// Common Page Footing Declarations

This should be commented out like
/* Common Page Footing Declarations */

Then I replaced the code under that heading to:
#footing {
background-color: #CCFFFF;
clear: both;
}

This seems to work. I just used a colour to see where it was more clearly.

 

[BillyRayPreachersSon]

Yes - some browsers will also stop as soon as they hit an erroneous comment.

CSS comments should only be the multi-line style, i.e

/* ... valid comment ... */

HTML and single-line style comments are not valid, AFAIK:

// ... invalid comment ...

<!-- ... invalid comment ... -->

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]