footer not at bottom???

**mlegg** · 11-04-2011, 05:57 PM

On this page I am testing the W3C logos are in the middle of the page, not the bottom. Also the footer is not showing correctly.

What did I do wrong? EDIT: I can't enter the HTML I get error it's too long. I changed the .html file format to .txt and added it as an attachment.

This page is the main page. I want the Star page to mimic this look.

CSS:

Code:

html, body {
padding : 0;
margin : 0;
height : 100%;
background-color : #000000;
background-position : center top;
}
#banner {
height : 120px;
width : 960px;
margin : auto;
background-image : url(images/logo2.jpg), url(images/Banner.gif);
background-position: top left, top right;
background-repeat: no-repeat;
}
#img.source-image {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
}
#container {
position : relative;
width : 960px;
padding : 0;
min-height : 100%;
margin : auto;
font-family : sans-serif;
color : #FFFFFF;
background-color : #000000;
}
#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
	margin:0px;
	list-style:none;
	padding:0px 1px 1px 0px;
	background-color:#F8DC00;
	background-repeat:repeat;
	border-color:#F8DC00;
	border-width:0px;
	border-style:solid;
}
ul.pureCssMenu {
        width:729px;
        padding-left:230px;
 }

ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
	display:block;
	zoom:1;
	float: left;
}
ul.pureCssMenu ul{
	width:210px;
}
ul.pureCssMenu li{
	display:block;
	margin:1px 0px 0px 1px;
	font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
	display:block;
	vertical-align:middle;
	background-color:#F8DC00;
	border-width:0px;
	border-color:#F8DC00;
	border-style:solid;
	text-align:left;
	text-decoration:none;
	padding:5px;
	_padding-left:0;
	font:16px Arial;
	font-weight:bold;
        color: #000000;
	text-decoration:none;
	cursor:pointer;
}
ul.pureCssMenu span{
	overflow:hidden;
}
ul.pureCssMenu li {
	float:left;
}
ul.pureCssMenu ul li {
	float:none;
}
ul.pureCssMenu ul a {
	text-align:left;
	white-space:nowrap;
}
ul.pureCssMenu li.sep{
	text-align:left;
	padding:0px;
	line-height:0;
	height:100%;
}
ul.pureCssMenu li.sep span{
	float:none;	padding-right:0;
	width:3;
	height:100%;
	display:inline-block;
	background-color:#FF6600;	background-image:none;}
ul.pureCssMenu ul li.sep span{
	width:100%;
	height:3;
}
ul.pureCssMenu li:hover{
	position:relative;
}
ul.pureCssMenu li:hover>a{
	background-color:#FFFF00;
	border-color:#FFFF00;
	border-style:solid;
	font:16px Arial;
	font-weight:bold;
        color: #000000;
	text-decoration:none;
}
ul.pureCssMenu li a:hover{
	position:relative;
	background-color:#E45E17;
	border-color:#E45E17;
	border-style:solid;
	font:16px Arial;
	font-weight:bold;
        color: #000000;
	text-decoration:none;
}
ul.pureCssMenu li.dis a {
	color: #AAAAAA !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:5px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def  {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul{display:block}
ul.pureCssMenu span{
	display:block;
	background-image:url(./images/arrv_blue_2.gif);
	background-position:right center;
	background-repeat: no-repeat;
   padding-right:8px;}
ul.pureCssMenu li:hover>a>span{	background-image:url(./images/arrv_white_2.gif);
}
ul.pureCssMenu a:hover span{	_background-image:url(./images/arrv_white_2.gif)}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_blue_2.gif)}
ul.pureCssMenu ul li:hover > a span{	background-image:url(./images/arr_white_2.gif);}
ul.pureCssMenu table a:hover span{background-image:url(./images/arr_white_2.gif)}
ul.pureCssMenu li a.pureCssMenui0{
font:n;
}
ul.pureCssMenu li a.pureCssMenui0:hover{
font:o;
}

div.one {
padding : 50px;
font-family : sans-serif;
font-size : 16px;
color : #FFFFFF;
height : 100%;
}
div.one a:link {
color : #F88017;
text-decoration : underline;
}
div.one a:visited {
color : #F88017;
text-decoration : underline;
}
div.one a:hover {
color : #000000;
background-color : #FFFFFF;
text-decoration : underline;
}
div.one a:active {
color : #F88017;
background-color : #ffffff;
text-decoration : underline;
}
h1 {
padding : 15px;
text-align : center;
}
h3 {
padding : 5px;
}
.centered {
text-align : center;
}
UL.YELLOW {
	list-style-type: disc;
	color: yellow;
}
#footer {
position : absolute;
width : 100%;
left : 0;
bottom : 0;
padding : 5px 0;
font-family : sans-serif;
font-size : 15px;
text-align : center;
background-color : #F8DC00;
color : #000000;
}
#footer a:link {
color : #000000;
text-decoration : underline;
}
#footer a:visited {
color : #000000;
text-decoration : underline;
}
#footer a:hover {
color : #000000;
background-color : #E45E17;
text-decoration : underline;
}
#footer a:active {
color : #000000;
background-color : #FFFFFF;
text-decoration : underline;
}

**mlegg** · 11-04-2011, 07:49 PM

When you look at the HTML please ignore the line

Code:

div class="c2"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Strict" height="31" width="88">   
       &nbsp<img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!"></div>

I took that off of every page. The owner of the business didn't want it there.

**deathbycheese** · 11-04-2011, 09:58 PM

Got a link?

**mlegg** · 11-04-2011, 11:43 PM

I put it at the top where it says this page I am testing.
This is the link to said page: http://www.pscompetitiveedge.com/star2.html

I just use TinyUrl to keep the link shorter

**mlegg** · 11-07-2011, 01:16 AM

it's also happening on this page I just made to test too

http://www.pscompetitiveedge.com/star-test.html

**azoomer** · 11-07-2011, 01:28 AM

Changing the footer css from position: absolute; to position: relative; seems to work when I try it out in firebug.

Code:

#footer {
position : relative;
width : 100%;
left : 0;
bottom : 0;
padding : 5px 0;
font-family : sans-serif;
font-size : 15px;
text-align : center;
background-color : #F8DC00;
color : #000000;
}

give it a shot and see if helps!

**mlegg** · 11-07-2011, 04:33 AM

the relative fixed it and I added margin: 0 auto;
width: 960px; just to make sure

Code:

#footer {
position : relative;
margin: 0 auto;
width: 960px;
bottom : 0;
padding : 5px 0;
font-family : sans-serif;
font-size : 15px;
text-align : center;
background-color : #F8DC00;
color : #000000;
}

sometimes I just don't know why I don't quit when I am tired

**deathbycheese** · 11-07-2011, 05:21 AM

Glad you figured it out. I was just about to ask what the problem was because, upon review, I couldn't see anything wrong.

Thread: footer not at bottom???

Thread Tools

Search Thread

footer not at bottom???

Bookmarks

Bookmarks

Posting Permissions