SelenIT

Имхо, вот в этом варианте наиболее разумный алгоритм реализован (когда-то давно я сам приходил к чему-то подобному, но сейчас никак не нагуглю).

px379, у вас нет "активного" пункта меню, у вас есть текущий пункт. На каждой странице — свой. При любом раскладе.

Ну и зря

Ну, в принципе, на то и щука конкуренция в море отрасли, чтоб карась никто из участников не дремал... в Хроме же подфиксили самые обидные моменты, авось и в Сафарях подфиксят (тень от закруглений пофиксили же), а обновление на маках вроде регулярное и достаточно агрессивное. Просто обидно, что из-за браузера, который мы привыкли считать передовым, приходится жертвовать изящными (субъективно) идеями, и ладно бы еще на поле каких-нибудь ультраэкспериментальных мегасуперновинок — так нет, в, казалось бы, давно и прочно освоенном царстве CSS 2.1! Или всё-таки это мой извращенный моск своими подвыподвертами усложняет мне жизнь, а задача (в данном случае — сделать заголовок в разрыве черты, как здесь, но для неоднородного фона и без лишней разметки) решается проще и прямее? P.S. А прикиньте, если MS внезапно сделает IE10 (ну ладно, пусть 11) не просто очень хорошим, но и кроссплатформенным — и он займет-таки нишу "лучшего браузера для Мака"?

Great Rash, спасибо за оперативную проверку! Новость, конечно, не ахти, но... будем что-то придумывать. Ктулху фхтагн, этих сафарей по статкаунтеру под 6% по миру... просто забить — видно, не вариант... ну да ладно, где наша не пропадала! )))

Сегодня вечером постараюсь выяснить у коллег из соседнего офиса)

Вот этот пример. Для всех браузеров, включая IE8, разницы между спанами и псевдоэлементами нет, и результат идентичен. И только Safari (Win 7) отличился: со спанами как у всех, а с псевдами — кривизна, причем в 5.0.4 и 5.1.2 разная...

Проблема в том, что, увлекаясь этими невиданными для др. браузеров вещами, он(а) внезапно начинает спотыкаться там, где у других (в т.ч. "двоюродного братца" Хрома) давно и прочно полет нормальный. Да и сами эти вещи, в сравнении с тем же Хромом, а местами — даже и IE9, уже всё менее и менее "невиданные"... JS, если ничего не путаю, на сегодня там чуть ли не самый "тормозной". В общем, меня интересует, действительно ли Safari мало-помалу превращается из локомотива прогресса в его... ну, скажем поллитркорректно, "сдерживающий фактор" (точь-в-точь как некогда IE5-6) или это мне кажется, потому что я не умею его готовить? Особенно интересует конкретный пример с псевдоэлементами (получается, актуальный Safari — единственный браузер, требующий экстра-разметки в задаче, с которой другие, включая IE8, справляются средствами чистого CSS2.1). Ладно б только word-spacing (с этим как-то жить можно, заранее обходя острые углы), так оно, бяка, еще и наше красивое решение заголовка с палками сломало...

Вот уже энный раз за последние дни, извра экспериментируя с прикольными CSS-всячинами, натыкаюсь на совершенно нежданные сюрпризы не от бедняги IE, и не от проказницы Оперы, а... от Safari 5.x (виндовой версии, но всё же). То версия 5.0.x ВНЕЗАПНО не понимает box-shadow без префикса (а с префиксом — криво рисует ее у закругленных элементов, не увеличивая радиус для расширенной тени), то она же отказывается применять сами закругления, когда они заданы в процентах, то и она, и актуальнейшая 5.1.2 творят что-то невообразимое с псевдоэлементами с display: table-cell (притом что с обычными спанами в той же ситуации всё рисуется как задумано, в др. браузерах — включая IE8! — всё штатно оба раза, разницы нет). И еще мелочи типа word-spacing-а для инлайн-блоков, которые годами никто не фиксит. При том, что всякие гламурненькие нововведения типа вращающихся повернутых в 3D блоков и собственных расширений стандарта типа -webkit-background-clip:text — тут-то он всегда готов, как пионер! В такие вот моменты, и чем дальше — тем больше, меня начинает преследовать дежавю годов этак из '98-'01. Тогда тоже был один такой браузер, по тем временам мегапродвинутый, чего только не позволял, неслыханные по тем временам вещи просто: векторные рисунки, градиенты, тени, вращения и отражения, WYSIWYG-редактирование, фоновые запросы к серверу и т.п. — но с весьма "творческим" отношением к стандартам и их реализации. И, что характерно, тоже с синеньким логотипом... Это у меня глюки или как?

Два способа (правильный, но без IE6-7, и хитровывернутый со спаренными блоками, но кроссбраузерный).

В обычной textarea — нет. Смотрите в сторону простейших wysywig-редакторов.

Зачем div? Для усиления специфичности? Просто #panel недостаточно?

Во имя Ктулху, зачем??? По описанию я понял, что вам нужно что-то типа этого, разве не так?

1) Разрешение экрана вообще не должно волновать вебмастера, я считаю. Важно, чтобы сайт вписался (по возможности без гориз. скроллинга) в окно браузера, а окно а) не факт что распахнуто на весь экран, б) может содержать какие угодно панели, в т.ч. боковые, в) даже в полностью распахнутом виде для разных браузеров слегка различается. "Безопасная ширина" — просто некое удобное для дальнейших расчетов значение (960 хорошо тем, что "кругло" делится на 2, 3, 4, 5, 6 и 8 колонок), при котором риск появления гориз. скроллинга у целевой аудитории минимален, никакого "тайного знания" за этим термином нет. 2) Настолько нестандартное — вряд ли . Но вот нетбуки и планшеты с 1024x600 достаточно популярны. А на новых смартфонах попадаются и всякие варианты типа 960x540. Задавать что-либо жестко — имхо, плохая идея хотя бы потому, что пропорции экранов сильно разнятся (от 4:5 до 9:16). 3) Ориентируйтесь на здравый смысл, смотрите, чтобы текст легко читался и не вызывал желания придвинуться к экрану поближе. Меньше 11px трудно читается практически везде. Сейчас, с ростом DPI мониторов, в моду входят всё более крупные шрифты, даже дефолтные 16px, можно считать, нормально для основного текста. А вообще все новые браузеры поддерживают замечательный механизм media queries, позволяющий гибко подстраивать дизайн (в т.ч. размер шрифта) под разные диапазоны размеров окна.

У тех же CSS3-совместимых (включая IE9) есть background-clip: padding-box.

Для родительских тоже. Вот здесь, по-моему, наиболее удачное объяснение. Не схлопываются только для корневого эл-та (html) и для элементов, создающих новый контекст форматирования (float-ы, инлайн-блоки, таблицы и их ячейки,а также элементы с overflow:hidden/auto/scroll). И если у внешнего элемента сверху есть ненулевой padding или border.

Это User CSS которые? Типа такого? Или что-то лучше?

border-radius: 0 0 8px 8px; не помогает?

Зачем позиционирование? Просто обернуть прокручиваемый контент в обычный див с обычным фоном разве не решит проблему везде?

CSS 2.1: 1) Все браузеры (включая IE6) умеют прикладывать две фоновые картинки вот так. 2) Все браузеры, начиная с IE8 (др. семейства научились еще раньше) умеют показывать 5 фоновых картинок вот так. Проприетарщина: Все IE держат два фона с помощью фильтра. Не без побочных эффектов (могут быть торможения и проблемы с кликабельностью элементов, обычно лечится position:relative), но тем не менее. CSS 3: Все новые браузеры (включая IE9) понимают multiple backgrounds. Выбирайте, пробуйте, комбинируйте...

1) Поддерживает. Но если у картинки задан бордер, то углы обрезаются по его внешней границе, а не по внутренней, как интуитивно должно бы быть. 2) Перекидываю url картинки из src в стиль для фона. И размеры фиксирую тоже в стилях (для чего — см. ниже). 3) По факту превращает картинку в обычный элемент-контейнер (пустой, поэтому без указания размеров в стилях он бы "схлопнулся"). Но в Опере при этом ее картиночные свойства (специальное контекстное меню и т.п.) сохраняются, в Хроме/Сафарях — к сожалению, теряются.

В исходном коде, очевидно . Плюс на зеленой "змейке" ключевые подсказки.

Ух ты, поздравляю! А где вообще такая работа встречается и как туда попасть?..

Вот так можно. А вообще для внешних углов есть вот такой фокус.

Разницу можно использовать, например, в том же скруглении углов, если у самой картинки есть бордер. Без финта с контентом получается вот так, а с ним — нормально. Вот слева без content:'', справа с ним. Т.е. в Хроме с его помощью тоже можно экономить обертки.