Pixy’s method отображение картинок с надписями заключался в том, чтобы внутрь блока с текстом поместить пустой <span>, и вставить картинку как фон для этого span-а. Причём, для того чтобы текст показывался в случае если картинки отключены, необходимо span поместить поверх текста.

В методе Pixy, для того чтобы <span> с картинкой налез на текст используется абсолютное позиционирование. В таких условиях кнопка не может находиться в строке, она может существовать только как блочный элемент. Почему? Потому что Firefox 2 не поддерживает свойство «display: inline-block». Для отображения блока в строке в Firefox-е используется проприетарное свойство «display: -moz-inline-box» или «display: -moz-inline-stack». Но в таком случае браузер не совсем адекватно позиционирует помещённые внутрь элементы. В частности некорректно работает абсолютное позиционирование.

Задачи, с которыми я сталкивался в вёрстке, требуют гораздо более эффективного решения. Вот эти задачи на примере создания ссылки-кнопки:

1. Ссылка должна быть «инлайновая», т. е. чтобы можно было поместить в строке.
2. При отключенных картинках в браузере вместо кнопки должна быть надпись-ссылка.
3. У кнопки должен работать «ховер» — при наведении мышкой, картинка должна меняться.

Метод Селецкого (Seleckis’ Method)

Фактически тот же Pixy’s method, только:

1. используется строчный блок (inline-block),
2. <span> помещается не после текста, а перед,
3. не <span> налезает на текст, а текст подлезает под <span>.

Ну а в качестве реализации «ховера» выступает обычный CSS-спрайт.

Итак HTML:

<a href="#" class="seleckis"><span></span>Seleckis</a>

CSS:

.seleckis {
	/* только для FF2 */
	display: -moz-inline-box; 
	-moz-box-orient: vertical;
 
	/* Для остальных */
	display: inline-block;
 
	line-height: 20px;
	text-align: center;
}
.seleckis span {
	display: block;
	position: relative;
	margin-bottom: -20px;
}
.seleckis,
.seleckis span {
	height: 20px;
	width: 74px;
	background-image: url(seleckis.gif) no-repeat top left;
}
a.seleckis:hover,
a.seleckis:hover span {
	background-position: bottom left;
}

Как видите, в этом коде сам блок становится строчно-блочным, а для FF2 срабатывает свойство «-moz-inline-box», что придаёт ссылке фактически такие же свойства. «-moz-box-orient: vertical» понадобится в том случае, если внутри блока вам нужно поместить содержимое в несколько строк.

Также, хочу отметить, что для элемента мы определяем относительное позиционирование и добавляем отрицательный нижний отступ размером с высоту кнопки, чтобы текст «подлез» под <span> с картинкой. Кстати, картинка спрайта прописывается как ссылке, так и спану. Мало ли что…

Если будут баги, пишите попробуем решить. А так, в моём случае работает в Internet Explorer 6, 7 и 8, Firefox 2 и 3, Opera, Safari, Chrome.

Качем пример.

В JavaScript-файле размещаем такую функцию:

function width(min,max){
	w = document.documentElement.clientWidth;
	return (w <= min) ? min + "px" : ((w >= max) ? max + "px" : "auto");
}

Функция всего лишь принимает значения максимальной и минимальной ширины, проверяет текущую ширину документа и возвращает значение:

1. Если ширина документа меньше минимальной ширины, то возвращается минимальная ширина;
2. Если ширина документа больше максимальной ширины, то возвращается максимальная ширина;
3. Иначе ширина указывается автоматическая.

Функция из CSS вызывается следующим образом:

div {
    width: expression(width(600,1000));
 
    /* далее для нормальных браузеров */
    min-width: 600px; 
    max-width: 1000px;
}

600 и 1000 — минимальная и максимальная ширина. Поскольку expression работает только для IE, а min-width и max-width уже работают в IE7 и IE8, то этот CSS нужно изолировать и вынести в отдельный css-файл и подключить его с помощью условных комментариев, либо воспользоваться хакками, поскольку чтобы изменить значение придётся лезть в два файла, а не в один. Ну это уже как кому удобнее.

Скачайте пример и убедитесь, что всё работает.

Минимальную ширину в IE 6 можно эмулировать с помощью приёма, в котором указывается правый border для контейнера шириной в необходимую минимальную ширину элемента, а элементу задаётся правый отрицательный margin равный той же минимальной ширине. При этом внутренний элемент должен быть либо плавающим (float), либо inline-block. В общем не читайте и не внимайте в эти последние предложения, а просто посмотрите пример на cssplay.co.uk.

Есть сервисы в интернете с полями ввода (например, поиском) у которых ширина задана фиксированно. Соответственно, если шаблон сайта резиновый, то поле ввода растягиваться не будет. Как правило такие сайты имеют фиксированную вёрстку. К примеру, если вы зайдёте на «Yahoo Answers» и с помощью Firebug (Firefox), Web Inspector (Safari, Chrome) или Developer Tools (Opera, IE8) отключите у элемента <div id=”y-ks-whole-page”> свойство «width: 750px;» в стилях, то сайт растянет на всю ширину, а поле поиска вопросов останется той же ширины. Конечно, кроме всего прочего, некоторые другие элементы останутся фиксированными, но мы говорим о полях ввода.

И вспомним работу студии Артемия Лебедева, поисковик «Яндекс» и его страницу ya.ru — облегчённую версию поисковика или посмотрим на давно забытый (мною) Рамблер. Вёрстка как видите «резиновая» и соответственно ширина поля ввода для поиска такая же растягивающаяся.

Как же они сделали так, чтобы ширина была динамичной? Очень просто: таблицы. Создаётся таблица из одной строки и нескольких ячеек, в одной из которых помещается поле ввода и растягивается на всю ширину.

Это простейший путь. Но не самый лучший.

Вариант получше

Начнём со структуры. особо наворачивать не будем. Чем проще, тем лучше.

<div class="form">
	<fieldset>
		<input class="text-input" type="text" />
		<input class="submit" type="submit" value="Continue →" />
	</fieldset>
</div>

Проще некуда. на самом деле можно было бы обойтись без лишнего div-а, если бы не Internet Explorer 6 и Firefox 2. Но об этом позже.

Перед описанием внешнего вида в CSS сначала нужно понять как предлагается решать задачу. Лучше всего показать схематически.

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

.form fieldset{
	border: none;
	border-right: 90px solid #fff;
	white-space: nowrap;
}
.form fieldset .text-input{
	width: 100%;
}

Этого достаточно, чтобы форма правильно работала в Firefox 3, Opera, Safari, Chrome и Internet Explorer 8.

Для IE 6 и 7 нужно подправить отображение кнопки:

.form fieldset .submit{
	overflow: visible;
}

А для того, чтобы в IE6 и FF2 контейнер не растягивался так, что появляется горизонтальная прокрутка, нужно внешнему div-у прописать следующие свойства:

.form{
	overflow: hidden;
	width: 100%;
}

Вот и всё, теперь у вас есть бестабличная вёрстка растягивающегося поля ввода.

Скачайте и посмотрите пример. Он немного приукрашен.

Пара нюансов:

• Вам нужно точно знать ширину кнопки.
• Для <div class=”form”> нельзя добавлять margin и padding по горизонтали, иначе будет сдвиг. Ну это вы и сами знаете.

Конечно же, никто не мешает вам добавить и левую границу и с отрицательным отступом поместить что-нибудь перед полем ввода (например логотип Яндекса).

Собственно, это я расписывать не буду, а просто посмотрите пример, как я сверстал ya.ru.

Почему это нельзя сделать стандартными средствами? Т. е. мы конечно можем поместить на страницу кнопку

<input type="submit" value="Нажми меня" />

и спокойно её использовать. Но нет, нам же этого мало. Нужно чтобы кнопочка была красивая, градиентная, с закруглёнными уголками.

Стандартным способом мы можем указать фон для кнопки, добавить рамочку и в браузерах FF и Safari добавить закругления. Но проблема в том, что это во-первых не будет работать в IE и Opera, а во вторых, размеры кнопочек, положение текста и отступы везде будут разные.

В FF2 вообще фон вылез за край закруглений.

Можно попробовать поместить кнопку submit в элемент span, чтобы использовать метод Sliding Doors. В этом случае можно будет без проблем поставить в качестве фона картинки как для элемента «span», так и для элемента «input». Но к сожалению и этот способ не подойдёт, поскольку нет возможности адекватно выровнять текст по вертикали.

Поэтому если визуальное представление гораздо важнее чистоты html-кода, то можно воспользоваться следующим методом.

Двойной «span» и элемент «input»

За основу возьмём статью о создании кнопки как ссылки. Поскольку в данном случае ссылка нам не нужна, то мы её заменяем на span, а внутрь второго span-а помещаем кнопку submit:

<span class="input-button"><span>Кнопка как кнопка<input type="submit" value="Кнопка как кнопка" /></span></span>

Принцип Sliding Doors сохраняется и картинки кнопки помещаются в эти два span-а. Не забываем и про то, что кнопка должна быть уровня inline-block.

.input-button {
	display: -moz-inline-box; /* только для FF2 */
	display: inline-block;
	height: 20px;
	vertical-align: bottom;
	*vertical-align: middle;	/* только для IE */
	background: #83af31 url(button-r.gif) no-repeat right top;
	cursor: pointer;
}
.input-button span {
	display: block;
	_display: inline-block; /* только для IE6 */
	line-height: 20px;
	padding: 0 10px;
	height: 100%;
	color: #fff;
	background: url(button-l.gif) no-repeat left top;
	overflow: hidden;
	position: relative;
}

С кнопкой submit мы сделаем хитро. Разместим кнопку с абсолютным позиционированием относительно span-а поверх текста и сделаем её прозрачной. В итоге мы получим красивую кнопку с возможностями элемента «submit», ширина которой варьируется относительно текста помещённого внутрь.

Можно сделать размер больше, как изображено на картинке, но можно и 100% высоту и ширину. Код следующий:

.input-button input {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	cursor: pointer;
	opacity: 0;
	-moz-opacity: 0; /* видимо для старых версий FF */
	filter: alpha(opacity=0); /* только для IE */
}

Все методы представлены в этом архиве.

Если мы располагаем кнопку внутри текста значит это кому-нибудь нужно мы хотим на неё нажать. А для нажатия обычно используются такие виды элементов, как ссылка и кнопки формы.

В случае со ссылкой всё просто: помещаем среди текста ссылку и задаем ей фон. Но чтобы фон отображался и выравнивался корректно, ссылке следует добавить свойство:

.button {
	display: -moz-inline-box; /* только для FF 2 */
	display: inline-block;
}

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

Что делать если нужно в качестве фона задать две картинки: левую и правую? Для так называемого эффекта «Sliding Doors», нужно как минимум два элемента.

Сначала я попробовал обойтись без лишнего элемента:

• :first-line — не подходит, поскольку предназначен для элементов заведомо блочного уровня, и Опера сразу же переносит все слова в несколько строк и у ссылки пропадает фон.
• :first-letter — не подходит, поскольку в Опере работает только для элементов заведомо блочного уровня
• :before или :after вместе с content: ” ” — не подходят поскольку внутренний отступ (padding) у строчных элементов по вертикали в браузере Firefox отличается от Opera и Safari, а если превращать вставленный контент в элемент блочного уровня, то Firefox не поддерживает для него плавающий режим (float), а inline-block в Firefox позиционируется со сдвигами по вертикали.

Можно было бы использовать хаки, но кто гарантирует, что в других версиях браузеров они будут доступны? Единственное в чём я уверен, так это в необратимости работы хаков для IE 6 и 7 (Хотя мне недавно приснился сон, что IE 6 обновили, исправили ошибки и добавили табы…)

Псевдо-классы и псевдо-элементы я проверял только в браузерах Safari, Opera и Firefox 3. Если в них не удается правильно спозиционировать всё что я хочу, то в другие браузеры я даже не смотрю.

Итог: придется использовать дополнительный элемент.

<p>…laboris nisi ut aliquip 
	<a href="#" title="Нажмите кнопку" class="button"><span>Кнопка как ссылка</span></a>
ex ea commodo consequat…</p>

Решение в CSS:

p{
	line-height: 20px;
}
.button {
	display: -moz-inline-box; /* только для FF 2 */
	display: inline-block;
	background: #83af31 url(button-r.gif) no-repeat right top;
}
.button span {
	display: block; /* нужно для FF 2 */
	display: inline-block; /* для всех кроме FF 2 */
	padding: 0 10px;
	height: 100%;
	background: url(button-l.gif) no-repeat left top;
	cursor: pointer;
}
.button:link span, .button:visited span {
	color: #fff;
	text-decoration: none;
}
.button:hover span, .button:active span {
	color: #dfd;
	text-decoration: none;
}

Некоторые пояснения:

• Высота кнопки должна равняться высоте строки в этом тексте. Это обязательно, иначе будут проблемы с позиционированием картинок на фоне. Опять же, для корректного отображения фона в IE 7 следует для span тоже добавить высоту, можно равной высоте кнопки, а можно просто — 100% (Примечание: это не связано с hasLayout)
• Для внутреннего элемента, сначала во всех браузерах применится «display: block», а потом, во всех кроме FF 2 сработает свойство «display: inline-block». Первое свойство будет корректно работать в FF 2, а второе — в IE 6, остальным браузерам всё равно.
• Добавлено свойство «cursor:pointer», чтобы в IE при наведении на кнопку курсор стал «указующим перстом».

Развиваем тему…

Что если кнопке нужно добавить что-то вроде стрелочки, указующей куда-либо. Например вот так:

Во-первых, если делать для всех браузеров кроме IE, то лишний элемент добавлять не нужно, можно воспользоваться «:after» и вставить стрелочку таким образом:

.button span:after {
	content: " ";
	display: block;
	margin-top: -2px;
	width: 100%;
	height: 8px;
	background: url(button-arrow.png) no-repeat top;
}

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

Схематически это можно изобразить так:

Но поскольку надо сделать так, чтоб работало и в IE тоже, то придется добавить ещё один лишний элемент, а кнопке стоит добавить дополнительный класс:

<p>…laboris nisi ut aliquip
	<a href="#" title="Нажмите кнопку" class="button active"><span>Кнопка как ссылка<b></b></span></a>
ex ea commodo consequat…</p>

Позиционирование для добавленного элемента уже будет абсолютное и в CSS добавится следующий код:

.button.active {
	height: 20px;
	vertical-align: bottom; /* нужно для Opera */
	*vertical-align: baseline;	/* только для IE */
}
.button.active span {
	position: relative;
}
.button.active span b {
	display: block;
	position: absolute;
	left: 50%;
	top: 18px;
	margin-left: -7.5px;
	width: 13px;
	height: 8px;
	background: url(button-arrow.png) no-repeat top;
}

Итак, что же мы сделали:

• Для класса «active» добавили высоту, чтобы высота кнопки не увеличилась за счёт добавленного элемента.
• Туда же добавили вертикальное выравнивание по низу, чтобы в Opera из-за дополнительного элемента не возникло сдвигов. Отменили выравнивание по низу для IE с помощью хака. Другим браузерам по барабану.
• Для элемента span добавили «position: relative», чтобы абсолютное позиционирование стрелочки было относительно элемента «span».

В готовом примере описание элемента «b» и хаки для IE были вынесены в Conditional Comments. Т. е. код почти валидный, не считая свойства «-moz-inline-box» для Firefox 2.

Вариант с кнопкой «submit» и «button», ждите в следующей статье.

Всё очень просто, нужно всего лишь все элементы списка сдвинуть на –1 пиксель, а контейнеру списка добавить свойство, скрывающее не помещающееся содержимое — overflow: hidden.

Пример:

<div class="hlist">
	<ul>
		<li><a href="http://ru.wikipedia.org/wiki/RGB" title="RGB">RGB</a></li>
		<li><a href="http://ru.wikipedia.org/wiki/CMYK" title="CMYK">CMYK</a></li>
		<li><a href="http://ru.wikipedia.org/wiki/XYZ" title="XYZ">XYZ</a></li>
		<li><a href="http://ru.wikipedia.org/wiki/HSV_(цветовая_модель)" title="HSV">HSV</a></li>
		<li><a href="http://ru.wikipedia.org/wiki/HSL" title="HSL">HSL</a></li>
		<li><a href="http://ru.wikipedia.org/wiki/RYB" title="RYB">RYB</a></li>
		<li><a href="http://ru.wikipedia.org/wiki/LAB" title="LAB">LAB</a></li>
	</ul>
</div>

Есть список цветовых моделей, которые нам необходимо расположить горизонтально и добавить к ним разделители.

.hlist ul {
	overflow: hidden; /* кроме скрытия первого разделителя, свойство не дает контейнеру захлопнуться. */
}
.hlist ul li {
	float: left; /* располагаем элементы горизонтально */
	border-left: 1px solid #ccc; /* создаем левую границу как разделитель */
	list-style: none; /* убираем маркеры */
	margin-left: -1px; /* сдвигаем влево на один пиксель, чтобы первый разделитель скрылся */
}

Из-за лишнего сдвига, расстояния слева и справа разделителя не равны. Для того, чтобы уровнять эти расстояния следует сделать внутренние отступы с разницей в один пиксель в пользу стороны сдвига:

	padding: 5px 16px 5px 15px;

Для того, чтобы механизм работал в IE, нужно включить для контейнера списка свойство hasLayout. Я для этого использую HolyHack:

.hlist ul {
	height: 1%;
}

Для вертикальных списков делается примерно то же самое, только элементы сдвигаются вверх (margin-top). Также для элементов вертикального списка тоже нужно включить hasLayout, если они не имеют свойства «float: left».

Важно!

Механизм не будет работать, если контейнеру списка добавить внутренние отступы (padding), вернее, чтобы скрыть разделитель нужно будет сдвигать дополнительно на величину внутреннего отступа.

Пример верстки упомянутого механизма.

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

Все, кто знает об этих проблемах с маркерами, те забыли CSS-свойство list-style-image и вместо него используют background-image или просто background.

Например:

	background: url(marker.gif) 0 5px no-repeat;

Результат:

Если маркеры и прыгают, то примерно +/- 1px по высоте. Это гораздо лучший результат, чем было. Если можете предложить лучше — пожалуйста, предложите свой вариант. 

Кроме того, что расположение картинки теперь более точное, есть возможность изменения её позиции относительно не только строки, но и всего элемента списка, если это требуется.

Единственный минус — мы теряем свойство background для других нужд. Чтобы добавлять фон для каждого элемента списка требуется добавлять еще какой-нибудь элемент.

Простой пример списков с графическими маркерами.

Картинки против CSS

Когда можно обойтись инструкцией CSS — это самый лучший вариант. Достаточно написать border-radius: 5px и получим закругленные уголки с радиусом 5 пикселей. Но эта инструкция доступна только в браузерах поддерживающих CSS3.

Еще раньше были созданны собственные свойства у браузеров Mozilla Firefox 2 (-moz-border-radius) и Safari 3 (-webkit-border-radius) с аналогичным действием. Еще были слухи о мистическом -khtml-border-radius для Konqueror, но говорят, что это не работает. Корректно поддерживал закругленные уголки только Safari, когда как в Мозиле эти уголки выглядят ужасно — пиксельные, без сглаживания, они могли быть использованы только если цвета не слишком контрастные.

В Firefox 3 была реализована более правильная поддержка таких уголков. Они стали красивые, сглаженные.

Опера и IE никогда и не пытались это реализовать. О них и о некрасивых уголках в FF2 и пойдет речь в этом посте.

Opera и SVG

Opera, первый и единственный браузер, в котором была реализована поддержка использования SVG в качестве фона блока. Делается это довольно просто.

В отдельный файл (например bg.svg) пишем SVG-код и сохраняем. Это обычный текстовой файл, только с раcширением svg. В CSS для нужного нам блока прописываем фон:

.block {
   background: url(bg.svg);
}

Чтобы это были именно закругленные уголки, нужно в SVG-файле написать что-то вроде такого:

<svg xmlns="http://www.w3.org/2000/svg">
<rect stroke="#000" fill="#DDD" stroke-width="4" width="100%" height="100%" rx="15" ry="15" />
</svg>

Атрибуты тэга rect меняйте как вам нужно.

В принципе, код не обязательно писать вручную, можно воспользоваться любым векторным редактором, который поддерживает экспорт в SVG.

Firefox 2

Пиксели, пиксели, пиксели… Они повсюду, они атакуют… Они напоминают времена DOS-овских игр…

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

Добавим позиционирование.

/* внешний блок */
.block {
position: relative;
}

/* объект */
.block > object {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}

В результате .content будет наложен на object.

Осталось придумать как это показать только FF2 и скрыть от других браузеров. В вашем распоряжении наверное только хаки.

IE

Много пелось диферамбов языку VML. Сколько статей о том, на сколько он лучше SVG. А в нашем случае все в основном предлагают использовать код такого плана:

<!--[if vml]><v:roundrect class="block" strokecolor="#000" strokeweight="4px" arcsize="0.15"><![endif]-->
<!--[if !vml]>-->
<div class="block"><!--<![endif]-->
Content of the block
<!--[if !vml]>--></div>
<!--<![endif]-->
<!--[if vml]></v:roundrect><![endif]-->

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

Как вы заметили радиус углов задается атрибутом arcsize, куда записывается или некое дробное число или число процентов. Как это понимать?

Оказывается неутомимые редмондовские индусы придумали динамичное решение описав его такой ремаркой:

Defines the rounded corners of a rounded rectangle as a percentage of half the smaller dimension of the length and width of a rectangle. 0% would have square corners, and 100% would form circular corners. A square with an ArcSize value of 1.0 would be a circle. The default value is 0.2 (20%).

Перевожу: Определяет закругленные углы у прямоугольника как проценты от половины меньшего размера длины или ширины прямоугольника. Т. е. берется ширина или высота (что из них меньше, то и берется), делится пополам и высчитываются проценты от этой величины.

А теперь внимание вопрос: с какого укура нужно было быть, чтобы такое придумать?

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

Решение

Вставляем внутрь блока два VML-блока, выставляем высоту в два раза большую нужного нам радиуса, радиус прописывам 1, и размещаем с абсолютным позиционированием один прямоугольник наверх, другой — вниз.

Тупое, но все-таки решение.

И на сладкое

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

Я попробовал все выровнять, но использовал очень много хакков, и проверял в браузерах FF2, FF3, Safari 3, IE 6, IE 7, Opera 9.5. Не знаю в каких условиях, но где-то обязательно даст сбой. Так что, мой материал несет учебно-ознакомительный характер, а не руководство к использованию.

Пример закругленных уголков без использования картинок

Итак:

html,body,address,blockquote,div,p,pre,h1,h2,h3,h4,h5,h6,hr,	/* блочные элементы */
dd,dl,dt,ul,ol,li,						/* списки */
a,abbr,acronym,b,big,br,cite,code,del,dfn,em,i,			/* строчные элементы */
ins,kbd,q,samp,small,span,strong,sub,sup,tt,var,		/* строчные элементы */
img,object,							/* картинки и объекты */
caption,table,tbody,td,tfoot,th,thead,tr,			/* табличные элементы */
input,textarea,select,button,form,fieldset,legend,label,	/* элементы формы */
u,font,s,center,dir,menu,strike,xmp				/* устаревшие элементы */
{
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	text-align: left;
	text-indent: 0;
	font: normal 13px/20px "Lucida Grande","Lucida Sans Unicode",Lucida,arial,sans-serif;
	color: black;
	text-decoration: none;
	list-style-type: none;
}

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

Шрифт я указываю явный, причём в пикселях. Я никогда не использовал em или проценты и долго терзал себя мыслью, что бедные, несчастные пользователи IE6 не смогут увеличить размер шрифта, а я такой нехороший не даю им такой возможности.

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

Совсем мои волнения угасли после прочтения статьи Setting Type on the Web to a Baseline Grid, а точнее её перевода Базовая сетка в веб дизайне.

At some point as designers we have to strike a balance between creating pixel-perfect layouts and infinitely flexible ones. When you get down to it, resizable text is primarily an accessibility feature, not a design feature. Ideally it’s something that should be provided by the browser, no matter how the page is built, and in modern browsers it is. As long as all your content is readable and accessible at all sizes, it’s not necessarily true that the design must maintain integrity as you scale.

И, собственно, перевод:

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

Использование шрифта Lucida Grande обусловленно переходом на MacOS и прочтением серии статей о веб-типографике. Не волнуйтесь в IE6 он тоже замечательно отображается, правда только если размер больше 11px, ведь IE6 не умеет сглаживать шрифты, если это не включено для всей системы.

Lucida Sans Unicode — стандартный шрифт в Windows, который особо не используется, но по характеристикам схож с Lucida Grande. Затем идёт nix-овая версия Lucida. Ну а в случае если все три шрифта в системе не найдены, их заменит Arial или любой другой шрифт без засечек.

На самом деле, этот пункт самый настраиваемый в зависимости от проекта.

Идём дальше.

applet,iframe,embed {
	display: none;
}

Убираю с глаз долой устаревшие и нестандартные элементы.

hr,img,object {
	border: 0;
}

Границу убираю только у приведённых элементов. Элементы формы я, как видите, не трогаю, поскольку лучше все контролы оставить родными для браузера, чем устраивать на сайте винегрет. Например, поля ввода и кнопки можно стилизовать под сайт, а radio, checkbox, select, textarea, не получится. Если нужно стилизовать, например, поле для поиска, то лучше с ним работать отдельно.

input,button{
	overflow: visible;
}

Убрали лишние внутренние отступы у кнопок в IE.

input,select,button {
	vertical-align: middle;
}

Это сделано для того, чтобы все элементы формы, располагались по центру строки, а не скакали в разных браузерах на разных уровнях.

textarea {
	vertical-align: top;
}

А, поскольку высота textarea обычно больше одной строки, то пусть лучше он позиционируется по верху строки, тогда лейбл для этого поля всегда будет сверху.

select[size]{
	vertical-align: top;
}
select[size="1"] {
	vertical-align: middle;
}

А вот здесь применена небольшая хитрость. Поскольку select может быть как высотой в одну строку, так и больше, то нужно всем селектам имеющим атрибут size установить вертикальное позиционирование по верху. Ну а если какой-то селект имеет атрибут size, но его значение равно 1, т. е. его высота будет равна строке, то я возвращаю ему позиционирование посередине. К сожалению, в IE6 это не работает.

fieldset legend {
	*margin-left: -7px;
}

Нет я не использую хаки, просто для наглядности и чтоб покороче. Вставляйте в свой IE6-7.css (наверняка что-то подобное у вас есть) и инклудируйте с помощью Conditional Comments. У IE8 какое-то странное отображение legend, так что для него я ничего не делал.

Вообще у IE8 какое-то своё представление о vertical-align: middle для элементов формы. Такое ощущение, что по центру строки позиционируется базовая линия элемента формы, а не весь элемент.

caption,td,th,tr {
	vertical-align: top;
}
table {
	border-collapse: collapse;
}

Здесь думаю понятно.

optgroup {
	color: black;
	background: white;
	font-style: normal;
}
optgroup option {
	padding-left: 22px;
}

При использовании optgroup в Опере, почему-то у него чёрный фон и белые буквы. Исправляем этот бред.
Убрать курсивное начертание удаётся только у Firefox. Это единственный браузер с настраиваемыми шрифтами и отступами в optgroup. Соответственно только для Firefox будет работать отступ в 22px (больше всего похожий на отступ в других браузерах).

hr {
	color: black;
	background-color: black;
	height: 1px;
	margin: 7px 0;
	*margin: 0;
}

Об этом я писал в предыдущей статье.

ol li, ul li{
	vertical-align: bottom;
}

Заранее исправляем баг в IE если внутри элементов списка будут содержаться элементы с «display: block».

ol li{
	list-style-type: decimal;
}
ul li{
	list-style-type: disc;
}

Тоже понятно.

q { quotes: '\00AB' '\00BB' '\201E' '\201C'; }
q:before	{ content: '\00AB'; }
q:after		{ content: '\00BB'; }
q q:before	{ content: '\201E'; }
q q:after	{ content: '\201C'; }

Русские кавычки внешние и внутренние. Причём в дублированном виде, поскольку Safari перезаписывает quotes, с помощью q:before и q:after.

sub, sup{
	position: relative;
	font-size: 11px;
}
sub{
	top: 5px;	
}
sup{
	top: -5px;
}

Этот метод позиционирования верхнего и нижнего индексов, на мой взгляд наиболее удобен, поскольку не будет происходить сдвига верхней и нижней строки.

Всё больше и больше убеждаюсь, что для каждого верстальщика и для каждого проекта reset будет свой. Что-то можно взять за основу, но по ходу дела и с накоплением опыта всё будет изменяться.

Мой ресет одним файлом

Всемирно известная проблема (я говорю об MS IE) отображает горизонтальный разделитель с дополнительными отступами, причём, такое ощущение, что эти отступы прописаны ему на более низком уровне, не поддаваемом изменению с помощью css. Поэтому, чтобы сделать кроссбраузерные отступы у этого элемента, приходится идти на всяческие ухищрения.

Прочитав пару материалов по этому поводу (Тег <hr /> и кроссбраузерный отступ, A HaRd challenge – Styling An HR Element) и проанализировав, выяснил, что можно решить проблему кроссбраузерно.

Дмитрий Лялин, предлагал не лишать разделитель отступов, а наоборот, оставить, но везде сделать одинаковые. В теме A HaRd Challenge – Styling An HR Element предлагают убрать их вообще.

Собственно, получаем первое решение — без отступов:

hr {
	border: 0;
	color: red;
	height: 5px;
	background-color: red;
	display: block;
	margin: 0 !important;
	margin: -4px 0 -10px 0;
}

Заметьте, для исправления представления в IE6, я предлагаю вместо хакков и Conditional Comments использовать !important. Для всех браузеров кроме IE6 эта строчка будет приоритетной. А на следующей строчке можем написать исправление для IE6, который будет игнорировать !important.

margin: -4px 0 -10px 0;

эта строчка произвольная. Нет лекарства в виде какого-то точного значения. При изменении высоты строки, меняются и отступы в IE. И предлагаемый комментаторами в теме A HaRd Challenge – Styling An HR Element вариант -7px годится лишь для того, чтобы можно было использовать border для верхнего и нижнего элемента без залезания на разделитель. Мой вариант был для меня самым оптимальным для высоты строки 36px, с которой я экспериментировал.

display: block — предназначен для того, чтобы в IE6 сработал верхний отрицательный margin.
color: red — чтобы границы в IE стали красными, а то они какие-то серенькие.

Но всё-таки осталась проблема — IE7. Он как и IE6 устанавливает для <hr /> отступ в 7px, но в отличае от IE6, он понимает свойства с флагом !important (правда только в standart mode. Если убрать doctype, то IE7 резко тупеет). Придётся использовать хакки или Conditional Comments. Последние предпочтительнее, например, потому что известный хакк для IE7:

*+html hr { ... }

работает и для IE8 для которого исправления не требуются.

Ещё одна проблема безотступного <hr /> — налезание тех самых 7 пикселов на следующий за ним блок в IE6 и IE7, что не позволяет использовать для этого блока border иначе граница выглядит слегка порубленной.

Вот что в итоге получилось:

Borders я добавил для наглядности, если их отключить — выглядит на порядок красивше.

В общем, если вам не нужны отступы или нужны, но менее 7px — используйте вышеприведённый пример, а если вы не против отступов у горизонтального разделителя от 7px и более, то используйте следующий вариант:

hr {
	border: 0;
	color: red;
	height: 5px;
	background-color: red;
	margin: 7px 0;
	*margin: 0;
}

*margin: 0 — хак для IE6 и IE7 который будет игнорироваться браузером IE8. Но лучше так не делать. Лучше все исправления записывать в отдельный файл и подключать с помощью Conditional Comments. Мало ли что…