Я не могу сказать, что я профессионал в 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 - сообразит.

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