Другие языки программирования и технологии

Почему padding неверно отображается в IE?

В IE7 padding для дива "menu" гораздо больше чем указанный мной 29px.
В мозилле, опере, хроме все вроде ок.
Вот как это выглядит http://tri4.ax3.net/why.html.
Вот упрощенный код страницы. Специально выделил цветом.

<html>
<head>
<meta>
<title>Почему padding в IE работает некорректно? </title>
<style>

#container {
margin: 0 auto;
padding: 0;
width: 974px;
}
#header {
padding: 17px 0 0 0;
background-color:green;
}
#fast_hrefs {
float: left;
}
#menu {
clear:both;
padding:29px 0 0 0;
background-color:yellow;
}
</style>
</head>
<body>

header1

menu

</body>
</html>
а потому как есть такая проблема) - с floated элементами и следующими после элементами с clear. поэтому если работаете в дримвивере, создайте новую страницу с любым 2-х или 3-х колоночным лэйаутом, шапкой и футером. и увидите, что вместо того, чтобы элементу, следующему после floated задавать clear:both; , дримвивер добавляет несемантичный, но эффективный элемент <br class="clerafloat" />
если у меню убрать clear:both; а после header поставить <br style="height:0; line-height:0; font-size:0; clear:both" /> , то все будет в порядке во всех браузерах.. .

P.S. - только бы стили сразу сбросить - Reset CSS - отступы и размеры шрифтов все равно во всех браузерах разные.. .

UPD: да, кстати.. . header будет по высоте складываться в таком варианте - узкая зеленая полоска. чтобы он действительно занял все пространство по высоте, надо будет и для header добавить float: left; width:974px;
UU
Uljibek Umbetalieva
60 969
Лучший ответ
проблема флоатов
если структура такая
[див флоат левт]
[див клеар с содержимым]

то будут глюки с отступами

поэтому для клеара рекомендуется вводить отдельный блок с отдельным классом. это может быть br или div или всё то угодно, но выглядеть это должно следующим образом

[див флоат левт]
[див клеар]
[див с содержимым]

при этом диву с классом клеар желательно указать высоту 0 отступы 0 и высоту строки минимальную
если это в ие не поможет, тогда нужно в класс, который не хочет нормально обрабатывать отступы добавить пункт
overflow:hidden;
1) IE тупой как посох
2) везде нужно писать px и после нулей тоже чтоб коб был валиден
3) если проблемы с header то id должен быть такой же header, а не header1