VPF::убираю рамку ячейка становится больше в ие есс-но

liliana2

Дата 22.10.2008, 13:41 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 178
Регистрация: 19.11.2007

Репутация: нет
Всего: нет

проблема немного сменилась, убираю нижнюю рамку средством наложения уголочков с фоном но в ие теперь другая проблема внизу вылазит фон списка

Код


      <div class="column_left">
         <div class="rounded">
             <div class="corners_gray_top"><div><div></div></div></div>
                 <div class="content">
                        <ul class="subnav">
                        <li><a href="#">Öèôðîâûå ôîòî-, ôèäåî-</a></li>
                        <li><a href="#">Àêñåññóàðû ê ôîòî-, âèäåîòåõíèêå</a></li>
                        <li><a href="#">Êîìïüþòåðíàÿ òåõíèêà</a></li>
                        <li><a href="#">Êïê è êîììóíèêàòîðû</a></li>
                        <li><a href="#">GSM-íàâèãàöèÿ</a></li>
                        <li><a href="#">Ïåðñîíàëüíûå àóäèî-, âèäåî</a></li>
                        <li class="active"><a href="#">Öèôðîâûå ôîòî-, ôèäåî-</a><div class="triangle"></div>
                        <p><a href="#">USB-ôëýøêè</a>, <a href="#">êàðòû ïàìÿòè</a>, <a href="#">âíåøíèå äèñêè</a>, <a href="#">CD/DVD-äèñêè</a></p></li>
                        <li><a href="#">Äîìàøíåå òâ è âèäåî</a></li>
                        <li><a href="#">Ðàçíîå</a></li>
                        </ul>
                 </div>
             <div class="corners_gray_bottom"><div><div></div></div></div>
         </div>

Код


.rounded .content ul.subnav {
}
.rounded .content ul.subnav li {
    display: block;
    border-bottom: 1px solid #fff;
    text-align: left;
}
.rounded .content ul.subnav li a {
    display: block;
    padding: 10px 0 10px 14px;
    margin: 0;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
/*    line-height: 16px;*/
}
.rounded .content ul.subnav li a:hover {
    background: #f58220;
}
.rounded .content ul.subnav li.active {
    position: relative;
}
.rounded .content ul.subnav li.active a {
    background: #f58220;
    color: #000;
    margin: 0 0 -3px 0;
    padding: 10px 0 10px 14px;
}
.rounded .content ul.subnav li.active p {
    background: #fff;
    padding: 5px 0 10px 12px;
    line-height: 14px;
}
.rounded .content ul.subnav li.active p a {
    display: inline;
    padding: 0;
    margin: 0;
    color: #750b05;
    text-decoration: underline;
    background: #fff;
}
.rounded .content ul.subnav li.active p a:hover {
    color: #f58220;
    text-decoration: none;
    background: #fff;
}
.rounded .corners_gray_top { 
    background: transparent url('../i/corners/gray_tl.gif') no-repeat 0 0;
    position: relative;
    top: 4px;
    z-index: 4;
    height: 4px;
    padding: 0;
    margin: -4px 0 0 0;
}
.rounded .corners_gray_top div { 
    background: transparent url('../i/corners/gray_tr.gif') no-repeat 100% 0;
    height: 4px;
    padding: 0;
    margin: 0;
}
.rounded .corners_gray_top div div { 
    background: #a7a9ac;
    height: 4px;
    margin: 0 4px;
    font-size: 1px;
    padding: 0;
}
.rounded .corners_gray_bottom { 
    background: transparent url('../i/corners/gray_bl.gif') no-repeat 0 0;
    position: relative;
    bottom: 4px;
    z-index: 4;
    height: 4px;
    padding: 0;
    margin: 0 0 -4px 0;
}
.rounded .corners_gray_bottom div { 
    background: transparent url('../i/corners/gray_br.gif') no-repeat 100% 0;
    height: 4px;
    padding: 0;
    margin: 0;
}
.rounded .corners_gray_bottom div div { 
    background: #a7a9ac;
    height: 4px;
    margin: 0 4px;
    font-size: 1px;
    padding: 0;
}

А если у последнего убираю бордер то возникает прежняя проблема, фон конечно не вылазит, но ячейка почему то увеличивается для меня это большой вопрос, в чем дело подскажите плиз

Это сообщение отредактировал(а) liliana2 - 22.10.2008, 14:06

webster

Дата 22.10.2008, 19:59 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

Репутация: 34
Всего: 34

Опять же, сначала надо обнулить все отступы по-умолчанию:

Код


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

Затем стоит сделать все вложенные элементы плавающими:

Код


         <div class="rounded">
             <div class="corners_gray_top"><div><div></div></div></div>
                 <div class="content" style="float: left; width: 100%;">
                        <ul class="subnav" style="float: left; width: 100%;">
                        <li><a href="#">Öèôðîâûå ôîòî-, ôèäåî-</a></li>
                        <li><a href="#">Àêñåññóàðû ê ôîòî-, âèäåîòåõíèêå</a></li>
                        <li><a href="#">Êîìïüþòåðíàÿ òåõíèêà</a></li>
                        <li><a href="#">Êïê è êîììóíèêàòîðû</a></li>
                        <li><a href="#">GSM-íàâèãàöèÿ</a></li>
                        <li><a href="#">Ïåðñîíàëüíûå àóäèî-, âèäåî</a></li>
                        <li class="active"><a href="#">Öèôðîâûå ôîòî-, ôèäåî-</a><div class="triangle"></div>
                        <p><a href="#">USB-ôëýøêè</a>, <a href="#">êàðòû ïàìÿòè</a>, <a href="#">âíåøíèå äèñêè</a>, <a href="#">CD/DVD-äèñêè</a></p></li>
                        <li><a href="#">Äîìàøíåå òâ è âèäåî</a></li>
                        <li><a href="#">Ðàçíîå</a></li>
                        </ul>
                 </div>
             <div style="clear: left;" class="corners_gray_bottom"><div><div></div></div></div>
         </div>

Говоря на языке IE сделать значение свойства hasLayuot != -1
После этого, когда внешний вид документа принял одинаковый вид во всех основным броузерах - можно заниматься расстановкой паддингов и марджинов.

liliana2

Дата 23.10.2008, 06:18 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 178
Регистрация: 19.11.2007

Репутация: нет
Всего: нет

про обнуление падингов и марджинов, да я знаю... и то что вы подсказали работает, но только в ие, в фф все едет, и! первый раз слышу про hasLayuot != -1 подскажите плиз
или дайте ссылку где можно про это почитать

Это сообщение отредактировал(а) liliana2 - 23.10.2008, 06:40

webster

Дата 23.10.2008, 07:59 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

Репутация: 34
Всего: 34

У вас Доктайп установлен? Пробовали убрать всю разметку, кроме обнуления отступов и флоатов? Пробовали выносить ваш блок на отдельную страницу?
hasLayout

liliana2

Дата 23.10.2008, 09:57 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 178
Регистрация: 19.11.2007

Репутация: нет
Всего: нет

доктайп транзишионал
а тчо даст вынос на новуб старницу? не понимаю...

webster

Дата 23.10.2008, 19:23 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

Репутация: 34
Всего: 34

Цитата(liliana2 @ 23.10.2008, 06:18

)

и то что вы подсказали работает, но только в ие, в фф все едет

Что едет, где и как?
Поэтому и говорю, что надо код (который был обозначен в первом посте) вынести на отдельную страницу и протестировать его там, без влияния оставшейся верстки - разъезжаться ничего не должно. Скорее всего придется далее искать причины влияния на вышеобозначенный блок.
P.S. hasLayout устанавливать нигде не нужно, его можно только посмотреть при помощи IE Developer Toolbar в IE, либо он у элемента равен -1, либо его вообще не будет (т.е. hasLayout != -1, не равен -1)

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »