В последнее время накопившийся опыт (которого во многих областях более чем достаточно) преобразуется в различного вида framework-и (англ каркас, структура) - наборы готовых библиотек-файлов-шаблонов, которые можно взять за основу для дальнейшей доработки. Такая тенденция не обошла и CSS (Каскадные таблицы стилей) верстку.

Каждый, кому приходилось сталкиваться с версткой, скорее всего после двух-трех сверстанных макетов замечал, что многие элементы повторяются от сайта к сайту. И если вдруг возникло (вполне нормальное) желание вынести всё это в “шаблон” или “болванку” для верстки - знайте, Вы не одиноки!

Если у Вас нет своего шаблона (или нескольких), то для ускорения и облегчения процесса верстки можно воспользоваться уже готовыми CSS-фреймворками. Однако, следует обратить внимание на их особенности (у многих - жестко фиксированная ширина, где-то могут возникнуть проблемы при абсолютном-относительном позиционировании…) В общем, RTFM… (как вариант - все-таки можно сделать своё)

Итак, CSS-фреймворки:

http://developer.yahoo.com/yui/grids/ -  YUI 2: Grids CSS

http://960.gs/ - 960 GridSystem

http://www.yaml.de/ - YAML (”Yet Another Multicolumn Layout” - (X)HTML/CSS Framework)

http://elasticss.com/ - Elasic CSS

http://habrahabr.ru/blogs/css/46418/ - BlueTrip

code.google.com/p/malo/  - компактный фреймворк “Мало”
http://www.vcarrer.com/2009/01/prototyping-with-malo-css-library.html - пример использования

UPD краткое описание CSS-фреймвоков можно найти по ссылке
http://www.getincss.ru/2008/04/28/css-frameworks-izbrannoe/

http://www.noupe.com/css/5-popular-css-frameworks-tutorials-tools-for-getting-started.html

UPD2
http://uggallery.audiopeace.ru/css-manual - сборник статей по CSS-верстке

UPD3 скругленные углы на CSS

http://habrahabr.ru/blogs/webdev/30019/
http://habrahabr.ru/blogs/css/63983/
http://habrahabr.ru/blogs/css/64016/
http://techmeat.habrahabr.ru/blog/64033/

При переносе верстки с использованием тегов <font size=”2″>… </font> в свойство CSS font-size, выяснилось, что различные браузеры,  воспринимают CSS-свойства xx-small, x-small, small, large…

Набор констант (xx-small, x-small, small, medium, large, x-large, xx-large) задает размер, который называется абсолютным.  По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера
и операционной системы.

Действительно, в различных браузерах результаты применения одинакового стиля сильно отличаются: проверить себя можно тут http://rotorweb.ru/typography/css-font-size-conversion-chart.html

Как наложить рисунок поверх флешки, чтобы перекрыть всю её или часть (в зависимости от размера рисунка)?

Размещение абсолютно позиционируемого div с фоновым рисунком и z-index:1000 по идее должно помочь. Ан нет - не так все просто. Флешка почему-то располагается поверх рисунка, хотя по z-index должно быть всё наоборот.

Как включить отображение прозрачности у флешки?

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

Немного теории

Оказывается, для объектов флеш в html определен параметр wmode, который задает режим внедрения элементов флеш в web-страницу. По умолчанию параметр wmode имеет значение window, который определяет наложение флешки поверх всего html. Таким образом, независимо от значения z-index и позиционирования элементов поверх флешки рисунок отображаться не будет.

Парамтер wmode может принимать и другие значения:

1. opaque (англ. непрозрачный), аналогичен режиму window, но позволяет перекрывать флешку HTML-слоями, используя z-index. Как раз то, что нужно! Используем этот режимдля наложения рисунка поверх флешки - вопрос один.
2. transparent (англ. прозрачный) в отношении позиционирования флеш-элементов похож на предыдущий -  возможность размещения слоев HTML поверх флешки осталась. К тому же, фон флешки может быть прозрачным. Следует отметить, что при вставке флешки в режиме transparent возможно замедление работы браузера!

Переходим к практике

Задавать значения для wmode можно как атрибут для тега embed или object:

<object wmode="opaque" ... />

Либо через тег param:

<object>
<param name="wmode" value="opaque" />
...
</object>

Более подробно с описанием параметра wmode можно ознакомиться на сайте Adobe в разделе справочной системы по Flash.

Да да.. Как оказалось, размеры шрифта разные браузеры подсчитывают по-разному.

При установке font-size:87%; IE 6, IE 7 , Firefox отображали надписи шрифтом в 12px, opera - 11px. При 88% - достигалось единообразие (12px) . Почему-то я не успокоился… Пошел дальше - при 86% ситуация такая же как при 87. Но при 85 процентах… IE6 и его младший (т.е. более поздний) брат показывали всё так же 12-px шрифтом, а Firefox стал солидарным с Oper’ой - перешел на 11px. При 84 - снова пришли к однообразию.

Не сразу понял, что происходит когда столкнулся с багом - в Internet explorer 6 отступ визуально казался больше, чем в Mozilla, Opera IE7. При увеличении отступа эта разница становилось более заметной. Хотя, никаких предпосылок к этому, казалось бы, быть не должно - В css всё ровно… Баг наблюдался при указании отступа для “плавающего” элемента (margin-left:10px; float:left) причем, только если отступ и выравнивание в одну сторону.

Как оказалось, это довольно известная проблема с удвоением отступа margin характерна для IE версии 6 и ниже и именно при выравнивании элемента в сторону отступа.. И название у неё имеется  - Doubled Float-Margin Bug.

Конечно, можно отказаться от использования margin для плавающего элемента, но есть другой более действенный способ - прописать display:inline для этого же элемента. Кроме того, можно воспользоваться условными комментариями для Internet Explorer версии 6 и ниже (lt 6) или хаками.

Дополнительную информацию можно посмотреть тут: http://www.positioniseverything.net/explorer/doubled-margin.html

IE 3px float bug - глюк IE 6.

<style>
#left {width: 200px;float: left; border: solid 1px #f00;}
#right {padding:0;border: solid 1px #0f0;margin: 0 20px 0 250px;}
#right p{background: #000;height: 100px;margin:0;}
</style><div id=”left”> </div>
<div id=”right”><p> </p></div>

В IE 6 появляется отступ 3 px у элемента p, который находится на уровне  элемента #left, если блок “обтекается” другим блоком (у которого не задана высота) и у последнего есть дочерний блок(у которого задана высота), то этот дочерний блок будет иметь отступ в 3px от родительского блока слева. Замудрено, но похоже на правду…

Как лечить!?
1) Прописать высоту у элемента right (#right:height:1%)
2) С помощью условных комментариев задать отрицательный отступ в ie6

<!–[if lte IE 6]>
<style type=”text/css”>
#right p {margin-left:-3px;}
</style>
<![endif]–>