IE 6 и border
May 3rd, 2007 by Yuriy DrozdovПредставим себе такой css код:
#outer {
border-left: solid 300px #ccc;
height: 100%;
}
#inner {
margin-left: -200px;
}
</style>
Для такого html кода:
<div id=”inner” >Тут будет сад</div>
</div>
Так это будет выглядеть в Firefox 2.0.0.3 и IE 7:
Так будет выглядеть в IE 6:
Первое что приходит в голову это поиграться с z-index и position: relative, а также спросить у Google.
Z-index ничего не дал, а вот position: relative в данном случае помог. Заменив margin-left: -200px; на position: relative с left: -200px в FF, IE7 и IE6 стало выглядеть одинаково и, главное, так как надо.
После экспериментов финальный css код стал выглядеть следующим образом:
#outer {
border-left: solid 300px #ccc;
height: 100%;
}
#inner {
position: relative;
left: -200px;
}
</style>
Поиски в Google тоже дали свои результаты и привели меня на IE6 Border Chaos. Автор заметки утверждает, что установив position: relative; можно избавиться от хаоса с border в IE 6, оставив при этом отрицательный margin. В моем примере это не помогло, поэтому стоит left: -200px; Может билд IE 6 не тот 
“height: 100%;”
=))) где цсс учил ?
ни один браузер не поддерживает height: 100%; пока он не находится в другом DIV-е у кого есть высота заданная вручную
код выдернут из контекста, ничто не мешает элементу с id #outer быть вложеным в другой контейнер