VPF::IE8, position: absolute - Форум программистов

oshilan

Дата 27.1.2013, 18:45 (ссылка)

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

Загрузка ...

Шустрый

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

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

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css">
.row {
    background-color: #ffaaaa;
}

.icon {
    float: left;
    margin-right: 5px;
}

.iconStick {
    background-color: #ff8888;
    position: absolute;
}
</style>

<div class="row">
    <span>Очень длинный никудышний текст</span>
    <div class="icon" style="width: 18px;">
        <div class="iconStick" style="margin-left: 2px; margin-top: 6px; width: 14px; height: 6px;"></div>
        <div class="iconStick" style="margin-top: 2px; margin-left: 6px; width: 6px; height: 14px;"></div>
    </div>
</div>

Проблема:
В Internet Explorer (и в Android-браузере тоже) текст заезжает под крестик (плюсик): смотреть
В Opera (эталон): user posted image

В IE8 (саксон): user posted image

Слабое решение:
Отказаться от position: absolute, и использовать отрицательные marginы: смотреть

Вопрос:
Есть ли какие-нибудь хорошие альтернативные решения?
Отказ от Strict, использование таблиц не предлагать.

Arantir

Дата 27.1.2013, 19:32 (ссылка)

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

Загрузка ...

Рыбак без удочки

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

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

А почему просто

Код


.row>span { margin-left: 18px; }

не сделать?
Раз уж вы разметку со стилями все равно смешиваете, то проще сам текст отодвинуть.

--------------------

interface Жопа {
// ATTENTION: has to be implemented by every class of the project for proper project work
}

oshilan

Дата 27.1.2013, 21:08 (ссылка)

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

Загрузка ...

Шустрый

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

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

Arantir, не-не, не то. Это просто здесь я криво накидал для примера, а в реальном проекте я не смешиваю вид и структуру.

ksnk

Дата 27.1.2013, 21:44 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

И в Хроме тоже.

Можно почитать про использование свойства position хоть что-то. Например вот это

absolute используется вместе с ОБЯЗАТЕЛЬНЫМ указанием top/bottom и left/right. Для указания,относительно какого родительского элемента будем позиционироваться, служит position:relative.

http://jsfiddle.net/PsKvF/

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Arantir

Дата 27.1.2013, 22:34 (ссылка)

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

Загрузка ...

Рыбак без удочки

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

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

Цитата(oshilan @ 27.1.2013, 20:08

)

Это просто здесь я криво накидал для примера, а в реальном проекте я не смешиваю вид и структуру.

"вид и структуру"... =)
Смешивать стиль и разметку - это когда у вас крестика без двух div не существует, а без стилей у крестика шарики за ролики заедут.

Почему бы не сделать его картинкой? Только не говорите, что экономите место. Такая картинка будет весить меньше того текста разметки, который вы на этот крестик потратили.
И достижение показанного вами визуального эффекта намного проще в случае использования картинки. Чуть ли не само по себе получится.

Крестик, прозрачный - всего 151 байт:

Присоединённый файл ( Кол-во скачиваний: 3 )

BrowserPreview_tmp.png 0,15 Kb

--------------------

interface Жопа {
// ATTENTION: has to be implemented by every class of the project for proper project work
}

oshilan

Дата 27.1.2013, 22:49 (ссылка)

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

Загрузка ...

Шустрый

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

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

ksnk, спасибо, почитаю.
Arantir, та я не собирался клепать иконку из div'ов, просто хотел донести вопрос нагляднее)

Arantir

Дата 27.1.2013, 23:24 (ссылка)

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

Загрузка ...

Рыбак без удочки

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

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

Цитата(oshilan @ 27.1.2013, 17:45

)

Есть ли какие-нибудь хорошие альтернативные решения?

Цитата(oshilan @ 27.1.2013, 20:08

)

Это просто здесь я криво накидал для примера, в реальном проекте я не смешиваю вид и структуру.

Цитата(oshilan @ 27.1.2013, 21:49

)

та я не собирался клепать иконку из div'ов

oshilan, что ж, каков вопрос - таков ответ...

--------------------

interface Жопа {
// ATTENTION: has to be implemented by every class of the project for proper project work
}

oshilan

Дата 28.1.2013, 11:28 (ссылка)

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

Загрузка ...

Шустрый

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

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

Arantir, ладно, я соврал, я на самом деле собираюсь делать "иконки" из div'ов. Просто дело в том, что я не использую изображения (png) из-за того, что не знаю, каким размером будет родительский бокс, а размер иконки должен растягиваться относительно размеров родительского бокса. Изображения будут интерполироваться убого, а вот рисование div'ами в самый раз. И дело не в размере траффика, ведь "иконки" я буду генерировать jQuery-скриптом на стороне клиента.
Просто, если бы Opera отображала данный файл тоже криво, я бы перешёл бы к другой технике, а так мне интересно разобраться.

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