Topic: evil css footers (ok, maybe they're just misguided)... $Pages that link to <a href="https://ozoneasylum.com/backlink?for=28226" title="Pages that link to Topic: evil css footers (ok, maybe they&#039;re just misguided)..." rel="nofollow" >Topic: evil css footers (ok, maybe they're just misguided)...\$

Author	Thread
Fig Paranoid (IV) Mad Scientist From: Houston, TX, USA Insane since: Apr 2000	posted 07-18-2006 17:02 Hey y'all, been doing more and more css and I'm working on a page that needs a footer that'll stick at the bottom of the page (or the bottom of the browser window if the page content doesn't extend all the way down). you can view the html page here and the css here, i'm basing this on footerStickAlt. as you can see my footer isn't footing, and when i apply some colors i noticed that the footer is in fact at the bottom of the container div but that the container div isn't containing, the content div extends well past the container for some reason. I'm lost on this one, any ideas? thanks. KAIROSinteractive \| tangent oriented
reisio Paranoid (IV) Inmate From: Florida Insane since: Mar 2005	posted 07-18-2006 22:44 Why's your doctype so strange? code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Have you tried it without a doctype declaration? That silly blue man page doesn't show one in the example - which is probably just typical oversight, but you never know how stupid people are...it uses the * html hack, after all.
Fig Paranoid (IV) Mad Scientist From: Houston, TX, USA Insane since: Apr 2000	posted 07-18-2006 23:29 umm...where are you seeing that? I click the first link and view source and get: code: <!DOCTYPE HTML PUBliC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> in any case, I got the suggestion of adding clear: both to the footer tag and changing the main div (the div that centers and contains the content) to be position: relative (i know, never use position: absolute and that gives me a working footer (yay) with this new problem. thoughts? KAIROSinteractive \| tangent oriented
reisio Paranoid (IV) Inmate From: Florida Insane since: Mar 2005	posted 07-19-2006 00:26 quote: Fig said: umm...where are you seeing that? I was getting that from w3.org's page on which doctype declarations you're supposed to use. quote: Fig said: this new problem code: .nav { margin: 0 !important; padding: 0 !important; } A larger problem is that you cut up that image to begin with - there's no need to do such things in CSS layout. I'd keep the building image as one, single image. (Edited by reisio on 07-19-2006 00:28)
Fig Paranoid (IV) Mad Scientist From: Houston, TX, USA Insane since: Apr 2000	posted 07-19-2006 00:36 gotcha, thought you were saying that was the one on my page. I was basing mine off one of the css pages i was working off of, i'll do some more research on that. quote: reisio said: .nav { margin: 0 !important; padding: 0 !important; }(Edited by reisio on 07-19-2006 00:27) that starts getting it close. alignment of the top nav is off, but the odd spacing is gone. good place to start, thanks. KAIROSinteractive \| tangent oriented
Fig Paranoid (IV) Mad Scientist From: Houston, TX, USA Insane since: Apr 2000	posted 07-19-2006 16:28 Ok, that's getting it there but it's still not aligned to the top in IE, it seems like the right aligned logo is affecting the top alignment. thoughts? quote: reisio said: A larger problem is that you cut up that image to begin with - there's no need to do such things in CSS layout. I'd keep the building image as one, single image.(Edited by reisio on 07-19-2006 00:28) that's also a valid point, i'm still breaking out of my tables mindset and was thinking the header would need to be a separate div. in retrospect there's probably no reason that whole image couldn't have been part of the header, i guess just adding padding on the bottom to push the content down past the background image? KAIROSinteractive \| tangent oriented (Edited by Fig on 07-19-2006 16:35) (Edited by Fig on 07-19-2006 17:07)
Fig Paranoid (IV) Mad Scientist From: Houston, TX, USA Insane since: Apr 2000	posted 07-19-2006 18:58 and fixed...or at least adjusted so that it works. went a different direction with something someone else had mentioned and absolutely positioned the logo and adjusted the z-index in a few places. there may be a better solution but in the immediate future this seems to work. appreciate the help... KAIROSinteractive \| tangent oriented (Edited by Fig on 07-19-2006 18:59)
butcher Paranoid (IV) Inmate From: New Jersey, USA Insane since: Oct 2000	posted 07-20-2006 00:44 I'm not sure if your still messing with it and I'm seeing the results of that, but your footer doesn't look the same in IE 6 as it does in FF and there's blue lines that stretch left from your links at the top of the page in FF. - Butcher -
Fig Paranoid (IV) Mad Scientist From: Houston, TX, USA Insane since: Apr 2000	posted 07-20-2006 17:45 I am actually, final index page is here (just the main page uploaded). not seeing the probs in FF at all though...mac or pc? KAIROSinteractive \| tangent oriented
butcher Paranoid (IV) Inmate From: New Jersey, USA Insane since: Oct 2000	posted 07-21-2006 01:03 I'm on a PC laptop with FF 1.0.7 and here's what I see that you probably weren't intending. http://butcher.dreamhosters.com/images/header.jpg http://butcher.dreamhosters.com/images/footer.jpg I'll go try it on my desktop with a newer version of FF and see if it's the same. - Butcher -
butcher Paranoid (IV) Inmate From: New Jersey, USA Insane since: Oct 2000	posted 07-21-2006 20:13 Fig I'm looking at it on my laptop now with FF 1.5.0.4 installed and it looks fine. - Butcher -
Fig Paranoid (IV) Mad Scientist From: Houston, TX, USA Insane since: Apr 2000	posted 07-25-2006 15:58 Cool, thanks butcher, was prob just an older browser glitch. appreciate the help. KAIROSinteractive \| tangent oriented

Topic: evil css footers (ok, maybe they're just misguided)...\$

Author

Thread

Fig
Paranoid (IV) Mad Scientist

From: Houston, TX, USA
Insane since: Apr 2000

posted 07-18-2006 17:02

Hey y'all, been doing more and more css and I'm working on a page that needs a footer that'll stick at the bottom of the page (or the bottom of the browser window if the page content doesn't extend all the way down). you can view the html page here and the css here, i'm basing this on footerStickAlt.

as you can see my footer isn't footing, and when i apply some colors i noticed that the footer is in fact at the bottom of the container div but that the container div isn't containing, the content div extends well past the container for some reason. I'm lost on this one, any ideas? thanks.

KAIROSinteractive | tangent oriented

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

posted 07-18-2006 22:44

Why's your doctype so strange?

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Have you tried it without a doctype declaration? That silly blue man page doesn't show one in the example - which is probably just typical oversight, but you never know how stupid people are...it uses the * html hack, after all.

Fig
Paranoid (IV) Mad Scientist

From: Houston, TX, USA
Insane since: Apr 2000

posted 07-18-2006 23:29

umm...where are you seeing that? I click the first link and view source and get:

code:

<!DOCTYPE HTML PUBliC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

in any case, I got the suggestion of adding clear: both to the footer tag and changing the main div (the div that centers and contains the content) to be position: relative (i know, never use position: absolute and that gives me a working footer (yay) with this new problem. thoughts?

KAIROSinteractive | tangent oriented

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

posted 07-19-2006 00:26

quote:
Fig said:

umm...where are you seeing that?

I was getting that from w3.org's page on which doctype declarations you're supposed to use.

quote:
Fig said:

this new problem

code:

.nav { margin: 0 !important; padding: 0 !important; }

A larger problem is that you cut up that image to begin with - there's no need to do such things in CSS layout. I'd keep the building image as one, single image.

(Edited by reisio on 07-19-2006 00:28)

Fig
Paranoid (IV) Mad Scientist

From: Houston, TX, USA
Insane since: Apr 2000

posted 07-19-2006 00:36

gotcha, thought you were saying that was the one on my page. I was basing mine off one of the css pages i was working off of, i'll do some more research on that.

quote:

reisio said:
.nav { margin: 0 !important; padding: 0 !important; }(Edited by reisio on 07-19-2006 00:27)

that starts getting it close. alignment of the top nav is off, but the odd spacing is gone. good place to start, thanks.

KAIROSinteractive | tangent oriented

Fig
Paranoid (IV) Mad Scientist

From: Houston, TX, USA
Insane since: Apr 2000

posted 07-19-2006 16:28

Ok, that's getting it there but it's still not aligned to the top in IE, it seems like the right aligned logo is affecting the top alignment. thoughts?

quote:

reisio said:
A larger problem is that you cut up that image to begin with - there's no need to do such things in CSS layout. I'd keep the building image as one, single image.(Edited by reisio on 07-19-2006 00:28)

that's also a valid point, i'm still breaking out of my tables mindset and was thinking the header would need to be a separate div. in retrospect there's probably no reason that whole image couldn't have been part of the header, i guess just adding padding on the bottom to push the content down past the background image?

KAIROSinteractive | tangent oriented

(Edited by Fig on 07-19-2006 16:35)

(Edited by Fig on 07-19-2006 17:07)

Fig
Paranoid (IV) Mad Scientist

From: Houston, TX, USA
Insane since: Apr 2000

posted 07-19-2006 18:58

and fixed...or at least adjusted so that it works. went a different direction with something someone else had mentioned and absolutely positioned the logo and adjusted the z-index in a few places. there may be a better solution but in the immediate future this seems to work.

appreciate the help...

KAIROSinteractive | tangent oriented

(Edited by Fig on 07-19-2006 18:59)

butcher
Paranoid (IV) Inmate

From: New Jersey, USA
Insane since: Oct 2000

posted 07-20-2006 00:44

I'm not sure if your still messing with it and I'm seeing the results of that, but your footer doesn't look the same in IE 6 as it does in FF and there's blue lines that stretch left from your links at the top of the page in FF.

- Butcher -

Fig
Paranoid (IV) Mad Scientist

From: Houston, TX, USA
Insane since: Apr 2000

posted 07-20-2006 17:45

I am actually, final index page is here (just the main page uploaded). not seeing the probs in FF at all though...mac or pc?

KAIROSinteractive | tangent oriented

butcher
Paranoid (IV) Inmate

From: New Jersey, USA
Insane since: Oct 2000

posted 07-21-2006 01:03

I'm on a PC laptop with FF 1.0.7 and here's what I see that you probably weren't intending.

http://butcher.dreamhosters.com/images/header.jpg
http://butcher.dreamhosters.com/images/footer.jpg

I'll go try it on my desktop with a newer version of FF and see if it's the same.

- Butcher -

butcher
Paranoid (IV) Inmate

From: New Jersey, USA
Insane since: Oct 2000

posted 07-21-2006 20:13

Fig

I'm looking at it on my laptop now with FF 1.5.0.4 installed and it looks fine.

- Butcher -

Fig
Paranoid (IV) Mad Scientist

From: Houston, TX, USA
Insane since: Apr 2000

posted 07-25-2006 15:58

Cool, thanks butcher, was prob just an older browser glitch. appreciate the help.

KAIROSinteractive | tangent oriented

Post Reply

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: evil css footers (ok, maybe they're just misguided)...

Insert Slimies »

Insert UBB Code »