Я не могу сказать, что я профессионал в css-ной верстке, т.к. мой переход с таблиц на стили произошел сравнительно недавно. Поэтому у меня частенько возникают, во1, различного рода проблемы ориентирования слоев в пространстве браузера, во2, проблемы совместимости с различными браузерами, ну и в 3х — непонятки, как конкретную фичу (вид) сделать с помощью CSS, типа, по-хорошему (в отличие от антонима «через жопу»).

Воощем, решил я для себя сделать некую подборку а-ля «CSS: полезные решения», дабы каждый раз не лезть в поиск.

1. Чтоб верхние и нижние индексы не «рвали» строковый ряд.

Наглядный пример, сверху как было, снизу — как стало:

Прикольна? а делается это вот таким куском кода в css-файле для всех супов и субов:

sup, sub
{
vertical-align: middle;
position: relative;
font-size: 75%;
}
sup { bottom: 0.5em; }
sub { top: 0.5em; }

2. 100+ готовых макетов для создания дизайна на слоях и CSS

На сайте одной западной веб-дизан-конторы я нашел более 100 вариантов макетов, как оригинальных, так и имитирующих табличную. Присутствует как резиновая, так и фиксировання верстка, с двумя, тремя, четырьмя колонками, с местом под горизонтальную менюшку, хедер-футер, все дела. html-код минимален, все управление в CSS. Проверил несколько макетов в разных браузерах — все ОК, т.е., они еще и совместимостью обладают!

Ссылка очень полезная тем, кто верстает в слоях:
http://www.graphicson.com/html/portfolio.html,layouts

Лезть в CSS-код придется полюбому, подправив вид текста (в примерах он отцентрирован по вертикали за счет межстрочного расстояния), убрав фиксированную высоту блока с контентом (дабы этот слой мог тянуться вниз, автоматом увеличиваясь по мере необходимости в зависимости от количества контента), но эт всё фигня, кто худо-бедно знает CSS — сообразит.

3. Одинаковое отображение тэга HR во всех браузерах

Тэг HR один из самых старых тэгов, однако, до сих пор его отображение различно в браузерах, связано это прежде всего с разным интерпретированием бордера объектов, а также различными значениями по умолчанию. Вот код, который одинаково отобржает серую линию толщиной в 1 пиксел по центру:

HR {
padding: 0px;
margin: 0 auto;
background-color: #666;
color: #666;
border: none;
height: 1px;
line-height: 1px;
}

Код одинаково работает в IE6,7, Opera9, Firefox2,3. В других не проверял.

4. Глобальный сброс настроек CSS

Глобальный сброс Эрика Мэйера

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

Yahoo! UI Library: CSS сброс

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3 ,h4 ,h5 ,h6 ,pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption, cite,code,dfn,em, strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}

Глобальный сброс стилей CSS (Kyle Neath)

*
{
padding:0;
margin:0;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:1em 0; }
li, dd { margin-left:5%; }
fieldset { padding: .5em; }
select option{ padding:0 5px; }

.hide, .print-logo, .close-button{ display:none; }
.left{ float:left; }
.right{ float:right; }
.clear{ clear:both; height:1px; font-size:1px; line-height:1px; }
a img{ border:none; }


Глобальный сброс (Павел Марковнин)

html
{
color: #2d2d2d;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
line-height: 1.4em;
background: #f7f4ea url(../images/bodyBg.gif) top left repeat-x;
}

*
{
padding: 0;
margin: 0;
outline: none;
font-size: 100%;
line-height: inherit;
_line-height: 1.4em;
}

input, textarea
{
padding: 0.2em;
}

img, a:link img, a:visited img, a:hover img, a:active img
{
border: 0;
}

a:link
{
font: inherit;
color: #0e8db7;
text-decoration: none;
border-bottom: 1px solid;
text-decoration: underline;
border: 0;
}

a:active
{
font-size: 100%;
color: #0e8db7;
text-decoration: none;
border-bottom: 1px solid;
text-decoration: underline;
border: 0;
}

a:hover
{
font-size: 100%;
color: #cc4e4e !important;
text-decoration: none;
border-bottom: 1px solid;
text-decoration: underline;
border: 0;
}

a:visited
{
font-size: 100%;
color: #9268b5;
text-decoration: none;
border-bottom: 1px solid;
text-decoration: underline;
border: 0;
}

a.dashed:link, a.dashed:active, a.dashed:visited
{
color: #0e8db7;
text-decoration: none;
border-bottom: 1px dashed;
}

a.dashed:hover
{
text-decoration: none;
border-bottom: 1px dashed;
}

h1
{
font-size: 1.8em;
margin: 0.2em 0 0.6em 0;
font-weight: normal;
color: #0e8db7;
}

h2
{
font-size: 1.7em;
margin: 0.8em 0 0.5em 0;
font-weight: normal;
color: #0e8db7;
}

h3
{
font-size: 1.6em;
margin: 0.7em 0 0.5em 0;
font-weight: normal;
}

h4
{
font-size: 1.3em;
margin: 0.5em 0 0.4em 0;
font-weight: normal;
}

h5
{
font-size: 1.2em;
margin: 0.5em 0 0.4em 0;
font-weight: normal;
}

h6
{
font-size: 1.1em;
margin: 0.5em 0 0.4em 0;
}

p
{
margin: 0.8em 0 0.9em 0;
}

table
{
border: 0;
border-collapse: collapse;
}

table td, th
{
padding: 0;
vertical-align: top;
text-align: left;
}

ul, ol
{
margin: 0.2em 0 1.4em 0;
padding: 0 0 0 2em;
}

small, sup, sub
{
font-size: 0.8em;
}

big
{
font-size: 1.2em;
}

ul li
{
margin: 0.5em 0;
padding: 0 0 0 15px;
list-style-type: none;
background: url(../images/bullet.gif) 0 0.5em no-repeat;
}


Мастер стили

html, body {
border:0;
margin:0;
padding:0;
}

body {
font:100%/1.25 Arial, Helvetica, sans-serif;
}

/***** Headings *****/

h1, h2, h3, h4, h5, h6 {
margin:0;
padding:0;
font-weight:normal;
}

h1 {
padding:30px 0 25px 0;
letter-spacing:-1px;
font-size:2em;
}

h2 {
padding:20px 0;
letter-spacing:-1px;
font-size:1.5em;
}

h3 {
font-size:1em;
font-weight:bold;
}

/***** Common Formatting *****/

p, ul, ol {
margin:0;
padding:0 0 1.25em 0;
}

ul, ol {
padding:0 0 1.25em 2.5em;
}

blockquote {
margin:1.25em;
padding:1.25em 1.25em 0 1.25em;
}

small {
font-size:0.85em;
}

img {
border:0;
}

sup {
position:relative;
bottom:0.3em;
vertical-align:baseline;
}

sub {
position:relative;
bottom:-0.2em;
vertical-align:baseline;
}

acronym, abbr {
cursor:help;
letter-spacing:1px;
border-bottom:1px dashed;
}

/***** Links *****/

a,
a:link,
a:visited,
a:hover {
text-decoration:underline;
}

/***** Forms *****/

form {
margin:0;
padding:0;
display:inline;
}

input, select, textarea {
font:1em Arial, Helvetica, sans-serif;
}

textarea {
width:100%;
line-height:1.25;
}

label {
cursor:pointer;
}

/***** Tables *****/

table {
border:0;
margin:0 0 1.25em 0;
padding:0;
}

table tr td {
padding:2px;
}

/***** Wrapper *****/

#wrap {
width:960px;
margin:0 auto;
}

/***** Global Classes *****/

.clear { clear:both; }
.float-left { float:left; }
.float-right { float:right; }

.text-left { text-align:left; }
.text-right { text-align:right; }
.text-center { text-align:center; }
.text-justify { text-align:justify; }

.bold { font-weight:bold; }
.italic { font-style:italic; }
.underline { border-bottom:1px solid; }
.highlight { background:#ffc; }

.wrap { width:960px;margin:0 auto; }

.img-left { float:left;margin:4px 10px 4px 0; }
.img-right { float:right;margin:4px 0 4px 10px; }

.nopadding { padding:0; }
.noindent { margin-left:0;padding-left:0; }
.nobullet { list-style:none;list-style-image:none; }

Продолжение следует…