SelenIT

SVG — это по факту картинка, а топик про «без таковых» (совсем строго говоря, CSS-градиент — тоже, но его картиночная природа «не так очевидна», что ли).

Тогда он слишком всю ширину займет). Можно, правда, overflow:hidden добавить...

Нет, как раз предлагаю размеры не задавать. Пусть «особая табличная магия» распределит пространство сама.

А, так нужно обязательно заполнить ссылками всё пространство? Может, тогда лучше вместо float использовать display:table/table-cell? А то и модные флексбоксы, а float-ы оставить для деградации? Потому что полагаться на конкретную ширину текста в пикселях — изначально провальная идея. Чуть другой шрифт на чуть другой платформе — и всё заверте...

Нет, как средство наказания за злостное противодействие открытости веба (а злоупотребление вендорным префиксом иначе не назвать) он — самое то. Только в этом качестве пусть остается :devil:

Ну да, субпиксельный рендеринг. В IE9-10, по идее, будет похожая песня (но тоже слегка по-своему), на маке вообще иначе. В хроме может запросто измениться при каком-нибудь очередном обновлении. Имхо, если нигде последний пункт не сваливается и не ломает верстку, на такую мелочь можно забить.

Вот такого делать точно не нужно. За -webkit-only (второй пример) в 2013-м нужно сажать на пару лет за IE8 без права переустановки, а при рецидиве — отрезать клавиатуру с мышкой. Первый пример, конечно, забавный, но загаживать разметку тоннами бессмысленных дивов тупо ради галочки «ни грамма JS» — имхо, не лучший пример подрастающему поколению

Если позволяет ТЗ, хорошим тоном считается сохранение функциональности сайта без новомодных красот. От того, что углы будут квадратными, а вместо градиентов будет однотонная заливка, ни один котёнок не пострадает, если при этом текст будет четко выделяться на фоне, ссылки и кнопки будут реагировать на :hover и :focus и т.п. И при этом всё будет грузиться быстро. Ну а пользователи продвинутых браузеров впридачу к этому увидят его более красивым, блестящим и переливающимся — прогрессивное улучшение. Конечно, если визуальные красоты — основная «фишка» сайта (чаще всего для промо), то волей-неволей придется делать по-старинке, картинками. В общем, всё зависит от задачи, как обычно

ну-ну... JS верстальщику нужен. И для дальнейшего роста во фронтэндщика, и для прикрутки готовых решений, и для понимания взаимодействия своего и чужого кода. Она проще для быстрого решения типовых задач, по сравнению с решением их на "голом" JS + DOM. Особенно в части анимаций и т.п. «спецэффектов» и кроссбраузерности. Но чтобы использовать ту же jQuery эффективно, как минимум хорошо знать базовый синтаксис, основные особенности (приведение типов, области видимости, замыкания и т.п.) и связанные с ними «подводные камни» самого JS необходимо. Так что как минимум базовый курс с javascript.ru нужен.

Потому что тогда containing block-ом всплывающего меню становится сам li.dropdown, и оно оказывается в его контексте наложения. И z-index поднимает li.dropdown вместе со всем, что из него позиционируется, как единую стопку. Опустить позиционированный потомок элемента ниже containing block-а можно, лишь задав отрицательный z-index самому потомку (но фон родителя всё равно будет еще ниже, у него, можно сказать, z-index равен минус бесконечности). Если во всплывающем меню окажется меньше трех пунктов, или они окажутся слишком короткими, будет неаккуратненько, Но других идей, как это состыковать без явного задания ширины выпадушки, пока нет...

Если left и right не заданы, элемент помещается по горизонтали там, где он рисовался бы, не имея position:absolute. Аналогично с положением по вертикали и top/bottom. Если добавить top:0; left:0 — будет с левого верхнего угла ul.

Является. Показателем отсутствия тупых механических ошибок/опечаток Битьё каленым железом, увы, не способствует пониманию того, почему <img ... /> работает как закрытый тег, а <i /> — нет, и почему в <div style="color:red"><ul><li>текст</li></ul></div> текст становится красным, а в <p style="color:red"><ul><li>текст</li></ul></p> — нет. Поэтому, кстати, то «10 лет назад» там и осталось, а HTML5 сегодня по факту везде. Новичку нужно не запоминать «магические практики» и повторять их как обезьянка, а вникать в логику и смысл своих действий и применять инструменты с умом и по назначению. И лучше HTML5 для реального веба пока ничего не придумали...

Потому что тогда containing block-ом (типа «домиком») для него становится не широченный внешний ul, а сам этот тесный li. И позиционированный потомок по умолчанию (если ему не задана ширина) пытается вписаться в этот «домик».

Статья не моя, просто в ней лучшее из виденных мной за последнее время раскрытие темы z-index'а

Для тех, у кого такое, гм, оригинальное понятие о валидности — показан вдвойне

Кстати, работает . Я забыл, что выпадушка тут позиционируется относительно внешнего ul, а не li, а значит, находится в его контексте наложения и ее можно легко «подсунуть» под его непозиционированный контент отрицательным z-index'ом. Но в свете нового ответа это решение, как и предыдущее, не подходит, думаю дальше...

в 2013-м году он выглядит так: <!DOCTYPE html>. В других доктайпах нет никакого практического смысла.

Те, кто сидит на нем в 2013-м (именно на 7-м, а не на 8-м в Compat. View при надобности) это заслужили Она практически никогда не мешает (кроме случаев, когда она рвет цепочку 100% высоты), это да. Но обидно же: прогресс идет, повсюду вокруг всё такое адаптивно-отзывчивое, анимированное, переливающееся, высокотехнологичное — а тут мы такие с дедовскими приемами эпохи прощания с 98-й виндой, с необходимостью поддерживать обе боксовые модели. При том, что «волшебного пинка» просят от силы пара-тройка процентов аудитории (в смысле, браузеров, а не пользователей, конечно... хотя... ), для остальных задача решается просто и естественно... Привычка. Столько лет ее внедряли как «единственно верную» в противовес «старой кривой IEшной» (хотя у Нетскейпа было аналогично). Но по гамбургскому-то счету border-box же удобнее, неужели нет?

Если фон однородный белый, проще всего накрыть ее белой полоской поверх: http://jsfiddle.net/WxdQp/2/ Если неоднородный, то всё сложнее

Нельзя. Body всегда будет единственным и снаружи любого отображаемого контента, даже если его вообще не писать Наоборот, с головы на ноги. «Требовательность к тому, что отдаешь, терпимость к тому, что принимаешь» или как-то так — принцип разработки устойчивых систем. В HTML5 вообще нет блочных и строчных элементов

Проще. Но зачем, если >97% браузеров в этом не нуждаются? Кстати, скрипт автора темы (как и большинство др. полифиллов для box-sizing) именно это и делает

А у этих <img class="file_img_<?=$file["id"]?>" и <span class="time file_time_<?=$file["id"]?>"><?=$time_str?></span><span class="weight"><span> какие стили? Абсолютного позиционирования, трансформов и т.п. нет случайно?

А вот сейчас, кажется, подумал и нашел решение: Алгоритм: 1) Ставим перед доктайпом HTML-коммент. Это сбросит IE6-7-8-9 в Quirks, другим браузерам не помешает. 2) Ставим <meta http-equiv="X-UA-Compatible"content="IE=Edge">. Это заставляет IE8-9 переключаться в стандартный режим независимо от доктайпа и всего с ним связанного, на IE7- это не влияет. 3) Таким образом, в IE7 (и ниже) по построению имеем Quirks, во всём остальном — стандартный режим. И значит, 4) PROFIT! P.S. Как всегда оказалось, что моя мысль запоздала года этак на полтора: http://t.co/impFmNIE0m — эх...

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

Как по мне, эта задача с таймером вполне себе на вёрстку. В алгоритме таймера придумать что-то революционное очень сложно. Разве что с самой анимацией вытворить что-нибудь несусветное на 60fps...