Проблема с версткой

[[Macintosh]]

У меня сложилась такая ситуация что в FireFox, Opera верстка отображается нормально (вернее начало верстки ) , а в Internet Explorer 6 все на пере косяк. Подскажите, пожалуйста, как нужно делать «Баг фиксы» для IE 6 и выскажите, пожалуйста, Вашу критику по поводу верстки как мне ее улучшить и если можно желательно с примерами. Верстку делаю на DIV и скажите, пожалуйста, как позиционировать блоки правильно?

Скрины:
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся

Верстка:Посмотреть вложение div.rar

 

[Eihwaz]

Самые распространенные хаки для IE6 это
* html и !important:

// * html хак:
// Все браузеры:
#container {
    background-color: red;
}
// Только IE6
* html #container {
    background-color: gren;
}
// !important хак
#container {
    // Все браузеры
    background-color: red!important;
    // Explorer
    background-color: gren;
}

(Почему-то css-комментарии (/* */) обрезаются форумом, заменил на (//))
Насчет вашей верстки: очень много всего сделано явно наугад.
.body {height: 100%} не будет работать: элемент может растягиваться на весь экран только в том случае, если сам является дочерним элементом, который растянут на весь экран, т.е., сначала нужно прописать: html {height: 100%} (вы осознаете, что height: 100% это один экран без прокрутки, верно?).
Ну и сама структура верстки не фонтан (мягко выражаясь
Некоторые элементы, которые нужно было бы завернуть в отдельные div'ы вы оставили как есть, а некоторые, которые не было нужды заворачивать — наоборот, завернули.
<br class="clear none" /> — присвоили элементу два класса (clear и none), при этом ни один из них не определили в css.
В общем, главная ваша проблема это неряшливость, а остальное придет с опытом.

 

[Гладио]

1) класс body я бы не стал использовать, можно запутаться. Обычно оболочку называют wrapper.
2) после коментария <!-- conteiner1 --> стоит совершенно лишний див, который ни на что не влияет
3) *{
width:100%;
margin: 0;
}
значение 100% и так стоит у блочных элементов по умолчанию.
а вот padding: 0; стоит прописать, для кроссбраузерности.
* {
margin: 0;
padding: 0;
}
3)
.logo{
width:173px;
height:47px;
float:left;
margin-top: 0px;
margin-right: 31px;
margin-bottom: 3px;
margin-left: 20px;
}
а не проще было так записать ?
.logo{
width:173px;
height:47px;
float:left;
margin: 0 31px 3px 20px;
}
и в меню проще записать все одним свойством background: )))
4) <div class="centerimg"><img src="images/header.png" width="548" height="299" alt="мебель" /></div>
я бы эту картинку фоном вставил бы
html: <div class="centering"></div>
css: .centering{
width: 548px;
height: 299px;
background: url(images/header.png) no-repeat;
float: left; (вместо margin-left: 224px
}

 

[[Macintosh]]

1) класс body я бы не стал использовать, можно запутаться. Обычно оболочку называют wrapper.
2) после коментария <!-- conteiner1 --> стоит совершенно лишний див, который ни на что не влияет
3) *{
width:100%;
margin: 0;
}
значение 100% и так стоит у блочных элементов по умолчанию.
а вот padding: 0; стоит прописать, для кроссбраузерности.
* {
margin: 0;
padding: 0;
}
3)
.logo{
width:173px;
height:47px;
float:left;
margin-top: 0px;
margin-right: 31px;
margin-bottom: 3px;
margin-left: 20px;
}
а не проще было так записать ?
.logo{
width:173px;
height:47px;
float:left;
margin: 0 31px 3px 20px;
}
и в меню проще записать все одним свойством background: )))
4) <div class="centerimg"><img src="images/header.png" width="548" height="299" alt="мебель" /></div>
я бы эту картинку фоном вставил бы
html: <div class="centering"></div>
css: .centering{
width: 548px;
height: 299px;
background: url(images/header.png) no-repeat;
float: left; (вместо margin-left: 224px
}

Большое спасибо за ответ. учту все что написали. но если мы убираем в любом месте margin то сразу же у нас все косится до не узнаваемости, проблема с IE так и осталась не могу я всетаки до вести до ума эту затеюя почему лезут блоки друг под друга я имею ввид за верхние блоки где logo menu и banner?

 

[Andy_ham]

Создать верстку на дивах, да еще и кроссбраузерную, довольно сложно... и интересно. Советы даны в тему, я только хочу добавить вот что - намного эффективнее не делать хаки в основном файле стилей, а для ие6 подгружать свой файл css. Таким образом можно легко добиться полного соответствия вывода в ие6, как в других браузерах.

 

[Гладио]

пара изменений и в ие 6 все гуд)
1) поменял у блока help float: на right и отступ сделал слева, а не справа.
2) чтобы меню прилипало вплотную к картинке, убрал все margin и сделал float: left у блока .centerimg
p.s. так как в архиве не было картинок, то сделал все блоки цветными для наглядности.

 

[[Macintosh]]

пара изменений и в ие 6 все гуд)
1) поменял у блока help float: на right и отступ сделал слева, а не справа.
2) чтобы меню прилипало вплотную к картинке, убрал все margin и сделал float: left у блока .centerimg
p.s. так как в архиве не было картинок, то сделал все блоки цветными для наглядности.

теперь стоят вряд но вот почему все такие IE не воспринимает отступы по left и right div "menu" ?
Если стоят отступы даже у блока logo или же help все равно не видит в упор их. в чем глюк заключается?

 

[Гладио]

Все дело в том, что у ИЕ 6 своя блочная модель

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

 

[Sandronik]

А толку внедрять хаки на 6 ие если даже в самом задрыпаном офисе сейчас бразуеры новые стоят. Проще уже не заморачиватся на старину.

 

[mdss]

А толку внедрять хаки на 6 ие если даже в самом задрыпаном офисе сейчас бразуеры новые стоят. Проще уже не заморачиватся на старину.

да-да-да, а то что в рунете почти 4 млн. человек юзают ИЕ6, это пофиг. В буржуйнете еще больше