i set a footer to be absolute so that it hugs the bottom of the browser window.
But in dreamweaver the footer block ends up higher up on the page and i can’t see what i’m editing. the same happens when i turn on web developer toolbar to edit the css.
anyone had this problem before?
Don’t rely on dreamweavers design view. It’s a nasty lil’ thing!
Basically the footer needs to know where the ‘bottom’ is.
So any kind of height is needed.
If for example you have a div ‘wrapper’, give it a height of 100%, and position ‘relative’.
Inside here is where we will have the footer, position ‘absolute’ bottom ‘0’.
Basically the absolute has to be within a div that has a defined height, and preferably a position relative to move the bugger about!
ok that should be what i need to get going, thanks! will report back later on.
Why are you absolutely placing the footer at the bottom anyway?
If you want a sticky footer then see the css faq as it is all explained there.
If you want a fixed footer then that is a different proposition altogether and you need to use position:fixed (not available in iE6).
All have their own little problems so we’d need to know exactly what you were trying to achieve to advise the best route. Usually absolutely placing the footer is not what most people want.
As mentioned above don’t rely on DW’s design view. Use code view and the preview in a browser when you want to see the result.
can you provide a link to this part of the FAQ? i couldn’t find it.
i am trying to make the footer hug the bottom of the page no matter what size the browser window. in other words: have no whitespace underneath the footer.
HI,
Yes the actual sticky footer link is here and [URL=“http://www.pmob.co.uk/temp/sticky-footer-ie8new-no-table.htm”]a demo here. It’s a little complicated I’m afraid but works soundly.
A sticky footer is different from a fixed positioned footer though. A sticky footer hugs the bottom of the browsers window when there is little content but if content exceeds the viewport height then the footer stays at the bottom of the document.
A fixed footer on the other had sits at the bottom of the viewport at all times. That means existing content will pass underneath the footer while the footer always stays in view and on top of whatever is underneath.