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

Тема в разделе "Веб-дизайн", создана пользователем [Macintosh], 3 дек 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. [Macintosh]

    [Macintosh]

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

    Скрины:
    http://s56.radikal.ru/i151/0912/55/8dc506de9c2f.jpg
    http://s42.radikal.ru/i095/0912/d3/ed57eb734af5.jpg

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

    Eihwaz

    Регистр.:
    7 окт 2007
    Сообщения:
    156
    Симпатии:
    54
    Самые распространенные хаки для 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.
    В общем, главная ваша проблема это неряшливость, а остальное придет с опытом.
     
    [Macintosh] нравится это.
  3. Гладио

    Гладио Создатель

    Регистр.:
    9 окт 2009
    Сообщения:
    32
    Симпатии:
    10
    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] нравится это.
  4. [Macintosh]

    [Macintosh]

    Регистр.:
    8 дек 2008
    Сообщения:
    208
    Симпатии:
    39
    Большое спасибо за ответ. учту все что написали. но если мы убираем в любом месте margin то сразу же у нас все косится до не узнаваемости, проблема с IE так и осталась не могу я всетаки до вести до ума эту затеюя почему лезут блоки друг под друга я имею ввид за верхние блоки где logo menu и banner?
     
  5. Andy_ham

    Andy_ham Джедай на пенсии

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

    Гладио Создатель

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

    Вложения:

    [Macintosh] нравится это.
  7. [Macintosh]

    [Macintosh]

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

    Гладио Создатель

    Регистр.:
    9 окт 2009
    Сообщения:
    32
    Симпатии:
    10
  9. Sandronik

    Sandronik Создатель

    Регистр.:
    12 июн 2008
    Сообщения:
    43
    Симпатии:
    6
    А толку внедрять хаки на 6 ие если даже в самом задрыпаном офисе сейчас бразуеры новые стоят. Проще уже не заморачиватся на старину.
     
  10. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.140
    Симпатии:
    671
    да-да-да, а то что в рунете почти 4 млн. человек юзают ИЕ6, это пофиг. В буржуйнете еще больше
     
Статус темы:
Закрыта.