Footer area with CSS not positioned at the bottom

R

Remy

I've built a page with heavy use of CSS and ASP.NET (shouldn't matter).
Now I have the issue that the footer is displayed inside the page
instead of at the end, but this only happens in Firefox and Safari. IE
is ok. I used the W3C validator and the page looks ok, besides some
ASP.NET elements that are not conform.

Example page:
http://206.196.24.3/TuningCustomerInfo.aspx

CSS definition for the footer
#pageFooter
{
clear: both;
margin-top: 20px;
display: block;
height: 30px;
background-color: Black;
}

The three columns above are in a container:
#content
{
display: block;
float: none;
margin: 110px 0px 0px;
width: 100%;
line-height: 150%;
}

So, for whatever reason, the footer starts where column3 stops and
column3 is shorter than column1.

Any ideas? And general suggestions are welcome too, it's my first
project with heavy CSS usage. I know I could just use tables again, but
would like to make it happen without them.

Thanks

Remy Blaettler
 
K

kchayka

Remy said:
I've built a page with heavy use of CSS and ASP.NET (shouldn't matter).

Maybe it shouldn't matter, but some of the worst code I've ever seen has
been spewed forth from ASP.NET ;)
Now I have the issue that the footer is displayed inside the page
instead of at the end, but this only happens in Firefox and Safari. IE
is ok.

http://206.196.24.3/TuningCustomerInfo.aspx

You are mistaken. IE only appears to be OK because you are relying on
its broken overflow behavior. The other browsers are rendering it per
the specs.
CSS definition for the footer
clear: both;

So, for whatever reason, the footer starts where column3 stops and
column3 is shorter than column1.

No, you are mistaken again. With my particular text and window size, the
footer starts below column2 because that one is the longest.

You made the mistake of setting an explicit height on columns 1 and 3
(450px). Conforming browsers are respecting that, and letting any
overflow spill out and overlay whatever comes after it. IE's default
overflow behavior treats height as min-height, so it automatically
expands the container to fit the content. This is incorrect.

BTW, you could probably figure at least some of these things out
yourself using the DOM Inspector in Firefox. It is very handy for
debugging CSS, among other things. And if you don't already have the Web
Developer extension, get it.
<URL:http://chrispederick.com/work/webdeveloper/>
 
R

Remy

Great, thanks a lot. That helped.
And this tool is awesome! The only thing that didn't really do anything
was the DOM inspector? How does that work?

The other issue I had now, was that there was no space between the
column1 and the footer in Firefox.
What worked for Firefox was:
#column1
{
width: 376px;
float: left;
display: inline-block;
margin-bottom: 20px;
}

but this did nothing for IE. In IE the following helped:

#content
{
display: block;
float: none;
margin: 110px 0px 20px;
width: 100%;
line-height: 150%;
}
so, it kinda works, but I don't see why the margins for the content tag
does not work in Firefox? The content tag surrounds all 3 columns.

Any hints?

Thanks

Remy Blaettler
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top