Подписаться на блог
В Твиттере

Реплики и ссылки на заметки

В Фейсбуке

Ссылки на заметки

Вконтакте

Ссылки на заметки

В Телеграме

Ссылки на заметки

В Тумблере

Заметки целиком

В Же-же

Заметки целиком

По РСС

Заметки целиком

Если что-то из этого не работает, напишите мне: ilyabirman@ilyabirman.ru.

Календарь наезжает на Шарапову

Вот здесь календарь наезжает на Шарапову.

Календарь — это <div class="right_calendar">:

div.right_calendar {
  position: absolute;
  top: -100px;
  left: 60%;
  width: 40%;
}


Если его просто убрать из HTML, то надпись «Мария Шарапова выиграла Wimbledon» смещается чуть ниже — как раз туда, где она должны быть, чтобы не пересекаться с календарём. Если вернуть, надпись поднимается выше пикселей на 30. Эффект наблюдается в IE 6 и Netscape 7. В Опере, естественно, не наблюдается. С каких пор у нас абсолютно позиционированные элементы affect normal flow? Кто умный, как сделать, чтобы не сползало?
Подписаться на блог
Поделиться
Отправить
7 комментариев
kukutz
В RSS уходят относительные ссылки. Баг.

Кроме того, ненльзя отправить камент в Mozilla, потому что
function kd () {
if ((76 == event.keyCode) && event.shiftKey && event.ctrlKey)
нет event в Mozilla.

Илья Бирман
RSS сделал, в комментах нужно просто писать имя и e-mail
Sanja
И ещё — в уведомлении на Email есть сноска (*) — элемент, для жанра plain-text Email ну совсем несвойственный. Сбивает с толку.
Sergeant
Может бордер с чекбоксов убрать? и выровнять их с подписями по valign=’middle’. Это я говорю о чекбоксе «прислать мне ответ автора..», к примеру.
Илья Бирман
Думаешь, это поможет Шараповой?
contra
Под заметкой «4 комментария» , кликаем на эту ссылку и видим «комментарии(3)». До этого было 2 и 1, то есть на один больше.
Илья Бирман
Исправил, спасибо.
Sergeant
Илья Бирман, иначе стал бы предлагать? :)
Илья Бирман
Что предлагать?

Update: дошло ;)
Mash
>> В Опере, естественно, не наблюдается

В Опере размер шрифта получается чуть меньше, поэтому и не наезжает. У меня так. Например, высота цифры «3» в календаре — 59 vs. 65 px. М.б. это и не единственная причина, но копать сейчас нет времени.

Один из путей (при условии сохранения position: absolute;)
- «поднять» календать ( div.right_calendar {top: ...} )
- уменьшить table.calendar u {font-size: ...}

Более долгий путь — посмотреть в сторону position:relative или float.
Илья Бирман
Это не «не единственная причина», а не причина. В чём причина я написал.

Соответственно, т. к. ты не понял причину, то твои «пути» направлены не туда.
Mash
Mash>> Например, высота цифры «3» в календаре — 59 vs. 65 px.

:) Не в пикселях конечно, но пропорции именно такие.

Ладно, я понял так, что нужно просто избежать «наезда».

o.k. Открой css, найди div.corner и измени значение margin-top (например, на margin-top:300px;). Сравни поведение страницы в IE и Opera. В Opera «сползут вниз» и календарь, и дата заметки; в IE — только лишь календарь.

Если же календарь убрать из HTML, то margin-top блока div.corner (тот, который идёт сразу за календарём, перед датой заметки) начинает работать и в IE.

Для того, чтобы margin-top блока div.corner работал «не стесняясь присутствия календаря»: наиболее простой путь — добавить перед ним какой-нибудь <br/>.

Илья Бирман>> С каких пор у нас абсолютно позиционированные элементы affect normal flow?

Получается, что из-за абсолютно позиционированного элемента у другого элемента не срабатывает margin-top. Баг IE.

P.S. Если я опять сказал не то или где-то ошибся, то... Времени мало, спешу сделать всё сразу.

Пользовательский интерфейс
Доступен первый раздел
электронного учебника

Популярное