Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Не совпадают расстояния между дивами

Автор: Tyrone 22.11.2006, 00:22

Доброе время суток!
В общем, проблема такая: никак не могу добиться одинакового отображения страницы в FF IE6 и Opere! smile

Вот код:

Код


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>test</title>
<style type="text/css">
<!--
.menu {
    font-family: Arial, Helvetica, sans-serif;
    width: 200px;
    position: relative;
    font-size: 12px;
    color: #FFCC99;
}
.menu .level1 {
    position: relative;
    width: 190px;
    z-index: 10;
}
.menu .level2, .menu .level3 {
    position: relative;
    width: 190px;
    margin-bottom: -74px;
    z-index: 20;
    top: -25px;
    left: 160px;
}
.menu .level3 {
    z-index: 30;
}
.menu .level2#cell3_0 {
    margin-bottom: -111px;
}
.menu .cell{
    height: 30px;
    cursor: hand;
    border: 1px solid #000000;
    position: relative;
    background-color: #666666;
    width: 100%;
    margin-bottom: 5px;
    padding-left: 10px;
}
-->
</style>
</head>

<body>
<div class="menu">
    <div class="level1" id="cell0">
        <div class="cell" id="cell1">cell1</div>
            <div class="level2" id="cell1_0">
                <div class="cell" id="cell1_1">cell1_1</div>
                <div class="cell" id="cell1_2">cell1_2</div>
            </div>
        <div class="cell" id="cell2">cell2</div>
        <div class="cell" id="cell3">cell3</div>
            <div class="level2" id="cell3_0">
                <div class="cell" id="cell3_1">cell3_1</div>
                <div class="cell" id="cell3_2">cell3_2</div>
                <div class="cell" id="cell3_3">cell3_3</div>
                    <div class="level3" id="cell3_3_0">
                        <div class="cell" id="cell3_3_1">cell3_3_1</div>
                        <div class="cell" id="cell3_3_2">cell3_3_2</div></div></div>                
        <div class="cell" id="cell4">cell4</div></div>
</div>
</body>
</html>

Расстояние между самой нижней ячейкой (cell4) и предыдущей (cell3) отличается от остальных в FF и Opere.
Я когда это заметил, задал диву cell3_0 высоту:

Код


.menu .level2#cell3_0 {
    margin-bottom: -111px;
    height: 111px;
}

Так, конечно правильней и лучше, но в Opere расстояние, все равно больше, чем надо.
Что подскажете?

Автор: Bangladesh 22.11.2006, 22:28

попробуй написать в цсс

Код


* { padding: 0px;
      margin: 0px; }

Автор: Tyrone 23.11.2006, 22:19

Нет. Здесь что-то другое.

Автор: SelenIT 23.11.2006, 23:57

Tyrone, так нужно было?

Код


.menu {
    font-family: Arial, Helvetica, sans-serif;
    width: 200px;
    position: relative;
    font-size: 12px;
    color: #FFCC99;
}

.menu div {
    position: relative;
}

.menu .level1 {
    width: 190px;
    z-index: 1;
}
.menu .level2, .menu .level3 {
    width: 190px;
    z-index: 2;
    top: -25px;
    left: 160px;
    height: 30px;
    margin-bottom: -30px; /* для всех */
    margin-bottom: expression(-this.offsetHeight+'px'); /* для IE */
}

.menu .level3 {
    z-index: 3;
}
.menu .cell{
    height: 30px;
    cursor: hand; cursor: pointer; /* первый - для IE5, второй - для прочих */
    border: 1px solid #000000;
    background-color: #666666;
    width: 180px; /* для всех, отсчитывающих padding наружу */
    _width: 190px; /* для IE, отсчитывающего padding внутрь */
    margin-bottom: 5px;
    padding-left: 10px;
}

P.S. Исправил баг - сначало было expression(-35*this.childNodes.length+'px'), что не учитывало вложенных подуровней (сейчас учитывает все). Заодно добавил комменты к хакам.

Автор: Tyrone 27.11.2006, 23:45

SelenIT
Стало ещё инересней. IE и FF выдавют то, что и нужно.
В Opere же расстояние между самой нижней ячейкой (cell4) и предыдущей (cell3) было больше, чем надо.
Теперь в OPERE проблеммы с объектами, имеющими вложения.
smile

З.Ы. А, вообще, спасибо за хаки. Где-нить пригодятся. smile

Автор: SelenIT 28.11.2006, 00:42

Tyrone, попробуйте добавить padding-bottom: 5px; к .menu .level2, .menu .level3, а margin-bottom для них же увеличить до 35px.
Кстати, проблема только в 8-й Опере (возможно и в еще более старых), в актуальной 9-й и без этого все нормально (как в FF).

Автор: Tyrone 28.11.2006, 23:20

Спасибо, SelenIT. Вопрос для себя считаю решённым.
З.ы. Наверное, поставлю 9-ю Оперу (давненько собираюсь) и вернусь к первоначальному варианту, а то у меня пара скриптиков работать не будут - переделать лень. smile

Автор: Tyrone 29.11.2006, 23:09

Хм... А скрипты то у меня и раньше не работали (проглядел smile

). Они на onMouseOver реагировали, а из-за margin-ов и padding-ов появлялись глюки (правда только в Опере smile

).
Короче вышел из положения так:
Вместо

Код


.menu .level2#cell3_0 {    
    margin-bottom: -111px;    
    height: 111px;    
}

(см. изначальный код)
Поставил

Код


.menu #cell4 {
    top: -111px; /*для всех*/
    <!--[if IE]>top: -37px;<![endif]-->/*для IE*/
}

Стало отображаться корректно, причем ВЕЗДЕ!

Автор: SelenIT 29.11.2006, 23:38

Tyrone, Вы уверены, что это будет нормально себя вести, если в подменю будет не 3, а 4-5 пунктов?

Автор: Tyrone 30.11.2006, 00:17

Да. С одной поправкой: прийдется варьировать величину top, в зависимости от колличества пунктов меню. Кончно, это не совсем правильно. Хотелось бы универсального решения, но по-другому я что-то придумать не могу smile

.

Добавлено @ 00:32
И вот ещё что: поделитесь кот- нибудь ссылочками на инфу по применению expression (что-то никак ничего дельного найти не могу). Буду очень благодарен.