Footer Problem, have tried all of the tutorials.

[mikemiescke]

Hey all, I hate to even post this question. However, I have a problem trying to get my footer to display at the bottom of the page after all content. I have tried all of the tutorials you could search for on google (some get me closer than others) as well as these forums. Currently, I have it fixed to the bottom over top of my content, however I would like to push it below the content, and only show up when scrolled far enough.

I appreciate the help!

http://www.theskillvillegroup.com

Also, since I have been trying many solutions, the code made be sloppy and there is probably some things in there that is not in use.

Code:

@charset “utf-8”;
/* CSS Document */
* {
margin:0;
padding:0;
}
html {
height:100%;
}
body {
background:#FFFFFF;
position:relative;
height: 100%;
}
#wrap {
height: 100%
}
body > #wrap {height: auto; min-height: 100%;}

#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+’px’);
}

#header_left {
display:block;
position:absolute;
top:0;
left:0;
width:50%;
height:300px;
background:url(‘images/expand.jpg’) repeat-x top;
}
#header_right {
display:block;
position:absolute;
top:0;
right:0;
width:50%;
height:300px;
background:url(‘images/expand.jpg’) repeat-x top;
}

#header {
position:relative;
width:752px;
height:300px;
background:url(‘images/header.jpg’);
z-index: 3;
margin:0 auto;
}

#main-box {
color: #fff;
position: absolute;
top:310px;
width:100%;
font-size: 19px;
background: #000000 url(‘images/main-top.jpg’) repeat-x;
}

#quote {
padding: 15px;
background: url(‘images/main-corner.jpg’) no-repeat right bottom;
}

#info {
position: relative;
top: 400px;
text-align: left;
margin-left: 20px;
margin-right: auto;
z-index: -2;
}

#info2 {
position: relative;
top: 400px;
text-align: left;
z-index: -2;
font-family: “Comic Sans MS”, cursive;
font-size: 12px;
}

#navigation {
position: absolute;
padding-top: 242px;
right: 1px;
z-index: 3;

}

[DataDude]

Perhaps assigning a z-index placing the footer beneath the page content would do the trick.

Worth a try.
DD

[blue642]

here is some severely reworked layout.

The reason nothing was working was because of the way you coded the layout structure. You contained divs inside of other divs (when you didn’t need to) which caused you to have to absolutely postion them…

Here is a smooter layout with the same feel as the original, still some problems, but I’m still working on it.
too many changes to explain them but if you have specific questions I’ll try my best to help you understand.

CSS:

Code:

@charset “utf-8”;
/* CSS Document */
* {
margin:0;
padding:0;
}
html {
height:100%;
}
body {
background:#FFFFFF;
position:relative;
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -61px;
width: 752px;
}

#push {
height: 61px;
}

#footer {
height: 61px;
width:100%;
background:url(‘http://www.theskillvillegroup.com/images/expandfooter.jpg’) repeat-x

bottom;
}

#header_left {
display:block;
position:absolute;
top:0;
left:0;
width:50%;
height:300px;

background:url(‘http://www.theskillvillegroup.com/images/expand.jpg’) repeat-x top;
}
#header_right {
display:block;
position:absolute;
top:0;
right:0;
width:50%;
height:300px;

background:url(‘http://www.theskillvillegroup.com/images/expand.jpg’) repeat-x top;
}

#header {
position:relative;
width:752px;
height:300px;

background:url(‘http://www.theskillvillegroup.com/images/header.jpg’);
/* z-index: 3; */
margin:0 auto;
}

#main-box {
color: #fff;
width:100%;
font-size: 19px;
background: #000000 url(‘http://www.theskillvillegroup.com/images/main-top.jpg’)

repeat-x;
}

#quote {
padding: 15px;
background:

url(‘http://www.theskillvillegroup.com/images/main-corner.jpg’) no-repeat right bottom;
}

#info {
margin: 0 auto;
}

#info2 {
position: relative;
top: 400px;
text-align: left;
z-index: -2;
font-family: “Comic Sans MS”, cursive;
font-size: 12px;
}

#navigation {
position: absolute;
padding-top: 242px;
right: 1px;
z-index: 3;

}

/*!!!!!!!!!!! QuickMenu Core CSS [Do Not Modify!] !!!!!!!!!!!!!*/
.qmmc .qmdivider{
display:block;
font-size:1px;
border-width:0px;
border-style:solid;
position:relative;
z-index:1;
}

.qmmc .qmdividery{
float:left;
width:0px;
}

.qmmc .qmtitle{
display:block;
cursor:default;
white-space:nowrap;
position:relative;
z-index:1;
}

.qmclear {
font-size:1px;
height:0px;
width:0px;
clear:left;
line-height:0px;
display:block;
float:none !important;
}
.qmmc {
position:relative;
zoom:1;
z-index:10;
}

.qmmc a, .qmmc li {
float:left;
display:block;
white-space:nowrap;
position:relative;
z-index:1;
}

.qmmc div a, .qmmc ul a, .qmmc ul li {
float:none;
}

.qmsh div a {
float:left;
}

.qmmc div{
visibility:hidden;
position:absolute;
}

.qmmc .qmcbox{
cursor:default;
display:inline-block;
position:relative;
z-index:1;
}

.qmmc .qmcbox a{
display:inline;
}

.qmmc .qmcbox div{
float:none;
position:static;
visibility:inherit;
left:auto;
}

.qmmc li {
z-index:auto;
}

.qmmc ul {
left:-10000px;
position:absolute;
z-index:10;
}

.qmmc, .qmmc ul {
list-style:none;
padding:0px;
margin:0px;
}

.qmmc li a {
float:none;
}

.qmmc li:hover>ul{
left:auto;
}
/*[END-QCC]*/
/*[START-QCC0]*/
#qm0 ul {top:100%;
}
#qm0 ul li:hover>ul{top:0px;left:100%;}/*[END-QCC0]*/

/*!!!!!!!!!!! QuickMenu Styles !!!!!!!!!!!*/

/* QuickMenu 0 */

/*”””””””” (MAIN) Container””””””””*/
#qm0
{
padding:10px;
border-width:0px;
border-style:solid;
border-color:#EEEEEE;
}

/*”””””””” (MAIN) Items””””””””*/
#qm0 a
{
padding:5px 4px 5px 5px;
color:#000000;
font-family:Comic Sans MS;
font-size:12px;
text-decoration:none;
font-weight: bold;
text-align:left;
}

/*”””””””” (SUB) Container””””””””*/
#qm0 div, #qm0 ul
{
padding:10px;
margin:-2px 0px 0px 0px;
background-color:transparent;
border-style:none;
}

/*”””””””” (SUB) Items””””””””*/
#qm0 div a, #qm0 ul a
{
padding:3px 10px 3px 5px;
background-color:transparent;
font-size:11px;
border-width:0px;
border-style:none;
font-weight: normal;
}

/*”””””””” (SUB) Hover State””””””””*/
#qm0 div a:hover
{
background-color:#B7D8FD;
color:#009;
}

/*”””””””” (SUB) Hover State – (duplicated for pure CSS)””””””””*/
#qm0 ul li:hover>a
{
background-color:#B7D8FD;
color:#009;
}

/*”””””””” (SUB) Active State””””””””*/
body #qm0 div .qmactive, body #qm0 div .qmactive:hover
{
background-color:#B7D8FD;
color:#0009;
}

/*”””””””” Individual Titles””””””””*/
#qm0 .qmtitle
{
cursor:default;
padding:3px 0px 3px 4px;
color:#444444;
font-family:arial;
font-size:11px;
font-weight:bold;
}

/*”””””””” Individual Horizontal Dividers””””””””*/
#qm0 .qmdividerx
{
border-top-width:1px;
margin:4px 0px 4px 0px;
border-color:#96C7FD;
}

/*”””””””” Individual Vertical Dividers””””””””*/
#qm0 .qmdividery
{
border-left-width:1px;
height:15px;
margin:4px 2px 0px 2px;
border-color:#AAAAAA;
}

/*”””””””” (main) Rounded Items””””””””*/
#qm0 .qmritem span
{
border-color:#0570E7;
background-color:#D8EEFD;
}

/*”””””””” (main) Rounded Items Content””””””””*/
#qm0 .qmritemcontent
{
padding:0px 0px 0px 4px;
}

/*”””””””” Custom Rule””””””””*/
ul#qm0 ul
{
padding:10px;
margin:-2px 0px 0px 0px;
background-color:#D8EEFD;
border-width:1px;
border-style:solid;
border-color:#0570E7;
}

/*”””””””” Custom Rule””””””””*/
ul#qm0 li:hover > a
{
background-color:#D8EEFD;
}

#feedback {
position:absolute;
position:fixed;
text-indent:-100000px;
top:33%;
width:46px;
height:150px;
/* z-index:4444; */
overflow:hidden;
left:auto !important;
right:0 !important;
margin-left:auto !important;
margin-right:-10px !important;
background: transparent

url(‘http://theskillvillegroup.com/newskill/images/requestinfo.png’) no-repeat 0 0

!important;
}

.profile #content h2 {
padding-bottom:8px;
}

#feedback:hover {
margin-right:-3px !important;
}

#feedbackForm {
padding:30px 10px;
}

#feedbackForm li {
overflow:hidden;
padding-right:30px;
padding-top:10px;
width:515px;
}

#feedbackForm label {
color:#615F62;
float:left;
font-size:16px;
line-height:32px;
padding:0 10px 0 0;
text-align:right;
width:105px;
}

#feedbackForm div {
overflow:hidden;
}

#feedbackForm fieldset {
padding:30px 10px 0 115px;
}

#requestinfo {
position:absolute;
top: 400px;
}

}

Html: (from inside the body):

Code:

• HOME
•  | 
• ACTS
  • BirdZerk!
  • Breakin’ BBoy McCoy
  • Myron Noodleman
  • ZOOperstars!
•  | 
• COMPANY INFO
  • History
  • Contact Info
•  | 
• TESTIMONIALS
  • BirdZerk!
  • Breakin’ BBoy McCoy
  • Myron Noodleman
  • ZOOperstars!
•  | 
• REQUEST INFO
•  

Copyright© The Skillville Group Inc. P.O. Box 36061 • Louisville, KY

40233 USA • 1-800-219-0899

A member of The Skillville Group

Inc.

Request Info

[Author]

Posts