Footer overlap problem

	Home Register Search Help Login

Sponsors

Hosting from $3.99 per month!

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions. dd

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums

Recent Posts

Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Footer overlap problem

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Footer overlap problem

Page: [1]


Hamish Posts: 4 Joined: 5/3/2006 Status: offline	Footer overlap problem - 5/3/2006 3:38:16 Hi, Having a problem with the footer overlapping on my page. Page link CSS file As you can see the footer sits part way up as you scroll down, overlapping the text. Hopefully someone can spot the (probably) obvious mistake I've made. Don't worry, the horrible colours are not final! Thanks, Hamish


Tailslide Posts: 6366 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: Footer overlap problem - 5/3/2006 5:59:35 It's because you're using position:absolute for layouts - in this instance it means that the footer will try to sit at the bottom of the viewport whether there's text there or not. Placing footers at the bottom of the viewport using CSS is tricky to say the least. Generally I avoid trying to do this and just have the footer following on from the rest of the content. There are a couple of techniques such as this: http://www.themaninblue.com/writing/perspective/2005/08/29/ but I think that this technique (which has been the most recent and popular) will run into problems with IE7... It's possible that they'll issue some sort of addendum to fix that once we know what we're up against. _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to Hamish)


Hamish Posts: 4 Joined: 5/3/2006 Status: offline	RE: Footer overlap problem - 5/3/2006 6:09:33 Thanks for that, but I'm still a little lost on how to fix the problem. Any changes I make usually end up with the footer sitting even higher again Hamish (in reply to Tailslide)


Tailslide Posts: 6366 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: Footer overlap problem - 5/3/2006 6:22:14 That's the thing with using position:absolute - what it does is remove the section from the normal flow of the page so it doesn't affect and isn't affected by anything else on the page. As all your big chunks of layout are placed this way it's impossible to get the footer to sit after them (as it can't "see" them) if that makes any sense at all. With this sort of layout I'd generally get rid of all position:absolutes and rely on the normal flow of the page, floating and clearing to position stuff. I'd float your navigation left (stick a div around the nav), your content right and then have your footer follow on from them with clear:both (as you've already got). Remember to give the floats widths and allow a little slack (20%/75% for instance). _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to Hamish)


Hamish Posts: 4 Joined: 5/3/2006 Status: offline	RE: Footer overlap problem - 5/3/2006 6:37:27 Ok, I seem to have it mostly right, though now the contents dropped down! I've uploaded the fixed css to the original location, would you mind letting me know where I have messed it up? Thanks Hamish (in reply to Tailslide)


Hamish Posts: 4 Joined: 5/3/2006 Status: offline	RE: Footer overlap problem - 5/3/2006 6:58:37 never mind, its fixed (in reply to Hamish)

Page: [1]

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Footer overlap problem

Page: [1]

Jump to: 1

New Messages	No New Messages
Hot Topic w/ New Messages	Hot Topic w/o New Messages
Locked w/ New Messages	Locked w/o New Messages

Post New Thread

Reply to Message

Post New Poll

Submit Vote

Delete My Own Post

Delete My Own Thread

Rate Posts