Консультация № 131496
10.04.2008, 12:01
0.00 руб.
0 2 2
Коллеги, здравствуйте!
Проблема с кроссбаузерностью - полностью разваливается дизайн в Файерфоксе. Сайт версался с помощью CSS. CSS - во внешнем файле. При этом, часть инструкций выполняется, а часть полностью игнорируется. Пытался менять путь к файлу стилей (относительный, абсолютный) - результат тот-же.
Но если инструкции стиля поместить в атрибуты элемента в html-коде непосредственно на странице, то всё Ок - верстка отображается правильно.
Сам причину не разглядел.
И как теперь жить-то дальше? Может, подскажите?...
Сайт http://www.teplodrom.ru внутренние страницы. Кстати, главная тоже сверстана на CSS, но внешний файл другой

Обсуждение

Неизвестный
10.04.2008, 13:01
общий
это ответ
Здравствуйте, Уланов Андрей Владимирович!

Ошибка в файле стилей. Почему-то у Вас две открывающих фигурных скобки в строке 19.
Неизвестный
14.04.2008, 05:32
общий
это ответ
Здравствуйте, Уланов Андрей Владимирович!
Дело в том, что Эксплорер и Файрфокс по разному воспринимают некоторые комманды. Особенно что касается DIV`ов. Например vertical-align не работает в блочной верстке. Вам проще будет пользоваться CSS -хаками, а именно например:

IE 6 и ниже (не ниже 5 версии)
* html {}
IE 7 и ниже
*:first-child+html {} * html {}
IE 7 и современные браузеры
html>body {}
Последние версии браузеров (не IE 7)
html>/**/body {}
Opera 9 и ниже
html:first-child {}

т.е. для каждого браузера можно написать свои комманды, которые не будут распознаваться другими браузерами.
Еще примерчики:
#myDiv { font-size:small; }

/*Хак для IE5 -- шрифт на размер меньше.
Он не понимает slashed */

* html #myDiv {
font-size: x-small;
f\ont-size: small;
}
/*Хак для Opera 6 --
ей тоже надо на размер меньше*/

html>body #myDiv {
font-size:x-small;
}

тоже самое касается и блоков

DIV
{ width:190px;
height:280px;
margin-bottom: 5px;
clear: both;
voice-family : ""}""; // персонально для эксплорера
voice-family : inherit;
height:280px;
}

// Opera
head:first-child+body DIV { height: 285px;}
//Mozilla
html>body DIV {height: 285px; }

А еще проще - вы просто в поисковике задайте CSS hacks. Очень много информации на эту тему.
Если есть желание, могу прислать полную таблицу хаков относительно всех браузеров.
Удачи
Форма ответа