Решение проблем отображения Drupal.ru в Internet Explorer 6

Прислано: inc

чт, 20/09/2007 - 20:18

Другие статьи по теме:

Проблемы:

1) аватары не отображаются, но вылазят на пределы блока комментария:
ScreenShot1
2) некоторые ссылки "убегают" в сторону:
ScreenShot2
3) в некоторых случаях колонки: центральная и правая "падают" вниз

Решения:

Первое:

Использовал DevToolBar выяснил, что у "скачущих" элементов, как и у аватаров выставлено свойство position:relative Стал копать файлы CSS темы Zen. Нашел, что это свойство выставлено для всех 3-х колонок - Div-ная верстка, также это свойство задано для элементов в шапке сайта(Header) и зачем-то для элементов списка(ol, ul, dl).

1) Для исправления "убегания" ссылок на и для отображения аватаров в комментариях:

В файле layout.css установить position в static вместо relative:

#squeeze {
  position: static; 
  padding: 0 1em;
}

2) На всякий случай ;)

В файле style.css убрать position:relative:

ol, ul, dl {
  /* !!! position: relative; */
}

3) Чтобы аватары не выезжали за пределы блока комментария вниз
(их будет сдерживать блок с ссылками "ответить / сообщить-спам")

В файле style.css добавить clear:both:

/* Link styles */
.comment .links {
  text-align: right;
  clear:both;
}

Этот способ не поборол проблему "падения" колонок и породил новую проблему: исчезание фона у элементов списка(например, список пользователей на сайте).

Второе, Более стабильное решение:

Стили изменены по аналогии с темой Garland.

1) отменить все 3 предыдущие правки layout.css и style.css

2) для исправления отображения аватаров в комментариях, применить патч к файлу comment.tpl.php

3) для исправления "падения" колонок и "убегания" некоторых ссылок, применить патч к файлу page.tpl.php

Опубликовал патчи на drupal.org:
Про аватары в комментариях - http://drupal.org/node/178560
Про съезжающие колонки - http://drupal.org/node/178558 - неполный патч,
потому как лечение убегающих ссылок уже сделано здесь: http://drupal.org/node/170236

!!Обнаружен баг второго решения: в IE 5.5 и IE 5 центральная колонка не отображается!!

Более подробно о решениях читайте ниже

‹ Верстка HTML для drupal.ru Вам надоели тупые вопросы? ›

Комментарии


Настройки просмотра комментариев

Выберите нужный метод показа комментариев и нажмите "Применить"
Опубликовано Valeratal в пт, 21/09/2007 - 03:57.
Valeratal

у мну также? такие ж глюки, IE 6


Опубликовано andreyle в пт, 21/09/2007 - 04:11.
andreyle

Глюки с картинками наблюдаются у меня на этой странице в трех браузерах. (IE 6.0.3790.1830, FF 2.0.0.6, Opera 9.2). На других страница так же замечал глюки с картинками отдельных пользователей (например, здесь: http://drupal.ru/node/4439 FF, Opera).


Опубликовано igdrasil@drupal.org в пт, 21/09/2007 - 04:19.
igdrasil@drupal.org

а overflow в нодах и комментах я еще с весны прошу акселя настроить


Опубликовано axel в пт, 21/09/2007 - 07:45.
axel

Внёс изменения, как описано выше. Overflow в нодах убрал. Стало лучше?


Опубликовано igdrasil@drupal.org в пт, 21/09/2007 - 08:07.
igdrasil@drupal.org

получше, но я писал про overflow:auto вместо min-height в комментах, а то аватары в коротких сообщениях вылезают из поста (в FF тоже), заодно туда же zoom:1 или явную ширину - подругому IE6 не поймет overflow


Опубликовано axel в пт, 21/09/2007 - 08:11.
axel

Ну и как теперь?


Опубликовано inc в пт, 21/09/2007 - 08:20.
inc

Спасибо axel, скачущих ссылок теперь вроде нигде нет, появились аватары в комментах.

Но аватары по-прежнему вылазят за пределы блока
Это я ошибся в пункте 3:
clear:both надо добавить в .comment .links {, а не в ul.links {

P.S. Осталось исправить сползание вниз правой колонки


Опубликовано igdrasil@drupal.org в пт, 21/09/2007 - 08:29.
igdrasil@drupal.org

вылезают аватары(((
XP FF2.0.7 1024*768


Опубликовано vadbars@drupal.org в пт, 21/09/2007 - 09:10.
vadbars@drupal.org

У меня в IE6 появились автатары. Но центральная колонка упала вниз под левую.


Опубликовано axel в пт, 21/09/2007 - 09:13.
axel

Что-то под что-то упало. Звучит страшно...


Опубликовано vadbars@drupal.org в пт, 21/09/2007 - 09:16.
vadbars@drupal.org

Прикольная опечатка получилась - "автатары" :))) Народ такой форумный...


Опубликовано axel в пт, 21/09/2007 - 09:45.
axel

добавил


Опубликовано axel в пт, 21/09/2007 - 09:46.
axel

Ура, после clear:both аватарки перестали глючить в FF.


Опубликовано vadbars@drupal.org в пт, 21/09/2007 - 10:03.
vadbars@drupal.org

В Гарланде при некорректном использовании html пользователями (незакрытые теги) происходит это сексуальное падение одного на другого :). Решил включением модуля коррекции html (вошел как стандарт в Drupal6). Может, и здесь поставить до перехода на "шестерку"?


Опубликовано inc в пт, 21/09/2007 - 10:24.
inc

>>Ура, после clear:both аватарки перестали глючить в FF.
У меня DevToolBar показывает, что у .comment .links все еще не добавлено clear:both
Мож из-за кэширования


Опубликовано inc в пт, 21/09/2007 - 11:24.
inc

На Drupal.ru используется модифицированная тема Zen, может не сработало из-за модификаций

Прикрепил к комментарию оригинальные файлы Style.css и Layout.css из темы zen-5.x-0.6 с уже внесеными изменениями. Изменения помечены "!!!"

P.S. Проверял на localhost'е - колонки не падают(в IE6, FF2, Opera9)!


Опубликовано inc в сб, 22/09/2007 - 13:09.
inc

2 axel:
Нашел из-за чего clear:both не появилось.

На Drupal.ru включено "Объединение и сжатие файлов CSS"(находится в admin/settings/performance).

Выключи и включи это снова, чтобы изменения в файле /sites/drupal.ru/themes/zenru/style.css вступили в силу

P.S. А колонки все-таки падают в IE


Опубликовано PVasili в сб, 22/09/2007 - 14:11.
PVasili

Счёлкнил :)


Опубликовано igdrasil@drupal.org в сб, 22/09/2007 - 15:07.
igdrasil@drupal.org

можно не перещелкивать, а просто удалить файл с результирующим css


Опубликовано inc в сб, 22/09/2007 - 16:15.
inc

Ура, аватары больше не сползают!!!

// сползают только колонки


Опубликовано igdrasil@drupal.org в сб, 22/09/2007 - 16:31.
igdrasil@drupal.org

в боковых я долго мучился (тоже zen), но вроде одолел, если кому нужно - могу прислать style.css и layout.css


Опубликовано inc в вс, 23/09/2007 - 08:01.
inc

>>в боковых я долго мучился (тоже zen), но вроде одолел, если кому нужно - могу прислать style.css и layout.css

Не нужно. Падение колонок - это поведение, которое не соответствует стандартам W3C (в отличии от действия clear:both: CSS 2.1 Specs., sec. 9.5.2), - это баги одного IE 6 (и возможно младших версий). Лучше их фиксы собрать в отдельный CSS и прикреплять при необходимости, как это сделано в теме Garland:

    
<!--[if lt IE 7]>
    <style type="text/css" media="all">@import "/fix-ie.css";</style>
    <![endif]-->

В падении колонок виновата как минимум Internet Explorer and the Expanding Box Problem и The IE6 Three Pixel Text-Jog.

P.S. Поизучаю все остальные баги ( на http://www.positioniseverything.net/explorer.html ), и соберу решения тех, что не исправлены, вместе. А можно просто fix-ie.css от Garland'а адаптировать. Не, лучше поизучаю ;)


Опубликовано igdrasil@drupal.org в вс, 23/09/2007 - 08:29.
igdrasil@drupal.org

а что толку? у меня на сайтах больше 50% под 6-кой, мне пофиг на несоответствие стандартам, мне нужно чтобы они видели контент, а не шли на другой сайт, т.к. мой глючит (хотя глючит их браузер)


Опубликовано PVasili в вс, 23/09/2007 - 08:39.
PVasili

5 копеек вставлю: "падение колонок" как раз, вполне соответствует спецификации (отмечу а не стандарту) W3С. Ошибки в следовании рекомендациям тут не при чем...
Падают не только в осле.
Баги изучать как бы уже поздновато. Все их уже давно нашли (все уже украдено до нас (с)) и научились обходить . Можно найти со страницы http://docs.drupal.ru/doc/poleznye_ssylki_dlya_dizainerov


Опубликовано inc в вс, 23/09/2007 - 09:48.
inc

>>Падают не только в осле.
Ссылки на страницы в студию (будем исследовать)

>>Баги изучать как бы уже поздновато. Все их уже давно нашли (все уже украдено до нас (с)) и научились обходить . Можно найти со страницы http://docs.drupal.ru/doc/poleznye_ssylki_dlya_dizainerov

Конечно уже все нашли, я ж и хочу прочитать чужие описания.

Однако, мы все свидетели того, что в теме Zen не все баги исправлены. Чтобы их исправить, я так понимаю, надо узнать врага в лицо.


Опубликовано inc в пн, 24/09/2007 - 06:54.
inc

2 igdrasil@drupal.org:

Пришли, пожалуйста, свои style.css и layout.css

Мое решение работает не всегда, чего-то не хватает:

#page #container #main {  
 overflow:hidden; 
 height: 1%;
} 
/* чтобы не было обрезки */
 #squeeze {
  position: relative;
}

Правая колонка сползает на странице admin/settings/performance


Опубликовано inc в пн, 24/09/2007 - 15:08.
inc

Кроме вышеописанного я еще добавил:

	
#sidebar-right {
clear: right;
}

и правая колонка теперь не падает совсем (мож плохо проверял ;)
также не падает и центральная колонка (для нее было достаточно того, что было описано в моем предыдущем посте).

Обоснование фрагмента:

ol, ul, dl {
 position: relative;
}

Это - хак для борьбы с багом IE The IE/Win Disappearing List-Background Bug, этот баг появляется только если у контейнера списка установлено position: relative. Таких контейнеров несколько #squeeze, .sidebar, #logo-title, #footer img.drupal-powered. Первые 2 контейнера как раз и вмещают все 3 колонки сайта, так что этот хак нужен.


Опубликовано inc в пн, 24/09/2007 - 18:11.
inc

2 axel:

Второе, Более стабильное решение:
1) отменить все 3 предыдущие правки layout.css и style.css

2) для исправления отображения аватаров в комментариях, применить патч comment.tpl.php.patch к comment.tpl.php

3) для исправления "падения" колонок и "убегания" некоторых ссылок, применить патч page.tpl.php.patch к файлу page.tpl.php

// Стили изменены по аналогии с темой Garland


Опубликовано igdrasil@drupal.org в вт, 25/09/2007 - 00:03.
igdrasil@drupal.org

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


Опубликовано inc в вт, 25/09/2007 - 06:00.
inc

Патчи сделаны с параметром -u:
diff -u node.tpl.php.old node.tpl.php > node.tpl.php.patch , поэтому в файлах *.patch еще и показаны избыточные строки кода до и после изменения. Так что если файлы уже были изменены, наличие этих дополнительных строк позволяет понять контекст вносимых изменений


Опубликовано inc в вт, 25/09/2007 - 19:09.
inc

Опубликовал патчи на drupal.org:
Про аватары в комментариях - http://drupal.org/node/178560
Про съезжающие колонки - http://drupal.org/node/178558 - неполный патч,
потому как лечение убегающих ссылок уже сделано здесь: http://drupal.org/node/170236


Опубликовано inc в вт, 02/10/2007 - 18:40.
inc

Тестировал в IE 5.5 и IE 5 - центральная колонка просто не отображается :(


Опубликовано inc в вт, 02/10/2007 - 18:52.
inc

IE 4 вообще не грузит стили(т.к. используется директива @import), а IE 3 не понимает UTF-8.

Для тестирования брал броузеры отсюда


Опубликовано Slim в пн, 08/10/2007 - 12:54.
Slim

Думаю это не смертельно, но у меня в опере логотип нормальный, а в IE 6 фон логотипа темнее цвета шапки. Имеется в виду сайт друпал.ру


Опубликовано inc в вт, 04/12/2007 - 19:50.
inc

Напомню, исправлять пытались версию Zen 0.6.
Сейчас скачал и посмотрел версию 0.8.
К сожалению, Чуда не произошло - проблемы остались не решенными .
Центральная колонка, по-прежнему местами падает под левую колонку, плюс добавился баг с отображением табов в IE(даже в IE7 Portable!)


Опубликовано MDD в вт, 04/12/2007 - 21:14.
MDD

у меня нет автарок на сайте, но колонка падала время от времени... вылечил правкой значений в layers.css, пока помогло... стало чуть менее красиво, но зато работает


Опубликовано Valeratal в сб, 08/12/2007 - 10:24.
Valeratal

я (тайно) надеюсь с 6-йм друпалом темы будут менее "падучие" :)


Опубликовано StR в сб, 26/01/2008 - 05:22.
StR

При заходе на форум - центральной содержание упало вниз, так что я его просто не видел. Думал пустая страница. Несколько раз пытался перегрузить, потом дошло вниз промотать. IE 6

При заходе на страницу темы все нормально. Начал редактировать свой комментарий - опять все внизу. И кстати, с результатами поиска то же самое. Хотя буквально пару дней назад использовал поиск, было нормально.


Ссылки партнёров