Footer issue in IE6 & 7

Question

Hi

At the following site

http://www.r2integrated.com/clients/FMX/index.html

In IE 6 & 7 the footer's background should be grey; outside of the white box. It looks correct in firefox, chrome & IE8, but not IE6 & 7 the footer's background is white and inside the box. I have tried many things with no luck. I wonder if anyone can offer suggestions?

thank you chaser

Answer 1

The problem is the way you're floating the footer components left and right, which lifts them out of the footer's content flow. Essentially what this does is it leaves your footer with no content so it occupies no space. If you put a width property onto your #foot then you'll regain the control to do what you're trying to.

#foot {
    background-color: #dfe0e0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #6D6F72;
    font-weight: bold;
    width: 980px;
}

The reason it 'appears' to work in firefox etc is that they're handling the overflow: visible style on your #main correctly, whereas IE6 & 7 really don't have a clue.