Sticky Problem with Footer

By the way, I should say what it does in the moment...

ALL work when the page is stretched correctly.

Firefox and IE7 put the body to 100% but then put the Footer underneath that so you have to scroll to see it.

IE6 collapses when there isn't enough content to fill the page.

It's not problems like these that have me confused. It's when I fix these something else goes wrong, like the footer overlaps content or firefox doesn't stretch the container-border etc... each time I solve a problem something else happens and I just can't find the combination for them all to work!

Thanks so much for any help/advise you can offer.

John

Hello
Your problem is because IE6 don`t recognize the propery MinHeight, the solution is with a hack

height: auto!important;
min-height:240px;
height:240px;

Replace those lines in that order in your stylesheet (of course with your right values)

Thank you, I added the code you gave (with 100%) to my container-border as you recommended. Unfortunately while you were right that IE6 now works, Firefox is suddenly the one collapsing! Any ideas?

Sorry, thanks for the help,

J

Ok, I'm off to do other things until tomorrow, I've driven myself in circles with this...

If anyone is able to help, this is where I am up to. They all work without scrolling successfully. The footer is even there!! It's just that all three browsers (meaning it can only be my fault even though I can't see what's wrong), are covering the footer with the background image for container-border.

I'll attach some of the images incase they help...

Thank you all for your help.

John

HTML

TESTING - Home Page

Home

Contact

Help

CSS

html
{
height: 100%;
margin: 0;
padding: 0;
}

body
{
height: 100%;
margin: 0;
padding: 0;
background-image: url(images/background.gif);
background-repeat: repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
color: black;
}

#container-border
{
height: auto!important;
min-height:100%;
height:100%; position: relative;
overflow: hidden;
width: 760px;
margin: 0 auto -31px auto;
background-image: url(images/mainback.gif);
background-repeat: repeat-y;
}

#header
{
background-color: White;
border-bottom: solid 1px #9798B4;
width: 750px;
height: 80px;
margin: 0 0 0 5px;
padding: 0;
}

#header img
{
float: left;
margin: 5px 0 0 5px;
border: none;
text-align: left;
}

#menu-bar
{
float: right;
border: none;
width: 300px;
margin: 0 5px 0 0;
}

.menu-option
{
float: left;
width: 100px;
padding: 0;
margin: 0;
}

.menu-option img
{
width: 15px;
height: 15px;
text-align: left;
margin: 0 10px 0 0;
padding: 0;
border: none;
}

.menu-option a
{
margin-left: 10px;
font-size: small;
font-family: Verdana;
}

.menu-option a:link
{
color: Black;
text-decoration: none;
}

.menu-option a:visited
{
color: Black;
text-decoration: none;
}

.menu-option a:hover
{
color: Red;
text-decoration: underline;
}

#breadcrumb-bar
{
width: 750px;
height: 21px;
margin-left: 5px;
padding-top: 4px;
background-image: url(images/bar.gif);
background-repeat: repeat-x;
}

.breadcrumbs
{
padding-left: 7px;
}

#navmenu
{
float: left;
display: inline;
margin-left: 5px;
width: 180px;
}

#content
{
float: right;
display:inline;
margin-right: 10px;
width: 560px;
}

#push, #footer
{
height: 30px;
}

#footer
{
margin: 0 auto;
padding: 0;
background-color: White;
background-image: url(images/footerborder.gif);
background-repeat: repeat-y;
width: 760px;
border-top: dashed 1px gray;
}

#footer p
{
font-family: Verdana;
font-size: x-small;
color: Gray;
margin: 10px auto 0 10px;
}

h1
{
font-size: 14px;
color: #00294B;
padding: 0;
}

I have maked the changes in css and works in IE6 and firefox properly
http://miguelmanchego.com/samples/sticky/

by the way you have errors in your code using upercases and lowercases. first check if my page works

Apologies,

First of all, when I input the HTML code above in to the Validator at w3c.org it says it is correct, no errors.

Secondly, thank you for helping me out with your example, but what I was hoping for was not to need to scroll down. In all 3 browsers the footer now loads just below the viewers window, and I hoped that on pages where there wasn't enough content, it would actually sit inside their window and no scrolling would be required.

Thank you for your help, it is appreciated,

John

First: I`m not talking about W3C validation, the problem is linux servers recognize uppercases and lowercases, firefox is the same. When I uploaded example page that wasn`t working for a problem with file names. My recomendation is use all in lowercases.

Second: you have a div called "container-border" height:100% and "footer" height:30px, that DIV isn`t in container DIV, the scrollbar is because your page have height 100%+30px. The solution is simple put your footer in your container div

Yep, I get the 100% + 30px thing meaning scroll bars. The tutorials I read (http://www.themaninblue.com/experiment/footerStickAlt/) said that the Footer SHOULD be outside the containing DIV. That's why if you look at my original code you'll see that I don't so much have the scroll bar problems anymore... I just get the problem of the container-border overwriting the footer, or at least the background image doing this.

Do you remember the Crystal Maze? A gameshow presented by Richard O'Brian where contestants had to solve puzzles in rooms in enough time to win a Crystal. Well I remember one with a series of buttons. Each button would turn some light bulbs on and others off. To win the crystals, he had to work out which buttons to press in what order to turn all light bulbs off...

That's what this reminds me of! Don't get me wrong however, I'm very grateful for your help,

John

P.S. Thanks for the tips about capitals. Will sort these out before going live!

Ok, I will try and get a live version up over the weekend to demonstrate my problem a little better but in the mean time, ANY help would be appreciated.

Where I'm up to : Having discovered the Push div as recommended by some tutorials was only the width of the menu, I stretched it to be the width of the container (and kept it the height of the footer). I then of course discovered it had nothing pushing it to the bottom so clearly I'm following a tutorial incorrectly.

So the problems I'm currently facing is in the IE browsers, the page stretchs vertically 100% but the footer is then added on BELOW that, and in Firefox, it's not stretching vertically beyond the content.

I'm off for the weekend so I'm hoping something my hit me over the weekend but as I say, if any of you have ideas, please share them.

Thanks so much,

John

burlster, burlster, burlster my suggestion is read again your tutorial because that is working well. (your version was incomplete)

I have uploaded the new version working without scrollbars that works in IE6, IE7 and firefox

http://miguelmanchego.com/samples/sticky/

Thank you Logus, it's so close to working now!

I have but one more problem.

In IE6, the page just doesn't display any content below the initial screen. In other words, if there is more content then screen space it gets cropped. When I took out overflow: hidden, from container-border that fixed it but then for some reason Firefox doesn't repeat my background image all the way down the page. I have included a screen shot of this.

So the only problem I can find left is EITHER (with overflow) that IE6 crops more then the instantly viewable content or (without overflow) Firefox doesn't keep repeating the background image. Could you help me fix this please?

Thanks for all your help,

John

Yeah I`m agree with you the problem is overflow:hidden, but you require that line to use two float DIVs in one container DIV. To solve that I have added a line




and I have deleted overflow:hidden.

You can check new change at
http://miguelmanchego.com/samples/sticky/

Don`t forget refresh two times to see changes

Burlster, TheManInBlue is correct, put the footer outside the container with min-height:100%. That gets it to the bottom of the page. Now the trick is to get it back up into that 100%. You do that by using negative margins equal to the footer height. That negative margin can be applied as margin-top on the footer or as margin-bottom on the min-height:100% element (but only on one). Also add some padding-bottom on the elements inside the min-height:100% item to ensure they leave space at the bottom for the footer.

So the simple (outer page) structure is

html, body, #page {height: 100%; } #page-wrap { min-height: 100%; } /* IE6 needs height: 100%; style rule for this element */ #content { padding-bottom: 40px; } #footer { margin-top: -40px; height: 40px; } /* adjust both in tandem, margin-top value must also take into account, padding-top, border-top, padding-bottom and border-bottom */

...

One thing to note. If you give #page-wrap or #content position:relative (quite common if there are elements of the page design within those containers which require positioning) then you must also give #footer position:relative. Its probably worthwhile to automatically give #footer position:relative so that you don't spend hours searching when the footer suddenly disappears. (Positioned items appear above non-positioned items and because the footer is occupying the same space occupied by #content and #page-wrap they would appear above it. Giving the footer position, means it goes above again because it is now also positioned and later items in the source appear above earlier items).

Another thing to note. All the DIVs mentioned in that structure should (most probably) by given "hasLayout" for IE6. I do that by having an IE6 stylesheet which always includes div { zoom: 1; }

edit, correct closing DIV comments in html

Small
http://miguelmanchego.com/samples/sticky/index.html

Large
http://miguelmanchego.com/samples/sticky/index2.html

Thank you both!

Chris, I understand the concept much better now thanks, and Logus your example worked perfectly. When I tried to copy it across to my actual site however, despite working perfectly on the example you kindly produced for me, Firefox is collapsing and not stretching anymore.

However, the only difference between the example you kindly produced and the actual site I'm working on is the ASP produced by Microsoft Visual Web Developer so I'm just going to blame that. Coincidence the only difference is Microsoft produced code and it works perfectly in both IEs? I think not!

Not to worry, once the site is produced and live, I can re-address the problem, and I will have a live version so we might hopefully once again be able to re-address the problem.

Thanks so much for your help,

John

I have footerStickAlt design for my page. Been trying to implement a new page with a big div (gonna be flash video) but it's causing the footer to bounce from bottom of page to middle of page where the big div seems to be ignored. The thing that is really aggravating is that if you load ctrl-refresh page again, it goes back to bottom, then ctrl-refresh load page again it pops up to wrong spot. Inconsistent like that. Do it 20 times and it pops up like half the time? But it gets stranger. When the footer pops up (those page loads when IE7 is ignoring the big div height) just adjusting the size of window causes the footer to go back to bottom where it belongs. This type of buggy inconsistent behavior is not occurring in Firefox. It's really aggravating me.

I've seen this before on my main index page where I used to have a div (an advertisement) which was also confusing the IE7 just as it is now. So I removed that div on index page to evade the issue. But I want to get to root cause now and fix the situation. I'm not well versed in CSS, especially not the strange bugs like this that only occur on IE7 and only on first page load. Seems it's something to do with IE7 not interpreting the page at load, but it understands when I modify the window size it fixes itself.

Please assist o smart computer gods!

looks like I found it. had been using some vertical margins inside my content, not expecting that to cause the bug in IE? Set them to 0px, and suddenly the bug in IE7 stopped happening. So then defined the margin for those "inner" div elements a slightly different way. Again, IE7 is fixed. So it has something to do with how I was writing those margin. Must be my lack of understanding of proper CSS syntax? Perhaps how IE7 reads my code? Kinda strange.

Thank-you to this post by Chris_S
http://csscreator.com/node/27822

*******************************
I don't know that tutorial.

Posted: Fri, 2008-01-18 11:39

I don't know that tutorial. There is a good explanation in our "How To" section, entitled 100% Height (iirc). "TheManInBlue" also does a good tutorial called "FooterStickAlt". These two recent threads might also help, thread, thread.

Essenstially its really simple.

page container should have min-height:100%. Its parents, normally only HTML and BODY, should have height:100%. None of these three elements should have any vertical margins, padding or border. The footer sits outside the page container, immediately after it in the source. The footer has a negative margin-top equal to the space it requires (its height + any vertical padding and borders).

Inside the page container, put your content. If you have floated columns use a container for them and give that container overflow:hidden.

The last element in the page container should be given padding-bottom equal to the space required for the footer.

This does three things:
- page container fills the screen
- footer pulls itself up into the space at the bottom of page container.
- content container leaves space at the bottom to ensure it can't overlap the footer
**********************************

I just want to say that I love this forum. On the few occasions I've been stuck, I've come here and found the answers I need. This post helped me out. Thanks to all who contributed. :thumbsup:

Ironically, I never quite got round to fixing the problem I opened this thread with, but because of the messy code I'm dealing with owing to the use of auto-generated ASP produced by Visual Web Developer Express I decided I'd rather leave it then admit I have unvalidated code. Haha, my bad!

Still, I am glad it helped .