Прошу помощи по кросс-броузерной верстке

[GRIG]

Привет всем.

Делаю сайт на заказ. Движок - Джумла 2.5, дизайн - заказной от стороннего разработчика, преобразование дизайна в шаблон джумлы - от меня.

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

Для примера - страница http://test.psy-actual.ru/team/persons

Файрфокс версии 23.0.1 - все выглядит идеально. В точности как задумано. (Что не удивительно - это мой основной рабочий инструмент)

Хром версии 29.0.1547.76 - почти все хорошо, только последняя фотография почему-то съехала на следующий ряд. Это странно, поскольку для ее вывода используется тот же класс, что и в других рядах из 3 фотографий. Единственная версия - слишком длинная подпись под фотографией, из-за чего блок "фото+подпись" не умещается в оставшееся свободное место.

Эксплорер версии 9.0.8112.16421 - плохо. Такое впечатление, что он начисто проигнорировал мои указания по загрузке и использованию шрифтов с сайта. Невооруженным глазом видно, что шрифт не такой, как в двух предыдущих броузерах. Хотя при просмотре отладочными средствами в свойстве font-family показывается правильное значение. Из-за этого полный перекос макета.

Сафари 5.1.7 - вообще жуть какая-то. Почему-то под основную часть содержимого страницы выделяется блок шириной 393 пикселя, а не 697, как нужно по эскизу. И к тому же фоновый цвет, установленный для всей страницы, не совпадает с фоновым цветом рисунка в шапке сайта, из-за чего рисунок отображается с более темной полосой по контуру. На калибровку монитора это списать невозможно - все 4 броузера выводили страницу на один и тот же монитор.

Посоветуйте, где чего подкрутить, чтобы во всех вариантах было нормально.

Заранее спасибо.

[spdif]

для - div.persons div.pc-3 padding-left: 0;

[GRIG]

для - div.persons div.pc-3 padding-left: 0;

И что это даст?

Кстати, просто так менять это нельзя - там padding-left используется для организации красного уголочка возле левого верхнего угла фотографии. А это существенный элемент дизайна.

Единственная версия - слишком длинная подпись под фотографией, из-за чего блок "фото+подпись" не умещается в оставшееся свободное место.

Кстати, вот еще вопрос: почему для одной и той же надписи одним и тем же шрифтом файрфокс вычисляет ширину 160 пикселей, а хром - 161 пиксель? Убрал точку на конце надписи - и в хроме все стало выглядеть так же хорошо, как и в файрфоксе.

(Это на локальном отладочном компе. На хостинге пока все по-старому.)

[klierik]

ИЕ рендерит шрифт по-своему и сглаживание у него другое.

Сафари под Мас: http://screencast.com/t/ifDJrXG6

Лечится так: http://screencast.com/t/P7NSSDdWqxk

Хром Версия 29.0.1547.76: http://screencast.com/t/6TGAQ66txJQ -- все ок.

FF - как в хроме.

[GRIG]

За "таблетку" к сафари - спасибо огромное. Помогло даже под виндой.

Буду также очень признателен за объяснение ее действия.

[klierik]

а что тут объяснять...

свойство overflow:hidden; надо использовать только в тех местах когда он действительно нужен, а не для того что бы регулировать поток созданный float: left;

Для того что бы управлять float есть свой свойство - clear. Оно более уместное.

А еще рекомендую почитать про clearfix()

[SelenIT]

А объяснить всё-таки придется . Clearfix — тоже далеко не панацея. В данном случае повезло, что у контентной колонки стоит margin-left на ширину левой колонки, иначе отсутствие отдельного контекста (а overflow — часто наименьшее зло для его создания) принесло бы очень неприятный сюрприз. Имхо, нужно разобраться с причиной, а не исправлять последствия.

[spdif]

для - div.persons div.pc-3 padding-left: 0;

для - div.persons div img margin-left: 3px;

[GRIG]

ИЕ рендерит шрифт по-своему и сглаживание у него другое.

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

И еще вопрос про сафари возник: почему в сафари в левом меню в последних двух пунктах не выводятся маркеры пунктов (по аналогии с пунктом "Главная")? Для пунктов "Проекты" и "Команда" это еще хоть как-то можно объяснить тем, что у этих пунктов есть подменю, и, к примеру, хром в этих пунктах тоже имеет проблемы (почему - отдельный вопрос). Но два последних пункта своих подменю не имеют.

Такое впечатление, что он начисто проигнорировал мои указания по загрузке и использованию шрифтов с сайта. Невооруженным глазом видно, что шрифт не такой, как в двух предыдущих броузерах.

С этим сам разобрался: Цитата с http://htmlbook.ru/css/font-face

Браузер Internet Explorer до версии 9.0 поддерживает только шрифты формата EOT (Embedded OpenType).

А у меня как раз 9-й эксплорер и шрифты TTF.

[GRIG]

А у меня как раз 9-й эксплорер и шрифты TTF.

Странно... Конвертилок шрифтов и TTF в EOT - до хрена и даже больше. Только с результатом конвертации эксплорер работать по-прежнему отказывается. Более того, при перезагрузке страницы в консоль отладчика он пишет 3 пары вот таких сообщений:

CSS3111: В @font-face обнаружена неизвестная ошибка.

PFDinTextCondPro-Regular.eot

CSS3114: @font-face не удалось пройти проверку на разрешение внедрения шрифтов OpenType. Необходимо разрешение "Устанавливаемый".

PFDinTextCondPro-Regular.ttf

(и так для каждого из подгружаемых шрифтов).

Что ему может не нравиться в следующем фрагменте:

@font-face {

font-family: 'Regular';

src: url('../fonts/PFDinTextCondPro-Regular.eot') format('embedded-opentype'),

url('../fonts/PFDinTextCondPro-Regular.ttf') format('truetype');

}

[SelenIT]

Для работы в IE у самого шрифта должно быть выставлено свойство «устанавливаемый» (installable), где-то в самом файле (более точно, к сожалению, не знаю). Насколько я в курсе, fontsquirrel.com при генерации набора для @font-face ставит его автоматически, в редакторах шрифтов типа FontForge нужно ставить галочку в свойствах файла при сохранении, в других конвертерах/генераторах может понадобиться порыться в настройках.

[GRIG]

С помощью FontSquirrel проблема шрифтов в эксплорере решена. Единственная бяка: по умолчанию этот сервис конвертирует не весь фонтовый файл, а вырезает из него только символы европейских языков. Так что пришлось слегка вчитаться в его настройки. Но потом все стало хорошо.

Спасибо за подсказки.

[GRIG]

Одна проблема с помощью уважаемого сообщества решена. Но есть еще и вторая.

Страница http://test.psy-actual.ru/vakansii, навигационное меню в левой колонке - общий вид и реакция на наведение (не клик!) мыши на пункты "проекты" и "команда"

Файрфокс - идеально, как задумано.

Эксплорер - почти как задумано. Но: верхний край рамки вокруг меню второго уровня выше, чем верхний край рамки вокруг соответствующего пункта меню 1-го уровня. (Не смертельно, но неприятно)

Хром - средненько. Почему-то не видны маркеры у пунктов меню "проекты" и "команда". Хорошо хоть эти слова выровнены относительно остальных пунктов меню

Сафари - плохо. Мало того, что нет маркеров у пунктов меню "проекты" и "команда", так нет еще маркеров у двух других пунктов меню. И пункты, которые остались без маркеров, не выровнены относительно других пунктов меню.

Что где подкрутить?

[spdif]

Хром - средненько. Почему-то не видны маркеры у пунктов меню "проекты" и "команда".

для

div.moduletable ul {list-style-position: inside;}

поменяй

inside на outside

...

[GRIG]

Маркеры в результате такого появляются во всех броузерах.

Но вместе с этим появляется одно очень большое "НО": в эскизе дизайна особо обозначено позиционирование маркера при пункте меню относительно самого пункта меню - он должен быть выше и левее надписи на определенную величину. И в результате такого изменения это позиционирование нахрен слетает. Что можно подкрутить еще, чтобы вернуть его на место?

И еще: в эскизе дизайна также особо обозначено расстояние от колонки маркеров до левого края макета. Оно тоже слетело.

И совсем весело: в эскизе обозначено, что при раскрытии меню второго уровня рамка вокруг соответствующего пункта меню первого уровня должна левым верхним углом попадать на маркер этого пункта. И это, опять же, слетело.

В общем, увы, но не вариант.

Edited September 29, 2013 by GRIG

[GRIG]

ИТОГ:

я переделал стили для списков так, чтобы для вывода маркера использовать не свойство list-style-image, а свойство background-image. За счет других свойств фона можно сделать так, чтобы маркер оказался в любом угодном месте. И это, к тому же, кросс-броузерно.

На сем тема закрыта.