VPF::Абсолютное позиционирование в IE

Alexis

Дата 1.8.2007, 12:04 (ссылка)

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

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 133
Регистрация: 14.8.2006
Где: Казань

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

Наверное вопрос уже не раз обсуждался, но я, к сожалению, не нашел на него ответ.

Мне необходимо сделать класс, принадлежащие которому элементы будут иметь бордюр с закругленными краями, толщина бордюра 1px, радиус закругления углов 10px.

Поскольку использование JS крайне нежелательно, то было принято решения реализовать закругленные края с помощью картинок. Дабы не плодить всякие неочевидные хитрости вроде один уголок относится к div'у, другой к заголовку, третий к абзацу и т. п. пошел по самому что ни на есть простому и верному пути, а именно на странице создал конструкции вроде:

Код


<div class="box">
    <h3>Header</h3>
    <p>
        Content<br />
        Content<br />
        Content<br />
        Content<br />
    </p>
    <div class="box-lt"></div>
    <div class="box-rt"></div>
    <div class="box-lb"></div>
    <div class="box-rb"></div>
</div>

Соответственно, в CSS прописал следующие стили:

Код


div.box {
    border: 1px solid #737373;
    position: relative;
    margin-bottom: 1em;    
}

div.box div.box-lt,
div.box div.box-rt,
div.box div.box-lb,
div.box div.box-rb {
    width: 10px;
    height: 10px;
    position: absolute;
}

div.box div.box-lt {
    background: transparent url(images/box_lt.gif) no-repeat left top;
    left: -1px;
    top: -1px;    
}

div.box div.box-rt {
    background: transparent url(images/box_rt.gif) no-repeat right top;
    right: -1px;
    top: -1px;    
}

div.box div.box-lb {
    background: transparent url(images/box_lb.gif) no-repeat left bottom;
    left: -1px;
    bottom: -1px;    
}

div.box div.box-rb {
    background: transparent url(images/box_rb.gif) no-repeat right bottom;
    right: -1px;
    bottom: -1px;    
}

div.box p {
    padding: 10px 15px 15px 15px;
}

FF понял меня верно и позиционировали картинки с уголками относительно div.box, на том я и успокоился. Когда все было сверстано решил таки проверить в Opera -- все отлично. И вот, запустил IE smile

Первое чем он меня удивил так это то, что некоторые бордюры находились внутри элемента, а некоторые снаружи. Ладно, написал отдельную CSS для IE с другими отступами:

Код


div.box div.box-lt {
    background: transparent url(images/box_lt.gif) no-repeat left top;
    left: -1px;
    top: 0pt;    
}

div.box div.box-rt {
    background: transparent url(images/box_rt.gif) no-repeat right top;
    right: 0pt;
    top: 0pt;
}

div.box div.box-lb {
    background: transparent url(images/box_lb.gif) no-repeat left bottom;
    left: -1px;
    bottom: 0pt;
}

div.box div.box-rb {
    background: transparent url(images/box_rb.gif) no-repeat right bottom;
    right: 0pt;
    bottom: 0pt;
}

div.box p {
    padding: 10px 15px 15px 15px;
}

div.box h3 {
    padding: 15px 5px 5px 5px;
    margin: 0pt 15px;
    border-bottom: 1px solid #737373;
}

Теперь картинки позиционировались верно. Но радоваться было еще рано. Оказалось, что все будет красиво если только это самый div.box будет на странице один. Если даже просто вставить на страницу их две штуки, то нижние уголки уедут далеко. Если вставить div.box в ячейку таблицы, то уголки разнесутся по углам ячейки, т. е. будут позиционироваться абсолютно, но не относительно свои родителя div.box, а почему-то относительно ячейки.

Даже не знаю, что теперь делать. Насколько я понимаю, по идее элементы с абсолютным позиционированием относительно родителя (у div.box стиль position: relative), но, может быть, я что-то неверно понимаю?

japanes

Дата 1.8.2007, 17:20 (ссылка)

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

Загрузка ...

Бывалый

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

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

рабочий пример:

Код


<style>
div.round_block {background-color: #d6dadb; color: black; position: relative; width: 80%; left:-15px;}
div.round_block div.lt-corner {top: 0; left: 0; background: url('/i/greyBlock-lt.gif') 0 0 no-repeat;}
div.round_block div.rt-corner {top: 0; right: 0; background: url('/i/greyBlock-rt.gif') 0 0 no-repeat;}
div.round_block div.rb-corner {bottom: 0; right: 0; background: url('/i/greyBlock-rb.gif') 0 0 no-repeat;}
div.round_block div.lb-corner {bottom: 0; left: 0; background: url('/i/greyBlock-lb.gif') 0 0 no-repeat;}
div.round_block div.rt-corner, div.round_block div.rb-corner {//right: expression( this.parentNode && this.parentNode.offsetWidth % 2 ? -1 : -0 );}
div.round_block div.rb-corner, div.round_block div.lb-corner {//bottom: expression( this.parentNode && this.parentNode.offsetHeight % 2 ? -1 : -0 );}
</style>
<div class="round_block">
<div class="lt-corner"><!-- spacer --></div>
<div class="rt-corner"><!-- spacer --></div>
<div class="rb-corner"><!-- spacer --></div>
<div class="lb-corner"><!-- spacer --></div>
<div class="content">
<!-- тут контент блока -->
</div>
</div>

если уголки уедут вниз измени стиль для div.round_block на:

Код


div.round_block {background-color: #d6dadb; color: black; position: relative; width: 80%; left:-15px;//float:left;}

Это сообщение отредактировал(а) japanes - 1.8.2007, 17:22

Alexis

Дата 1.8.2007, 20:12 (ссылка)

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

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 133
Регистрация: 14.8.2006
Где: Казань

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

japanes, спасибо! smile

Посмотрел ваш пример. Заметил, что вы установили ширину div.round_block, тоже установил для своих боксов ширину (поставил 100%, все равно они еще в один div закидываются и должны тянуться на полную ширину родителя и в дизайне ничего не изменилось) и усе заработало.

У меня бордюр с закругленными углами. Если просто закругленные углы и картинка с углам не доходит 1px до края, то для просто фона с закругленными углами ничего страшного, а для бордюра это просто смертельно. Вот у меня нижние углы иногда встают нормально, а иногда не доходят один пиксель до края -- зависит от содержимого (опять появляется это только в IE).

Тогда вставил ваши две последние строчки, немного изменив (заменил "-1" на "-2", а "-0" на "-1"):

Код


div.box-rt, div.box div.box-rb {
    //right: expression( this.parentNode && this.parentNode.offsetWidth % 2 ? -2 : -1 );
}

div.box div.box-rb, div.box div.box-lb {
    //bottom: expression( this.parentNode && this.parentNode.offsetHeight % 2 ? -2 : -1 );
}

Так же поставил всем элементам расстояния от углов в -1px (у вас они нулевые). И все заработало! И CSS одна на все браузеры smile

Теперь уже без глюков, тьфу, тьфу, тьфу smile

Поставил бы вам плюс, да не дорос еще. Может быть кто-нибудь из модераторов поставит?

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