13 replies [Last post]
Srizzil
Srizzil's picture
Offline
Regular
South Africa
Last seen: 4 years 32 weeks ago
South Africa
Timezone: GMT+2
Joined: 2010-11-13
Posts: 19
Points: 25

So I've had this problem before, about 13 months ago, and now that I'm using the same concept the problem has popped up again. I just can't see the problem, I'm hoping a fresh pair of eyes will help spot it.

Here's the Problem Page.

I'm floating the content either side of the page, and have enclosed my float elements with overflow. So I don't know what to do next. If you can help, that would be amazing.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 1 day ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

Well, what do you want it to

Well, what do you want it to do?

Srizzil
Srizzil's picture
Offline
Regular
South Africa
Last seen: 4 years 32 weeks ago
South Africa
Timezone: GMT+2
Joined: 2010-11-13
Posts: 19
Points: 25

It should go right to the

It should go right to the bottom of the page. Right now it's sitting on top of content.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 1 day ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

Try moving the footer DIV

Try moving the footer DIV outside of the main wrapper.

I'd fix up the markup errors first though: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.unclekornicob.com%2Fblog%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Srizzil
Srizzil's picture
Offline
Regular
South Africa
Last seen: 4 years 32 weeks ago
South Africa
Timezone: GMT+2
Joined: 2010-11-13
Posts: 19
Points: 25

Nope that's definitely not

Nope that's definitely not it. If I move the Div the footer goes up to the top of the page.

I fixed all the errors that I could and it made no difference. Most of them were petty errors.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 1 day ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

Srizzil wrote: I fixed all

Srizzil wrote:

I fixed all the errors that I could and it made no difference. Most of them were petty errors.

Doesn't matter if it makes no difference, it's still required. Now you've got to validate your CSS.
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.unclekornicob.com%2Fwp-content%2Fthemes%2FUncleKornicob%2Fstyle.css&profile=css21&usermedium=all&warning=1&vextwarning=&lang=en

Srizzil
Srizzil's picture
Offline
Regular
South Africa
Last seen: 4 years 32 weeks ago
South Africa
Timezone: GMT+2
Joined: 2010-11-13
Posts: 19
Points: 25

I'll clean that up too, but

I'll clean that up too, but non of those errors will effect the footers position. Do you have any idea why it's doing that? I would think the overflow would fix it.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 1 day ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

Srizzil wrote: I'll clean

Srizzil wrote:

I'll clean that up too, but non of those errors will effect the footers position. Do you have any idea why it's doing that? I would think the overflow would fix it.

The quotes and equal signs in the CSS may or may not be causing it to ignore what's following. Validation is really the first step, not an afterthought. You'll thank me later.

Do you just want the footer below the rest of the page or do you want it fixed to the bottom of the viewport (always visible)?

Srizzil
Srizzil's picture
Offline
Regular
South Africa
Last seen: 4 years 32 weeks ago
South Africa
Timezone: GMT+2
Joined: 2010-11-13
Posts: 19
Points: 25

I just want it below the rest

I just want it below the rest of the page. But if the page has only a little information, then I want it to still be on the bottom of the page.

Srizzil
Srizzil's picture
Offline
Regular
South Africa
Last seen: 4 years 32 weeks ago
South Africa
Timezone: GMT+2
Joined: 2010-11-13
Posts: 19
Points: 25

Cleaned up most of the errors

Cleaned up most of the errors in the CSS, still nothing. This shouldn't be that hard, it's probably something small and silly.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 1 day ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

Srizzil wrote: I just want it

Srizzil wrote:

I just want it below the rest of the page. But if the page has only a little information, then I want it to still be on the bottom of the page.

Oh. OHHHHHHH! OK. Now I see what you want.

You want a sticky footer layout. Here is the basic idea: http://www.pmob.co.uk/temp/sticky-footer.htm

You are probably going to have to rehash your layout a bit.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 11 hours 33 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9580
Points: 3646

Start by removing all

Start by removing all {position: relative;} and {position: absolute;} statements.

The overflow property goes on the parent of a float element.

Don't bother with sticking the footer on short pages; that's a print thing and doesn't really belong on the web. Besides, if there is so little content on a page, maybe you don't need it. Wink

And, as V has suggested, clear up all html and css errors before proceeding.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 1 day ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

gary.turner wrote: Start by

gary.turner wrote:

Start by removing all {position: relative;} and {position: absolute;} statements. ...

I was going to ease into that one. Wink

Srizzil
Srizzil's picture
Offline
Regular
South Africa
Last seen: 4 years 32 weeks ago
South Africa
Timezone: GMT+2
Joined: 2010-11-13
Posts: 19
Points: 25

Gary, you genius! I was

Gary, you genius! I was hoping you would see this and help me out. It's all working now Cool

I'm slightly confused as to the purpose of {position: relative;} and {position: absolute;} statements if I still achieve the same thing without them.