margin у элемента который касается границы браузера

[Whatsup]

http://www.resultime.ru/

Вот страница. В ФФ футер маргин боттом отступает от нижнего края страницы. В ие7 + даже это происходит. А вот в хроме и опере футер плотно прижат к нижней части браузера. Такое ощущение что у элементов которые выходят за 100 процентный размер боди и хтмл и упираются в края браузера нельзя задавать маргины которые бы отодвигали эту границу. Есть решение добавить невидимый блок с прозрачным фоном и отодвинуть футер от прилипания к границе браузера. Но возможно вы мне подскажете решение без добавления лишнего элемента. Весь код в примере вынес в 1 файл что бы и стили и разметка была рядом.

[mrnobody]

#footer {
    background-color: #DDDDDD;
    clear: both;
    height: 50px;
    margin: -70px auto 0;
    width: 900px;
}

[Whatsup]

Все бы хорошо но задача другая. Не убрать отступ а отодвинуть последний элемент от границы браузера во всех браузерах. То есть отображение сделать как в ФФ

[SelenIT]

Мда, простая, казалось бы, задачко, а... прикольная

Как я понимаю, корень разночтения в том, что, хотя спека CSS запрещает схлопывание margin-ов корневого элемента, про область отрисовки там ничего не сказано . В данном случае содержимое заведомо переполняет корневой элемент (у HTML-то высота фиксирована), так что о схлопывании с ним речи не идет. Fx, видимо, перестраховывается и считает область отрисовки "исполняющем обязанности корневого эл-та" (его фон ведь переносится на нее), а другие делают как проще.

Вообще что ожидается от фиксации высоты body и вставки в него .wrap-а не меньшей высоты, да еще и с отступом? Гарантированая вертикальная прокрутка? Если подвал всё равно по факту не прижимается, не проще ли не ограничивать html и получить нужное поведение по умолчанию?

А так варианта без доп. блока на ум не приходит. В принципе, в качестве такого блока можно использовать body:after.

[Николя223]

действительно... интересная тема. Вначале я подумал - ерунда, но когда я попытался отодвинуть от края в хроме, я вошёл в азарт...

Много способов перепробовал, и вот что я заметил: если элемент отображается как INLINE-BLOCK или TABLE-CELL, тогда по какой то причине, браузеры разрешают задавать нижний отступ элементу страницы, который находится у края.

Но тогда вытекает следующий вопрос: элемент не центруется...

Ну и для его центровки я обернул footer в ещё один DIV...

единственное в IE7 отступ не делает, чувствуется потому что не знает что такое inline-block, но его как раз и хакнуть можно если добавить специально для него другую стилевую таблицу, в которой будет исправляться display: INLINE-BLOCK; на display: BLOCK

другой способ придумал, прописываем это отдельно:

Все браузеры прочитают, но IE 7 - проигнорирует и отбросит, но основной код для футера останется цел)))

#footer {
	display: inline-block;
}

с учётом хака, получилось вроде кроссбраузерно)) кстати там в стилях остатки какого то кода нашёл - удалил)))))

пример

код

P.S: какой-то минусолюбитель мне минусы ставит и ставит, только от старых избавляюсь, мне уже новые лепит)) было б за что...но это лирика)

Edited November 29, 2012 by Николя223