24 декабря 2008 в 10:29
Здравствуйте !
Вот сижу работаю спокойно с firefox и не думал что в IE вылезит проблема при отображении сайта.
Дело в том, что мой сайт ecosib.z42.ru (некоммерческое сообщество) разделен темой на три столбца.
Так вот в Firefox все отображается правильно, а при просмотре в IE, третий столбец съезжает вниз второго.
Короче косяк полный в этом IE !
Тему использую forest_flore, Друпал 6.5
Где косяк ? Что делать с любителями IE ??? Как решить проблему правильного отображения столбцов в IE ?
Заранее благодарю за ответ.
Комментарии
http://drupal.ru/node/20981
Сам обхожусь FireBug-ом, но это для осла, может поможет.
Тут еще круче выяснилось !
В системе заложено отображение трёх столбцов только на первой странице.
Вот такая хрень блин !!!
Когда открываешь любую статью (получается отображение двух колонок), то наблюдается отображение второй колонки в конце первой
Получается что в IE отображение самой последней колонки приходиться снизу предыдущей. Т.е. третяя колонка под второй или вторая под первой !!!
Блин это закономерность получается. Значит проблема где-то в коде
Бывает.. Может помочь прописывание ширины для столбцов, можно в процентах. А иногда приходится для IE специально прописывать более меньшую ширину, чем для других браузеров.
Помогает еще уменьшение отступов
Нашел !
Здесь эта тема уже немного обсуждалась, этот косяк называется:
"в некоторых случаях колонки: центральная и правая "падают" вниз.
Решения я пока не нашел !
Почитайте сайт с учебниками по CSS и т. д. - htmlbook.ru
Может как-то конкретное решение можно найти ?
Вот прикрепляю свой page.tpl.php файл.
Видимо, Вы плохо искали: http://www.drupal.ru/node/20574
создать отделные css для IE и там уже эксперементировать
скорее всего дело в том что блок гдето не умещаеться по ширине и поэтому спрыгивает вниз...
неаример изза бага в ие связанного с удвоением отступов
и кстати советую проверит в 2х версиях IE как минимум
6 и 7
их поведение очень часто серьезно отличаеться
Посмотрел указанное решение от ingumsky@drupal.org на http://www.drupal.ru/node/20574
Там оно заточено под тему Newsware from AdaptiveThemes !
Я поэтому и выложил здесь свой page.tpl.php чтобы Вы посмотрели, что конкретно можно сделать.
Я извиняюсь, но я не такой профессионал, чтобы без пошаговых указаний "создать отдельные css для IE и там уже эксперементировать" ... с чем поэкспериментировать
К сожалению, мне необходимо конкретное решение.
page.tpl.php не поможет. Как минимум все css не видим. Надо или всю тему смотреть или по ссылке страницу.
page.tpl.php не поможет. Как минимум все css не видим. Надо или всю тему смотреть или по ссылке страницу.
В этой теме один css.
Вот я и его прикладываю.
И для тех кто просмотрел.
Адрес сайта: http://ecosib.z42.ru
И Вообще вся тема всего 68кБ.
Тоже прикладываю.
в 7-м осле все в норме.
style.css
main {
float:left;
width:500px;
}
Попробуй тупо 500px уменьшить на пару пикселей.
Попробовал !
Не помогает. Пробовал и 498 и 490 и даже 510
Не помогает !
HIgor1968
По ссылке, которую я предлагал чуть выше сказано, что проблема в версиях IE младше 7.
selestasvz
Посмотрите ту тему, решение для которой есть. Там наверняка в page.tpl.php есть что-нибудь типа:
То есть там производится определение того, не является ли броузер IE, и подставляется дополнительный css, если посетитель действительно смотрит сайт через IE. По сути, Вам нужно сделать то же самое — проверять версию броузера и подставлять нужный (и подправленный должным образом) css, если так оно и есть.
Посмотрел еще раз тему.
Нашел в своем page.tpl.php следующие строки:
<style>#search {position:relative;top:-15px;}</style>
<![endif]-->
Может сюда чего-нибудь можно дописать. В форумах говориться, что это только проблема position:relative, а что можно сделать иначе ?
Ура !!!!
Кажись получилось.
Вот что сделал:
В файле style.css прописал следующее:
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
Проблема 100% в CSS.
Обычно такая штука возникает в двух случаях:
- Суммарная ширина блоков больше ширины контейнера, их вмещающего
- двойные горизонтальные отступы - баг IE6 (лечится добавлением блоку свойства display:inline)
Сейчас все отображается нормально и в 6, и в 7.
(Советую, кстати, использовать browsershots.org для проверки отображения в разных браузерах).
Спасибо! Очень полезная информация!
в 7-м осле нормально.
У тебя верхний рисунок справа повтрятся начинает и темная полоса справа плучается.
поправь в строчке repeat на no-repeat
#header {
background:transparent url(images/header.jpg) repeat scroll 0 0;
selestasvz
Не забудьте добавить в заголовок топика слово РЕШЕНО, чтобы другие посетители знали, что здесь есть решение вопроса.
HIgor1968
Поправка repeat на no-repeat - не помогло.
Получается что в IE 6 ширина колонок увеличивается, в общем в фотошопе увеличил ширину изображения header и все стало пучком !
ingumsky@drupal.org
Слово "решено" добавил.
Главное результат;) А он положительный и это хороше.
У меня так получилось. В файле 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%;
}