SelenIT

Навеяно недавним обсуждением на Хабрахабре. Может рассматриваться как продолжение всем известного извечного веб-девелоперского холивора, но цель топика и опроса не в этом. Ради сохранения интриги прошу воздержаться от комментов до набора мало-мальски заметной статистики ответов - хотя бы десятка. После первой десятки ответов комменты, пояснения и обоснования ответов и т.п. только приветствуются. Потому что проблема, на мой субъективный взгляд, достойна обсуждения...

kalyaka-malyaka, в блоге автора sIFR'а есть ссылка на две бесплатные тулзы для генерации этих флешек, онлайновую и скачиваемую - http://novemberborn.net/sifr3/without-flash-pro Там по идее всё автоматизировано донельзя. Не поможет?

Да, в IE ниже 8-го border-spacing неуправляем, только дефолтные 2 пикселя и возможны. Тогда, наверное, единственная кроссбраузерная альтернатива - имитировать внутреннюю рамку фоновой картинкой...

как вариант, во внешнем CSS написать td.head_center select { width: 500px; }

border-collapse: colapse убрать?

Victor Ananiev, все верно, я просто немного обобщил (там возможны варианты с position:fixed вместо absolute, разными способами задания полупрозрачности... ну и вообще кто во что горазд. rus, конечно, включать/выключать эффект придется через JS, но хочется свести скрипт к минимуму, от силы к подгонке размеров, а в идеале и без нее обойтись (только класс добавить/убрать). Ради спортивного интереса попробовал было сделать совсем без JS, но мало-мальски похоже на желаемое получилось лишь в FF...

А vertical-align:bottom в этом случае точно обязателен? И еще, вместо margin:0px; ... margin-top:10px; margin-bottom:10px; я бы написал margin: 10px 0; - смысл тот же, а писать меньше и отлаживать, имхо, проще...

Классическое решение (во всяких лайтбоксах и т.п.), насколько я знаю, именно такое: полупрозрачный темный слой (div) размером со всю страницу/видимую область, слой с "окошком" поверх него.

Запись в названии темы означает селектор для ссылок (элементов A с полноценным атрибутом href) и самозванных элементов <hover> (не существующих в спецификации (X)HTML, но отображаемых новыми браузерами). Это обязано работать в Опере>8.5 (она - новый браузер)... но это не имеет никакого отношения к ссылкам при наведении, которые, судя по всему, подразумевал автор Пендюль в решении этой задачи, по моему опыту, бесполезен. А вот знание синтаксиса CSS - весьма

Не проще/лучше ли положить картинку бэкграундом на что надо?

Как-то так? var chboxes = document.getElementsByName("s[]"); for (var i=0; chboxes[i]; i++) chboxes[i].checked = true;

Можно, см. псевдокласс :hover. Правда, в IE6 это работает только для ссылок...

Еще можно через display:inline-block + vertical-align:bottom (или baseline) выравнять. Правда, для IE6-7 и FF2- понадобятся хаки (недавно про это было много статей, в частности, на хабрахабре). И нужно учитывать, что пробелы между тегами при такой раскладке значимы.

В 8-м, начиная со второй беты, есть опция "имитировать 7-й" (специальная кнопка на панели либо - имхо, надежнее - через Developer Tools по F12). Представители MS клянутся, что в этом режиме он честно переключается на движок "семерки". Лично я пока не натыкался на существенные отличия этого режима от настоящего IE7... Кстати, там же (в Developer Tools) можно переключить любую страницу, независимо от доктайпа, в Quirks mode (по сути режим IE5.5:) и обратно.

rash, а чем так плох вариант с имитацией отточия пунктирной границей?

Возможно. Ключевые слова - canvas, VML (для IE).

Поисковикам на стартовой странице ловить нечего. Никаких зацепок для них нет, кроме саркастического коммента...

Все потому же - проценты наследуются от указанных значений, а не от фактических. По той же причине, по которой паддинги-бордеры в CSS1-2 отсчитываются наружу, а не внутрь - так считать проще...

К сожалению, осталась еще проблема Священного Корпоративного ФирСтиля, одним из элементов которого является специфический шрифт (не "съедающий мозг" вычурный дизайнерский изыск, но и не входящий в традиционную "проверенную четверку"). Бить по ней из флеша/SVG - имхо, оверкилл, а ждать повсеместной поддержки Web Fonts - долго и грустно... Так что сама задача, увы, бывает актуальной. Хотелось бы по возможности услышать аргументы именно по подходам к ее решению. P.S. Извиняюсь за досадную и нелепую опечатку в названии топика. Исправить уже никак нельзя?..

WuXuXie, кстати, буквально вчера наткнулся на сайт про чихуаху... (как сказать это в род. падеже мн. числа, чтоб прилично?) - в общем, про этих собачек - который даже некогда приводили в пример грамотного CSS-дизайна: http://www.cssbeauty.com/archives/2007/Jul...nas_chihuahuas/

Во многих обсуждениях темы "техник замены декоративных текстов рисоваными надписями" aka Image Replacement aka IR (даже тут неподалеку) с завидной периодичностью всплывает вопрос: "Зачем такие сложности, не лучше ли "в лоб" поставить IMG с alt-ом?" А действительно, стоит ли "игра свеч, а результат — труда"©? Мои соображения таковы: С точки зрения идеологии, "академического пуризма" и т.п. — оно конечно, рисованные заголовки или, скажем, кнопки меню — не иллюстрации, и тег <img> для них вроде как не уместен. Но это в идеале. С точки зрения практической реализации — все известные способы IR "требуют жертв" либо со стороны семантики ("левые" span-ы и т.д. — чем это лучше img?), либо со стороны кроссбраузерности и/или доступности (либо при отключенных стилях, либо при отключенных картинках по крайней мере часть пользователей не увидит ни шиша, опять-таки в отличие от пресловутого img с alt). С точки зрения SEO — это палка о двух концах. С одной стороны, теоретически, простой текст в заголовках должен иметь для поисковиков больший вес, чем содержимое alt-а в конструкциях а-ля <h1><img alt="текст"></h1>, так что это плюс. С другой стороны, шаманства с невидимым текстом при опр. условиях могут быть расценены как попытка "обмануть" поисковик, со всеми вытекающими неприятными... Вот в чем, на мой взгляд, бесспорное преимущество CSS-овых техник IR над "олдскульными" дискретными картинками — это в возможности уменьшить число HTTP-запросов с помощью спрайтов. Так что это однозначно оправдано для серий декоративных текстов (тех же меню, заголовков рубрик на индексной странице и т.п.). А вот для одиночных надписей (вроде многострадального главного заголовка), как вы думаете, перевешивает сумма плюсов сумму минусов? Ну и, конечно же, буду благодарен всем, кто поделится практическими рецептами. Вдруг среди них как раз найдется тот идеальный вариант, свободный от всех недостатков из второго пункта?

Это заблуждение. Alt - это ни разу не подсказка, это текст, отображаемый, если картинка по какой-либо причине не загрузилась (то, что IE отображает ее как подсказку - его проблема). Настоящая подсказка, стандартная, кроссбраузерная и универсальная (хоть для картинки, хоть для ссылки, хоть для кнопки...) - это title.

Где в верстке используется картинка http://edem.kharkov.ua/images/test2/shapka.jpg (размером аж 58кБ)?

9 ошибок валидации 28 ошибок валидации 92 ошибки валидации

[сперва написал глупость по невнимательности, каюсь]