Проблема в том, как вы перемещаете компоненты нижнего колонтитула влево и вправо, что выводит их из потока содержимого нижнего колонтитула. По сути, это делает нижний колонтитул без содержимого, поэтому он не занимает места. Если вы добавите свойство width в #foot, то вы снова получите элемент управления, чтобы делать то, что вы пытаетесь.
#foot {
background-color: #dfe0e0;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #6D6F72;
font-weight: bold;
width: 980px;
}
Причина, по которой он «работает» в Firefox и т. Д., Заключается в том, что они корректно обрабатывают стиль overflow: visible
на вашем #main, тогда как IE6 & 7 действительно не имеют понятия.