Footer troubles?

This footer demo does exactly that.

cheers,

gary

thanks a lot! does this work in IE6, 7 and the other modern browsers?

what does the ">" in this part of the code do? I've never seen a lone ">" in css before...

html>body #wrapper { height: auto; /*this undoes the IE hack, hiding it from IE using the child selector*/ }

when i look at this in IE7, the footer is at the very bottom of the page. But if i look at it in Firefox 1.5.0.10, the footer is a little higher than the bottom of the page...

Test it and find out! fwiw it's not likely not to

It's the child combinator, it's part of your basic selector arsenal , it may benefit to check out a few CSS selector tutorials, I would go through this guide for a thorough understanding.
http://css.maxdesign.com.au/selectutorial/

As for FF 1.5 why are you worried we're up to 2.02, if memory serves, hows it look in that browser?

doh, thanks hugo, i didn't realize that my ff was out of date.

but i upgraded, and the footer still doesn't appear at the very bottom of the page when viewed in ff2.0.0.3. it looks like there's still one line of blank space between the footer and the bottom...

Well all I can say is that Gary's demo shows the #footer element stuck to the bottom of the viewport, no gaps. So I would have to assume that there is some discrepancy between your implementation and his example, so you will need to show the code you're working with in order to work out what's happening.

Hugo.

IE improperly collapses the p margin through the AP container and through body and html! AP element margins do not collapse, well, not in modern browsers.

Not tested.

A common fix that works well with floats is to explicitly set the collapsing margin. In this case:
to make IE act like modern browsers;

#footer p {
  margin: 1em 0;  /*the usual default value*/
  }

to simply eliminate the space;

#footer p {
  margin-bottom: 0;
  }

cheers,

gary

when i look at gary's demo page in the latest firefox, the footer isn't at the very bottom of the page (it's one line above the bottom).

Is it not like that for you guys?

Aha! doing what you said killed the space, thanks gary and hugo

hey guys, another question...

I changed the width below from 80% to 100%, because the 80% was making a horizontal list that I have on my page too narrow. But making this change makes the footer appear lower than 100% (i.e. there is a vertical scrollbar, and the content on the page doesn't fill the page vertically).

#main { height: auto; padding: .5em; padding-bottom: 3em; /*Keeps content above footer. Originally used margin, but a bug in Opera7 seemed to add spurious margin, pushing the footer beyond the viewport even with short content. */ width: 80%; margin: 0 auto; }

i'm stumped, why does changing the width mess up the footer's position?

#main { height: auto; padding: .5em; padding-bottom: 3em; /*Keeps content above footer. Originally used margin, but a bug in Opera7 seemed to add spurious margin, pushing the footer beyond the viewport even with short content. */ width: 100%; margin: 0 auto; }

oh ok, i think it's the padding that's causing this, lemme see if i can work this out...

yep, that fixed it, i had to kill the padding in #main.

Thanks a lot guys!

Is it not like that for you guys?
Yes, it is. That's how it should appear. The bottom edge of the p's margin is at the bottom of the container. If you give the #footer div a background color, you will see it is at the bottom, without a gap. IE improperly collapses margins under certain conditions.

See Meyer on Uncollapsing Margins.

cheers,

gary

ok, i ran into a little snag while trying to implement this on my site.

i know that this method relies on the natural flow of items inside of div.main, so if any of the items inside of main are positioned and thus taken out of the flow, this will mess up the footer's position.

i was relying on the z-indexing that is allowed when using positioning to control the layering order of elements on my site. if i take out the positioning in order to make the footer work right, then my layering order gets messed up (since z-indexing only works for positioned elements).

i know that in the absence of positioning/z-indexing, the layering order is defined by the order of appearance in the HTML document. At this point, should i resort to this? Is there any other way to control the layering order other than z-index/positioning or HTML order of appearance?

I seem to have few reasons to use positioned elements. In fact, this footer thing makes me cringe because of them; that and the concept of forcing a full window instead of letting the content decide how tall the page is.

Please give us a link to the page. Positioning has too many gotchas to allow for guessing at the problem cause(.

cheers,

gary

thanks gary, here's the link:

http://www.chicagolandaudioconsultants.com/lessonsandtraining.html

the footer is at the bottom of the window when it first opens, instead of at the bottom of the page, because div.content is positioned. If you take out positioning from div.content, the footer jumps down to the bottom of the page, but then the header, menu and little blue sidebar get messed up because the specified z-index of div.content no longer works without positioning.

thanks again

So, get rid of the AP properties.

div.whiteout {}

#navcontainer {}

#navlist {
text-align: center;
padding: 3px 0;
margin-left: 0;
margin-top: 0px;
border-bottom: 1px solid #778;
font: bold 13px Verdana, Arial, Helvetica, sans-serif;
}

#navlist li
{
list-style: none;
margin: 0;
display: inline;
}

#navlist li a
{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DFF1FA;
text-decoration: none;
}

#navlist li a:link { color: #667; }
#navlist li a:visited { color: #667; }

#navlist li a:hover
{
color: #565669;
background: #B7E1F5;
border-color: #778;
}

#navlist li a#current
{
background: white;
border-bottom: 1px solid white;
}

body
{
	margin: 0;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	
}

div.center {}

div.header {
  background: white url("images/headerbg.jpg") repeat-x 0 0;
  }

#contentmargin
{
	margin-left: 3%;
	margin-top: 107px;
	margin-right: 3%;
	
}

div.content {
  background: url("images/marginrepeater4.jpg") repeat-y 0px 0px transparent;
  }

h3
{
text-align: center;
font-size: 12pt;
}

ul.icanshow
{
margin: 1em 0;
}

html, body, #wrapper {
    min-height: 100%; /*Sets the min height to the
                        height of the viewport.*/
    width: 100%;
    height: 100%; /*Effectively, this is min height
                    for IE5+/Win, since IE wrongly expands
                    an element to enclose its content.
                    This mis-behavior screws up modern  
                    browsers*/
    margin: 0;
    padding: 0;
    }

html>body #wrapper {
    height: auto; /*this undoes the IE hack, hiding it
                    from IE using the child selector*/
    }
	
#wrapper {
    position: absolute;
    top: 0;
    left: 0;
    }

#main {
    height: auto;
    padding: 0;
    padding-bottom: 3em;   /*Keeps content above footer. Originally
                           used margin, but a bug in Opera7 seemed
                           to add spurious margin, pushing the
                           footer beyond the viewport even with
                           short content. */
    width: 100%;
    margin: 0 auto;
    }

#footer {
    background: url("images/marginrepeater4.jpg") repeat-y 0px 0px transparent;
    position: absolute;
    bottom: 0;
    width: 100%;
    margin-left: 0%;
    }
	
#footer p {
  margin-bottom: 0;
  text-align: center;
  }

There is/was no purpose to all your absolute positioning. You will need to move the banner section to precede the nav bar.

cheers,

gary

Hmm the truth dawns, now that we finally see the page!

Why oh why are you positioning the layout using 'Absolute'? is there a specific reason?

Of course the footer is where it is it's where you have said it must be in relationship to the viewport, forget the rest of the layout , it does not figure in things due to your use of postion absolute.

position:absolute *sigh* full height pages *sigh*

thanks a lot, you guys are the best!

can i ask a couple more questions?

how can i make the blue bar that lines the left edge of the screen connect to the blue bar on the left edge of the footer?

also, i'm trying to make the top of the blue bar that lines the left edge of the screen just touch the bottom of the line at the bottom of the navigation list... but the navigation list (which i got from listamatic) has a white space at the bottom that i can't seem to get rid of, and don't understand where it's coming from... do you know a good way to make this happen?

thanks again!!

updated code is here: http://www.chicagolandaudioconsultants.com/lessonsandtraining.html

can i ask a couple more questions?

how can i make the blue bar that lines the left edge of the screen connect to the blue bar on the left edge of the footer?

the gap is being caused by the padding you have on #main remove it.

Is the requirement still for position absolute on the footer? I would remove it and replace with clear:both plus possibly a little padding.

You're probably going to need to re-think things then and move the navlist into .content or put the border on #main something along those lines, have a look and think about where you have things placed.

Move background: url("images/marginrepeater4.jpg") repeat-y 0px 0px transparent;
onto the #main ruleset and then play with things.

Move the blue bar image to #wrapper and alter

#navcontainer {
background-color: white;
padding-top: 5px;}

Hugo is right about the rethink. If you're going to have enough content to push the footer down anyway, there's no need for the shenanigans.

cheers,

gary

wow, it's looking good now!

some pages on this site are going to have content stretching beyond the bottom of the screen, while others aren't, so this footer technique is exactly what i'm looking for =)

from experimenting, it looks like the footer requires position: absolute, or else it won't sit at the bottom of the page in the case where the content inside of main doesn't fill the page vertically.

thanks again for all the help! =D

There is another approach one can take with the footer placing it outside the full height element and using a negative top margin on the footer to pull it back up into the visible viewport, but both methods work, both will require some form of padding of the footer space to prevent the content above slipping behind the footer out of view.