GRIG

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

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

Одна проблема с помощью уважаемого сообщества решена. Но есть еще и вторая. Страница http://test.psy-actual.ru/vakansii, навигационное меню в левой колонке - общий вид и реакция на наведение (не клик!) мыши на пункты "проекты" и "команда" Файрфокс - идеально, как задумано. Эксплорер - почти как задумано. Но: верхний край рамки вокруг меню второго уровня выше, чем верхний край рамки вокруг соответствующего пункта меню 1-го уровня. (Не смертельно, но неприятно) Хром - средненько. Почему-то не видны маркеры у пунктов меню "проекты" и "команда". Хорошо хоть эти слова выровнены относительно остальных пунктов меню Сафари - плохо. Мало того, что нет маркеров у пунктов меню "проекты" и "команда", так нет еще маркеров у двух других пунктов меню. И пункты, которые остались без маркеров, не выровнены относительно других пунктов меню. Что где подкрутить?

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

Странно... Конвертилок шрифтов и 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'); }

Если бы дело было в том, как выводится один и тот же шрифт в разных броузерах - это было бы понятно. Но по-моему дело не в этом. При внимательном рассмотрении букв в ФФ, Хр и Сф видно, что концы линий у всех букв прямые. А в ИЕ у букв на концах линий косые дополнительные штрихи. И еще вопрос про сафари возник: почему в сафари в левом меню в последних двух пунктах не выводятся маркеры пунктов (по аналогии с пунктом "Главная")? Для пунктов "Проекты" и "Команда" это еще хоть как-то можно объяснить тем, что у этих пунктов есть подменю, и, к примеру, хром в этих пунктах тоже имеет проблемы (почему - отдельный вопрос). Но два последних пункта своих подменю не имеют. С этим сам разобрался: Цитата с http://htmlbook.ru/css/font-face А у меня как раз 9-й эксплорер и шрифты TTF.

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

И что это даст? Кстати, просто так менять это нельзя - там padding-left используется для организации красного уголочка возле левого верхнего угла фотографии. А это существенный элемент дизайна. Кстати, вот еще вопрос: почему для одной и той же надписи одним и тем же шрифтом файрфокс вычисляет ширину 160 пикселей, а хром - 161 пиксель? Убрал точку на конце надписи - и в хроме все стало выглядеть так же хорошо, как и в файрфоксе. (Это на локальном отладочном компе. На хостинге пока все по-старому.)

Привет всем. Делаю сайт на заказ. Движок - Джумла 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 броузера выводили страницу на один и тот же монитор. Посоветуйте, где чего подкрутить, чтобы во всех вариантах было нормально. Заранее спасибо.

Итог: Для тестового примера из предыдущего сообщения вроде бы получилось сделать задуманное путем добавления в него следующего фрагмента кода: <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> jQuery( document ).ready( function () { $( 'a[href^=#]' ).bind( 'click', anchor_onclick ); } ); function anchor_onclick( e ) { $(document).scrollTop( $( 'a[name=' + $(this).attr('href').substring(1) + ']' ).offset().top ); return false; } </script> Проверил во всех 4 броузерах - результат как задумано, и при этом внешним ссылкам не мешает жить.

Продолжение истории. Решил еще раз проверить ситуацию на таком вот простом файле: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=utf8"> <TITLE>очередной тест</TITLE> <style type="text/css" > .header { position: fixed; top: 0; left: 0; width: 1200px; height: 170px; border: solid red 3px; background-color: transparent; text-align: center; vertical-align: middle; } .anchor { position: relative; top: -200px; } .fill { width: 1200px; height: 170px; } .test1 { width: 300px; border: solid 2px green; background-color: white; } .test2 { width: 300px; border: solid 2px blue; background-color: yellow; } </style> </head> <body> <div class="header"> Это большой заголовок<br/> <a href="#pos1">Ссылка 1</a> <a href="#pos2">Ссылка 2</a> <a href="#pos3">Ссылка 3</a> <a href="#pos4">Ссылка 4</a> <a href="#pos5">Ссылка 5</a> </div> <div class="fill"> </div> <div class="test1"> <a name="pos1" class="anchor"></a> Точка 1<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> </div> <div class="test2"> <a name="pos2" class="anchor"></a> Точка 2<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> </div> <div class="test1"> <a name="pos3" class="anchor"></a> Точка 3<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> </div> <div class="test2"> <a name="pos4" class="anchor"></a> Точка 4<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> </div> <div class="test1"> <a name="pos5" class="anchor"></a> Точка 5<br/><br/><br/><br/><br/> </div> </body> </html> Испытания проводились на компе, на котором установлен линух и виртуальная виндовая машина с ХРюшей. На эту виртуальную машину я поставил все 4 броузера. Что ожидалось: красная рамка под верхним краем окна с заголовком и ссылками, при клике на ссылках 1, 2 и 3 - скроллинг к соответствующей точке в файле так, что соответствующая надпись и цветная рамка вокруг нее оказывается чуть ниже рамки. (точки 4 и 5 оказываются слишком близко к концу документа, так что по ним переходить смысла нет). Результаты такие: - Мозилла 22 - как задумано (без того неприятного эффекта, о котором писал в начале) - Хром 28 - как задумано. НО: так он стал себя вести только после появления контейнеров div вокруг точек перехода. Если же теги "a" были на самом верхнем уровне структуры документа - то не было вообще никакого скроллинга. - Эксплорер 8 в режиме совместимости - при скроллинге точка перехода оказывалась в верхнем левом углу экрана, т.е. внутри красной рамки (т.е. тот самый эффект, с которого все началось) - Эксплорер 8 без режима совместимости - как задумано - Сафари 5.1.7 - повторился тот эффект, с которого все началось. Чего теперь делать - как-то непонятно

Как известно, если в HTML-документе в одном месте написать: <a href="#location">Переход куда-то</a> А потом в другом месте написать еще <a name="location"></a> то при клике на первую ссылку броузер должен прокрутить окно так, чтобы вторая точка оказалась в левом верхнем углу окна. Пока на странице нет никаких выкрутасов с CSS - все хорошо. Но мне понадобилось разместить на странице блок с таким набором свойств: position: fixed; top: 0; left: 0; width: 1207px; height: 184px; z-index: 10; По сути дела этот блок представляет собой некую шапку, которая при скроллинге не прокручивается, а всегда висит в верхней части окна. И вот тут начинается веселье: при клике на ссылку для прокрутки к нужной точке эта самая нужная точка оказывается под шапкой и из-за этого не видна. Я попытался выйти из ситуации снабдив все возможные точки локального перехода таким набором свойств: position: relative; top: -200px; Результат оказался достаточно забавный. И, что значительно хуже, оказался зависящим от броузера. А именно: - Хром 28-й версии - честно прокрутил страницу так, что нужная точка оказалась чуть ниже шапки и потому была видна. И так он делал всегда при клике по всем возможным локальным ссылкам (каковых у меня около 15 штук) - Мозилла 22-й версии - в зависимости от каких-то непонятных мне условий действовала по разному: при клике на одних ссылках она прокручивала страницу так, что нужная точка оказывалась ниже шапки, при клике на других ссылках она прокручивала страницу так, что нужная точка оказывалась скрыта шапкой. Разобраться с причинами не смог, так что обошел это изменением свойства "top" у некоторых точек перехода. - Эксплорер 9 и Сафари 5.1.7 - всегда прокручивали страницу так, что нужная точка оказывалась закрыта шапкой. Особая неприятность заключается в том, что сайт - реклама некоего мероприятия, и потому должен быть хорошо виден всем. Ну в крайнем случае подавляющему большинству. При этом Эксплорер считается самым распространенным броузером для виндов, а Сафари - для маков. И как раз на них и случается самый неприятный косяк. ВОПРОС: есть ли кросс-броузерное решение, которое обеспечит при всех возможных вариантах поведение как у Хрома? Или хотя бы как у Мозиллы? Применение яваскрипта допускается.

Тогда я, похоже, что-то не понимаю в этом деле. height задать для какого объекта? И координаты вычислять в каких единицах? И еще: то, что тег area работает независимо от масштабирования, - это понятно. Мне нужно, чтобы при изменении размеров картинки-карты активные области карты смещались вместе с соответствующими участками изображения. А пока что получается, что после масштабирования при клике мышой на область с надписью "page1" происходит переход на ссылку "page2" (или что-то вроде того)

Задумал для одного сайта сделать картинку-карту, по кликам на которую пользователь может увидеть разные разделы информации. Стал делать примерно так: <img src="menu1.png" usemap="#mymap" style="width: 100%"/> <map id="mymap" name="mymap"> <area shape="rect" coords="32,245,142,265" href="#page1"> <area shape="rect" coords="32,275,142,295" href="#page2"> .... И при этом наткнулся на неприятность: координаты активных областей карты в тегах area задаются абсолютно, а размер картинки-карты может меняться в зависимости от разрешения экрана и размеров окна броузера. Т.е. по какой-то фиксированный размер картинки я координаты подобрать могу, но при изменении размеров картинки у пользователя все эти координаты слетят нафиг. Есть ли тут какое решение, которое учитывает этот аспект?

Шрифты подгружаются через CSS

Проблема наблюдается в файрфоксе. Может наблюдаться и в других случаях - я подробных исследований не проводил. Зачем сайт такой тяжелый - не знаю. Я его делал не с нуля - я только дорабатывал.

Делаю сайт www.knigivparkah.ru. Для отображения заголовков сайт подгружает свои шрифты. И очень часто бывает так, что при первичном заходе на сайт первая страница отображается другими шрифтами. (К сожалению, не отследил, при каких условиях) - естественно, что верстка при этом выглядит перекошенной. Но при этом если ткнуть мышой в средний баннер в шапке сайта (который содержит ссылку на начальную страницу сайта) - то при таком подходе эта страница отображается уже с нужными подгруженными шрифтами и выглядит нормально. ВОПРОС: почему шрифты не встают на страницу с первого же раза? Я смотрел в отладчике подгрузку файлов для страницы - все вытягивается нормально даже с первого раза. А вот используется только со второго...

Народ! Помогите советом, а то я уже мозг себе сломал. Пишу на чистой странице простой код вроде вот такого: <span> Это какой-то проверочный текст <br/> разделенный на две строки </span> Выставляю ему font-size=72px и line-height=72px, потом смотрю в файрбаге высоту получившегося куска - получается 153 px. Получается вроде бы понятно: 72 пикселя на первую строку, еще 72 на вторую и плюс 1/8 высоты шрифта (т.е. 9 пикселей) на интервал между строками. Лезу в разрабатываемый проект, где в блоке div записан текст из двух строк с точно такими же font-size=72px и line-height=72px, смотрю высоту - показывает 205 px. Убираю там одну из строк - высота становится 133px. Превращаю 2 строки в 3 - высота становится 277px. Мягко говоря, это никак не соответствует ожидаемому (хорошо хоть разница как раз на высоту шрифта в обоих случаях). Спрашивается: где искать происхождение лишней высоты? (Найти очень нужно - мне этот кусок надо по вертикали выровнять, причем без яваскрипта.) Версии: 1) Нестандартный подгружаемый шрифт... Где искать, какие эффекты он дает? 2) Вокруг отображаемого текста могут быть разные padding, border, margin - непохоже. Файрбаг, во-первых, показывает что их размеры все равны нулю. Во-вторых, при наведении мыши на соответствующий кусок кода файрбаг подсвечивает соответствующий кусок изображения сплошным цветом, без дополнительных цветных полос по краям. Но при этом под нижней строкой показывает кусочек экрана как относящийся к этому элементу. 3) Что-то еще... Что? Второй день сижу - понять не могу. PS. Попробовал в разрабатываемом проекте вообще убрать line-height - получил, что высота блока из N строк для N = 1, 2, 3 получается в точности равна 133*N пискселов. Получается, что это свойство в фонте зашито?

Текст поменял на более короткий и с пробелами. Помогло.

Убрать ссылку не получится - весь правый блок сделан в первую очередь для того, чтобы эту ссылку там разместить. Т.е. получается, что проблема в том, что видимый текст ссылки, во-первых, не содержит в себе пробелов, по которым можно было бы его разорвать на составные части, и, во-вторых, без разрыва не влезает в отведенные ему 160 пикселов - так? Да, было дело. В исходном варианте весь шаблон был шириной 1000 пикселов. При этом на более широком экране по бокам белого фона получались широкие серые полосы. Вот и решил эти полосы убрать.

Вот сделал для жены сайт http://www.psy-actual.ru (на Joomla 1.5.22, если существенно). Шаблон брал готовый, но слегка допиливал руками. И не могу понять одну вещь: почему в ФайрФоксе все показывается хорошо (что под виндами, что под линухом), а в 9-м ИнетЭксплорере под 7-й виндой текст в правой колонке (который под заголовком "анонсы и новости") высовывает хвост вправо за край экрана (т.е. текст по-другому разбит на строки, эти строки более длинные, чем в ФФ, и из них видна только левая половина) Попробовал посмотреть внутренности макета во встроенном отладчике ИЕ - тот показывает, что блок <div id="right_container"> и вложенный в него на 1 уровень ниже <div class="moduletable"> имеют ширину 160 пикселов (как и задумано). А вот вложенный еще на 1 уровень ниже блок <table class="contentpaneopen"> почему-то имеет ширину порядка 330 пикселов (точно не помню - по памяти пишу). Так что текст, который находится внутри этой таблицы, отображается соответственно ширине таблицы (из которой видна только левая половина). Т.е. вроде бы поведение броузера вполне логичное. Но понять причину, по которой броузер не стал усекать ширину таблицы до ширины видимой области, я не смог. Попробовал поиграться с параметрами width и max-width у этих блоков (а также у того, что в них еще глубже вложено) - никакого эффекта не получил. Что тут можно применить?