РЕШЕНО: Неправильное отображение колонок в IE 6 (падение правой и средней колонки)

Главные вкладки

Аватар пользователя selestasvz selestasvz 24 декабря 2008 в 10:29

Здравствуйте !

Вот сижу работаю спокойно с firefox и не думал что в IE вылезит проблема при отображении сайта.
Дело в том, что мой сайт ecosib.z42.ru (некоммерческое сообщество) разделен темой на три столбца.
Так вот в Firefox все отображается правильно, а при просмотре в IE, третий столбец съезжает вниз второго.
Короче косяк полный в этом IE !
Тему использую forest_flore, Друпал 6.5

Где косяк ? Что делать с любителями IE ??? Как решить проблему правильного отображения столбцов в IE ?

Заранее благодарю за ответ.

Комментарии

Аватар пользователя selestasvz selestasvz 24 декабря 2008 в 11:07

Тут еще круче выяснилось !

В системе заложено отображение трёх столбцов только на первой странице.
Когда открываешь любую статью (получается отображение двух колонок), то наблюдается отображение второй колонки в конце первой Lol Вот такая хрень блин !!!

Получается что в IE отображение самой последней колонки приходиться снизу предыдущей. Т.е. третяя колонка под второй или вторая под первой !!!

Блин это закономерность получается. Значит проблема где-то в коде Sad

Аватар пользователя Antoniy Antoniy 24 декабря 2008 в 12:19

Бывает.. Может помочь прописывание ширины для столбцов, можно в процентах. А иногда приходится для IE специально прописывать более меньшую ширину, чем для других браузеров.

Помогает еще уменьшение отступов

Аватар пользователя selestasvz selestasvz 24 декабря 2008 в 12:46

Нашел !
Здесь эта тема уже немного обсуждалась, этот косяк называется:
"в некоторых случаях колонки: центральная и правая "падают" вниз.

Решения я пока не нашел !

Аватар пользователя wazzup wazzup 24 декабря 2008 в 14:47

создать отделные css для IE и там уже эксперементировать

скорее всего дело в том что блок гдето не умещаеться по ширине и поэтому спрыгивает вниз...

неаример изза бага в ие связанного с удвоением отступов

Аватар пользователя wazzup wazzup 24 декабря 2008 в 14:45

и кстати советую проверит в 2х версиях IE как минимум

6 и 7

их поведение очень часто серьезно отличаеться

Аватар пользователя selestasvz selestasvz 24 декабря 2008 в 15:33

Посмотрел указанное решение от ingumsky@drupal.org на http://www.drupal.ru/node/20574

Там оно заточено под тему Newsware from AdaptiveThemes !

Я поэтому и выложил здесь свой page.tpl.php чтобы Вы посмотрели, что конкретно можно сделать.

Я извиняюсь, но я не такой профессионал, чтобы без пошаговых указаний "создать отдельные css для IE и там уже эксперементировать" ... с чем поэкспериментировать Smile

К сожалению, мне необходимо конкретное решение.

Аватар пользователя ingumsky@drupal.org ingumsky@drupal.org 24 декабря 2008 в 17:43

HIgor1968
По ссылке, которую я предлагал чуть выше сказано, что проблема в версиях IE младше 7.

selestasvz
Посмотрите ту тему, решение для которой есть. Там наверняка в page.tpl.php есть что-нибудь типа:

<? php if IE...

То есть там производится определение того, не является ли броузер IE, и подставляется дополнительный css, если посетитель действительно смотрит сайт через IE. По сути, Вам нужно сделать то же самое — проверять версию броузера и подставлять нужный (и подправленный должным образом) css, если так оно и есть.

Аватар пользователя selestasvz selestasvz 24 декабря 2008 в 18:32

Посмотрел еще раз тему.

Нашел в своем page.tpl.php следующие строки:

  <!--[if IE]>
  <style>#search {position:relative;top:-15px;}</style>
  <![endif]-->

Может сюда чего-нибудь можно дописать. В форумах говориться, что это только проблема position:relative, а что можно сделать иначе ?

Аватар пользователя selestasvz selestasvz 24 декабря 2008 в 20:12

Ура !!!!

Кажись получилось.
Вот что сделал:

В файле style.css прописал следующее:

#main {
 float:left;
 width:498px;
 overflow:hidden;
 height: 1%;
}
#sidebar-left, #sidebar-right {
 width: 148px;
 padding: 0;
 vertical-align: top;
 font-size:11px;
 overflow:hidden;
 height: 1%;
 clear: right;
}

Главное здесь это overflow:hidden; height: 1%; clear: right;, а на указанную ширину width:498px не обращайте внимания - это ширина элементов в моей теме.

Кто может проверьте плиз в IE6,7

Аватар пользователя Eugene_S Eugene_S 24 декабря 2008 в 20:37

Проблема 100% в CSS.
Обычно такая штука возникает в двух случаях:
- Суммарная ширина блоков больше ширины контейнера, их вмещающего
- двойные горизонтальные отступы - баг IE6 (лечится добавлением блоку свойства display:inline)
Сейчас все отображается нормально и в 6, и в 7.
(Советую, кстати, использовать browsershots.org для проверки отображения в разных браузерах).

Аватар пользователя HIgor1968 HIgor1968 24 декабря 2008 в 21:12

в 7-м осле нормально.
У тебя верхний рисунок справа повтрятся начинает и темная полоса справа плучается.
поправь в строчке repeat на no-repeat

style.css?o (line 139)

#header {
background:transparent url(images/header.jpg) repeat scroll 0 0;

Аватар пользователя selestasvz selestasvz 25 декабря 2008 в 15:37

HIgor1968
Поправка repeat на no-repeat - не помогло.

Получается что в IE 6 ширина колонок увеличивается, в общем в фотошопе увеличил ширину изображения header и все стало пучком !

ingumsky@drupal.org
Слово "решено" добавил.

Аватар пользователя ND ND 12 февраля 2009 в 11:44

У меня так получилось. В файле ie6.css, он у меня подключается в page.tpl.ph, свойствах стиля вывода блока прописал

#main-content {
float: right;
margin-right: -15px;

width: 100%;
}

Значение margin-right: подбирал методом научного тыка, со значением -10px ситуация не менялась.

В style.css он у меня выглядит так:

#main-content {
float: left;
width: 100%;
}