Positioning footers with CSS Support Product Page

PROBLEMS

This topic was archived

Potential Problem

Robert Breitman

Reported 16 May 2005 13:44:35

has this problem

I also have this problem

16 May 2005 13:44:35 Robert Breitman posted:

I have tried to follow the directions for placing a footer at the bottom of the page using CSS. The problem that I encounter is that the footer appears at the bottom when the screen is big enough to contain all the content. However when the screen or window is not big enough the footer is positioned at the bottom of the initial open window and then when scrolling is in the middle of the text.

<b>This is the CSS file:</b>

<pre id=code><font face=courier size=2 id=code>
/***********************************************/
/* emx_nav_left.css */
/* Use with template Halo_leftNav.html */
/***********************************************/

/***********************************************/
/* HTML tag styles */
/***********************************************/
html, body, #contents {
min-height: 98%;
width: 100%;
height: 98%;
}

html>body, html>body #contents{
height:auto;
}

body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
background: #cccccc url("images/bg_grad.jpg"

fixed;
}

/******* hyperlink and anchor tag styles *******/

a:link, a:visited{
color: #005FA9;
text-decoration: none;
}

a:hover{
text-decoration: underline;
}

/************** header tag styles **************/

h1{
font: bold 120% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}

h2{
font: bold 114% Arial,sans-serif;
color: #006699;
margin: 0px;
padding: 0px;
}

h3{
font: bold 100% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}

h4{
font: 100% Arial,sans-serif;
color: #333333;
margin: 0px;
padding: 0px;
}

h5{
font: 100% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}

/*************** list tag styles ***************/

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

/********* form and related tag styles *********/

form {
margin: 0;
padding: 0;
}

label{
font: bold 1em Arial,sans-serif;
color: #334d55;
}

input{
font-family: Arial,sans-serif;
}

/***********************************************/
/* Layout Divs */
/***********************************************/
#pagecell1{
position:absolute;
top: 112px;
left: 2%;
right: 2%;
width:95.6%;
height:70%;
background-color: #ffffff;
}

#tl {
position:absolute;
top: -1px;
left: -1px;
margin: 0px;
padding: 0px;
z-index: 100;
}

#tr {
position:absolute;
top: -1px;
right: -1px;
margin: 0px;
padding: 0px;
z-index: 100;
}

#masthead{
position: absolute;
top: 0px;
left: 2%;
right: 2%;
width:95.6%;

}

#pageNav{
float: left;
width:200px;
padding: 0px;
background-color: #F5f7f7;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
font: small Verdana,sans-serif;
}

#content{
padding: 0px 10px 0px 0px;
margin:0px 0px 0px 200px;
border-left: 1px solid #ccd2d2;
}

/***********************************************/
/* Component Divs */
/***********************************************/
#siteName{
margin: 0px;
padding: 16px 0px 8px 0px;
color: #ffffff;
font-weight: normal;
}

/************** utility styles *****************/

#utility{
font: 75% Verdana,sans-serif;
position: absolute;
top: 16px;
right: 0px;
color: #919999;
}

#utility a{
color: #ffffff;
}

#utility a:hover{
text-decoration: underline;
}

/************** pageName styles ****************/

#pageName{
padding: 0px 0px 14px 10px;
margin: 0px;
border-bottom:1px solid #ccd2d2;
}

#pageName h2{
font: bold 175% Arial,sans-serif;
color: #000000;
margin:0px;
padding: 0px;
}

#pageName img{
position: absolute;
top: 0px;
right: 6px;
padding: 0px;
margin: 0px;
}

/************* globalNav styles ****************/

#globalNav{
position: relative;
width: 100%;
min-width: 640px;
height: 32px;
color: #cccccc;
padding: 0px;
margin: 0px;
background-image: url("glbnav_background.gif"

;
}

#globalNav img{
margin-bottom: -4px;

}

#gnl {
position: absolute;
top: 0px;
left:0px;
}

#gnr {
position: absolute;
top: 0px;
right:0px;
}

#globalLink{
position: absolute;
top: 6px;
height: 22px;
min-width: 640px;
padding: 0px;
margin: 0px;
left: 10px;
z-index: 100;
}

a.glink, a.glink:visited{
font-size: small;
color: #000000;
font-weight: bold;
margin: 0px;
padding: 2px 5px 4px 5px;
border-right: 1px solid #8FB8BC;
}

a.glink:hover{
background-image: url("glblnav_selected.gif"

;
text-decoration: none;
}

.skipLinks {display: none;}

/************ subglobalNav styles **************/

.subglobalNav{
position: absolute;
top: 84px;
left: 0px;
/*width: 100%;*/
min-width: 640px;
height: 20px;
padding: 0px 0px 0px 10px;
visibility: hidden;
color: #ffffff;
}

.subglobalNav a:link, .subglobalNav a:visited {
font-size: 80%;
color: #ffffff;
}

.subglobalNav a:hover{
color: #cccccc;
}

/*************** search styles *****************/

#search{
position: absolute;
top: 5px;
right: 10px;
z-index: 101;
}

#search input{
font-size: 70%;
margin: 0px 0px 0px 10px;
}

#search a:link, #search a:visited {
font-size: 80%;
font-weight: bold;

}

#search a:hover{
margin: 0px;
}

/************* breadCrumb styles ***************/

#breadCrumb{
padding: 5px 0px 5px 10px;
font: small Verdana,sans-serif;
color: #AAAAAA;
}

#breadCrumb a{
color: #AAAAAA;
}

#breadCrumb a:hover{
color: #005FA9;
text-decoration: underline;
}

/************** feature styles *****************/

.feature{
padding: 0px 0px 10px 10px;
font-size: 80%;
min-height: 200px;
height: 200px;
}
html>body .feature {height: auto;}

.feature h3{
font: bold 175% Arial,sans-serif;
color: #000000;
padding: 30px 0px 5px 0px;
}

.feature img{
float: left;
padding: 10px 10px 10px 0px;
}

/*************** story styles ******************/

.story {
padding: 10px 0px 0px 10px;
font-size: 80%;
}

.story h3{
font: bold 125% Arial,sans-serif;
color: #000000;
}

.story p {
padding: 0px 0px 10px 0px;
}

.story a.capsule{
font: bold 1em Arial,sans-serif;
color: #005FA9;
display:block;
padding-bottom: 5px;
}

.story a.capsule:hover{
text-decoration: underline;
}

td.storyLeft{
padding-right: 12px;
}

/************** siteInfo styles ****************/

#siteInfo{
clear: both;
border-top: 1px solid #cccccc;
font-size: small;
color: #000000;
padding: 10px 10px 10px 10px;
margin-top: 0px;
position: absolute;
width: 96%;
bottom: 0px;
}

#siteInfo img{
padding: 4px 4px 4px 0px;
vertical-align: middle;
}

/************ sectionLinks styles **************/

#sectionLinks{
margin: 0px;
padding: 0px;

}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
border-bottom: 1px solid #cccccc;
}

#sectionLinks a:link, #sectionLinks a:visited {
display: block;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #cccccc;
background-image: url("bg_nav.jpg"

;
font-weight: bold;
padding: 3px 0px 3px 10px;
color: #21536A;
}

#sectionLinks a:hover{
border-top: 1px solid #cccccc;
background-color: #DDEEFF;
background-image: none;
font-weight: bold;
text-decoration: none;
}

/************* relatedLinks styles **************/

.relatedLinks{
margin: 0px;
padding: 0px 0px 10px 10px;
border-bottom: 1px solid #cccccc;
}

.relatedLinks h3{
padding: 10px 0px 2px 0px;
}

.relatedLinks a{
display: block;
}

/**************** advert styles *****************/

#advert{
padding: 10px;
}

#advert img{
display: block;
}

/********************* end **********************/
#contents {
position: absolute;
left: 0px;
top: 0px;
}

.flabel
{
font-size: 9px;
font-weight: bold;
}

<b> here is the page (companyweb.netspace25.com/r+t_holdings/index.htm) </b>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link rel="stylesheet" href="emx_nav_left.css" type="text/css">
<script type="text/javascript">
<!--
var time = 3000;
var numofitems = 6;

//menu constructor
function menu(allitems,thisitem,startstate){
callname= "gl"+thisitem;
divname="subglobal"+thisitem;
this.numberofmenuitems = 7;
this.caller = document.getElementById(callname);
this.thediv = document.getElementById(divname);
this.thediv.style.visibility = startstate;
}

//menu methods
function ehandler(event,theobj){
for (var i=1; i<= theobj.numberofmenuitems; i++){
var shutdiv =eval( "menuitem"+i+".thediv"

;
shutdiv.style.visibility="hidden";
}
theobj.thediv.style.visibility="visible";
}

function closesubnav(event){
if ((event.clientY <48)||(event.clientY > 107)){
for (var i=1; i<= numofitems; i++){
var shutdiv =eval('menuitem'+i+'.thediv');
shutdiv.style.visibility='hidden';
}
}
}
// -->
</script>
</head>
<body onmousemove="closesubnav(event);">
<div id="contents">

<div id="masthead">
<h1 id="siteName">State Name       Call NOW 888-888-8888</h1>
<div id="utility">
<a href="#">Contact Us </a> | <a href="#">Newsletter Sign Up </a> | <a href="#">Home</a>
</div>
<div id="globalNav">
<img alt="" src="gblnav_left.gif" height="32" width="4" id="gnl"> <img alt="" src="glbnav_right.gif" height="32" width="4" id="gnr">
<div id="globalLink">
<a href="#" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">Selling</a><a href="#" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">Buying</a><a href="#" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">Financing</a><a href="#" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);">Testimonials</a><a href="#" id="gl5" class="glink" onmouseover="ehandler(event,menuitem5);">About Us </a> <a href="#" id="gl6" class="glink" onmouseover="ehandler(event,menuitem6);">Links </a> <a href="#" id="gl7" class="glink" onmouseover="ehandler(event,menuitem7);">Search Another State </a>
</div>

</div>

<div id="subglobal1" class="subglobalNav">
<a href="#">Find A Seller's Agent</a> | <a href="#">Search MLS</a>
</div>
<div id="subglobal2" class="subglobalNav">
<a href="#">Find A Buyer's Agent</a> | <a href="#">Search MLS</a> | <a href="#">Local Facts</a> | <a href="#">Featured Homes</a>
</div>
<div id="subglobal3" class="subglobalNav">
<a href="#">What's a Mortgage</a> | <a href="#">Types of Mortgages</a> | <a href="#">About Interest Rates</a> | <a href="#">Qualifying for a Loan</a> | <a href="#">Mortgage Application</a>
</div>
<div id="subglobal4" class="subglobalNav">
<a href="#">Buyers</a> | <a href="#">Sellers</a> | <a href="#">Realtors</a>
</div>
<div id="subglobal5" class="subglobalNav">
<a href="#">Experience</a> | <a href="#">Value</a> | <a href="#">Affiliations</a>
</div>
<div id="subglobal6" class="subglobalNav">
<a href="#">Community</a> | <a href="#">Weather</a> | <a href="#">Schools</a>
</div>
<div id="subglobal7" class="subglobalNav">
<a href="#"></a>
</div>
<div id="subglobal8" class="subglobalNav">
<a href="#">subglobal8 link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8
link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8
link</a> | <a href="#">subglobal8 link</a>
</div>
</div>

<div id="pagecell1">

<img alt="" src="tl_curve_white.gif" height="6" width="6" id="tl"> <img alt="" src="tr_curve_white.gif" height="6" width="6" id="tr">
<div id="pageNav">
<div id="advert">
<img src="" alt="" width="180" height="120" /> Hot Stuff goes here.
</div>
</div>
<div id="content">
<div class="feature">
<img src="" alt="" width="280" height="200">
<h3>Feature Title </h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.
Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum
facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras
quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla
urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque
a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.
</p>
</div>
<div class="story">
<h3>Story Title</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.
Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum
facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras
quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla
urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque
a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.
</p>
</div>
</div>
</div>

<br>
<script type="text/javascript">
<!--
var menuitem1 = new menu(7,1,"hidden"

;
var menuitem2 = new menu(7,2,"hidden"

;
var menuitem3 = new menu(7,3,"hidden"

;
var menuitem4 = new menu(7,4,"hidden"

;
var menuitem5 = new menu(7,5,"hidden"

;
var menuitem6 = new menu(7,6,"hidden"

;
var menuitem7 = new menu(7,7,"hidden"

;
// -->
</script>
<div id="siteInfo">
<p><a href="#">Realtor Partnerships </a> | <a href="#">Lender Partnerships </a> | <a href="#">Site
Map</a> | <a href="#">Privacy Policy</a> | <a href="#">Contact Us</a>
<br>Copyright ©2005
R&T Holdings. All rights reserved. </p>
</div>
</div>
</body>
</html>
</font id=code></pre id=code>

Thank you.

Positioning footers with CSS Support Product Page

PROBLEMS

Potential Problem

Reply to this topic