Дырка под футером при показе блока в IE 6

Дырка под футером при показе блока в IE 6 ...

Дата публикации: 19.10.2009

Имеем обычную верстку, с прижатым подвалом (футером) к низу плюс есть блоки, которые появляются по какому-нибудь событию (напрмиер, по клику на кнопке, под ней появляется блок с текстом).

Проблема

В IE 6 при появлении такого блока, под подвалом появляется «дырка», несмотря на то, что он (подвал) прижат к низу.
Заметка баг появляется, только если появлящиеся блоки находятся в нормальном потоке блоков (т.е. без position: absolute/fixed). Баг может не показаться при первом показе блока, но при повторном и дальнейших показах есть.

Пример, демонстрирующий данный косяк (увидеть можно только в IE6).

Решение

Достаточно добавить подвалу float:


.footer {
[...]
float: left;
width: 100%;
}

Результат. Преимущества:

  • просто
  • валидно

Недостаток — из-за того, что float прижимает блок влево/право, для сайтов, выровненных по центру экрана приходится добавлять дополнительный контейнер, который выровняет подвал по центру.

Теги:
Показать комментарии

Смотрите также в этом разделе

Смежные материалы, которые могут быть вам полезны

  • HasLayout | знакомимся, управляем, применяем
  • Max-width для IE6 | описание 2-х способов
  • Min-height для IE6 | без использования expression
  • Min-width для IE6 | описание 4-х способов
  • Min-width и max-width одновременно для IE6 | описание 2-х способов
  • PNG и прозрачность в IE6 | 4 метода | обход проблем
  • position:fixed для IE6 | описание 4-х способов
  • Блочная модель в IE6 | решаем проблему с размерами блоков для IE6
  • Высота блока 1px для IE6 | решаем проблемы с блоками небольшой высоты
  • Для IE6 устраняем flickering — обращение к серверу при наведении на элемент
  • Дублирование символов в IE6
  • Как перекрыть поверх слоем select в IE6
  • Как перекрыть поверх слоем select в IE6
  • Обрезка контента c отрицательным margin в IE6
  • Отступы плавающих блоков в IE6 | решаем проблему с большим отступом у плавающих блоков
  • Псевдокласс :first-child для ИЕ6
  • Псевдокласс hover в IE 6
  • Селектор потомков > для IE6
  • Селекторы атрибутов [type=…] в ИЕ6
  • Сестринский селектор для IE6
  • Ссылки с вложением
  • Убираем смещение на 1px в IE6 для right:0 и bottom:0