I am using the stick footer for quite some time, but somehow can’t I get the footer to stick at the bottom at the moment. I made a test layout wher you can see the html and css. You can find the page here. I am looking to long to it I quess. Does someone see what I am doing wrong. Thank you in advance!!
Looks like it’s working to me. And all the necessary rules seem to be in place. Alternatively you can try your hand at my CSS3 versions http://www.visibilityinherit.com/code/css3-sticky-footer.php
Hi Eric. I get a scrollbar all the time. No matter in which browser I try. (FF, Chrome, IE). When I take the height (30px) out of the header it works but then the background from the header isn’t visible. When instead of the height I add overflow: hidden to the header the same problem with the scrollbar appears
remove the min-width: 1020px; on the body then
Hi Erik. Just did so. I even took the pseudo classes out to test, but no result or what so ever. I really don’t know what is causing this suddenly?
are you getting a horizontal scroll bar or vertical scroll bar? What size screen? What browser?
I get a vertical scroll. Like I said I tried FF, Chrome and IE.
Screen size is a 17 inch widescreen on my laptop.
Edit: just added overflow: hidden to the body. The scrollbar is gone but then the footer doesn’t get the right height of 75px. Looks to me if the negative top margin of the wrapper isn’t working
ahh a premature horizontal scrollbar. Not on page load. Important details. Messed with it don’t know. Thats Paul sticky footer. He will know.
Hi Eric. That is what I thought. First you don’t see it but after a few seconds it’s there. I indeed hope that Paul is seeing what I am doing wrong
I just had the opportunity to test it on two other computers, and still have the scrollbar!!
Hi, I’m just on my way out the door but will have a look when I get back in a couple of hours. I don’t see the vertical scrollbar though.
The only way I was seeing it was in IE8 for sure (don’t remember the rest) if I compressed the window up to about 400px. But the vertical bar shouldn’t show until it hit the nav. I couldn’t find the reason. The only way I could get it to stop was removing the footer. Even after removing the footer the vertical bar would flicker on an off for me. So something funky.
Hi,
I’m not seeing a vertical scrollbar in any browser. Have you changed this version or do you have an example where it is broken?
Your version won’t work in IE8 as you have missed out the IE8 fix that is in all my versions:
#wrapper:after{
content:" ";
height:1%;
display:block;
clear:both;
overflow:hidden;
}
Without that fix the footer will not move when the viewport is resized vertically.
Hi Paul. I really have no idea what is going on. You’re the fourth one who said that you didn’t see any scroll bar. But I see it in all browsers. I took the IE fix out, as I said in the 5th post, just because I tried everything to get it correct. In the normal page, I’m working on, its there.
If you’ve made any changes try clearing your browser cache (Ctrl+F5) as you may well have an old version cached locally
As SpacePhoenix said above try clearing your cache and temporary files to rule that out of the equation.
Can we have a screenshot of what you are seeing and state browser version and platform etc?
Hi Paul. I have cleared the cache as SpacePhoenix suggested. Here is the link to the original i’m working on. And [URL=“http://hotelelena.sothenwhat.com/images/screenshot.jpg”]this is a screenshot, done in Firefox. The platform is Windows 7 and I am located in the Netherlands.
What version of Firefox is that (not that I think it will make any difference)?
I don’t see a scrollbar on that page either in any browser on mac or PC.
I do see that at the top of the page you have this div which could cause problems depending on what it is in place for.
<div style="display: block;" class="load-item"></div>
Maybe you should link to the example like the one in your screen shot. Because I’m sure it’s your innards causing it.