Collecting the Internet So You Don't Have To

We work on the Internet. As such, we are constantly consuming information. Believe me, there is a lot of it out there. Sometimes we even forget things unless we write them down. Our blog covers everything from web standards to the muppets, php to comic books, music and everything else that we find interesting. Leave us a note when you drop by.

Footer Fluster and Frustration

General
Ross McDowall
Ross McDowall Senior Web Developer
Visual Lizard
work
1 (204) 957-5520 ext:151
toll-free
1 (888) 237-9559
url
http://www.visuallizard.com
Ross McDowall Fearless Dwarven Warrior

footer issueThis little problem is about style positioning of your footer.  We’ve found the solution for this, and I am sure many other designers have seen and solved this issue in the past. This was the problem.

The footer material was floating above the content at the bottom of the page when the content in column 2 was shorter that the content showing in column 1. Naturally when something seems to go wrong in Firefox, everything seems to be fine in Internet Explorer, go figure. Anyway, the problem it turns out comes from setting a specific height in column 1. A specific [height] attribute is required for IE6 to work properly because IE6 renders the attribute incorrectly as [min-height].

footer solution resultThe solution was actually pretty simple. Column 1 had to be set with a [min-height] which of course sets a minimum height for the column which can then expand. Of course an IE6 hack of setting the [height] attribute had to be applied specifically for IE6.