Вот и настало время выплеснуть из себя заметку по CSS :)
Что-то из инструментария хочется описать. Упрощаем и делаем свою работу удобнее! Зачем? И ребёнку ясно – возможность в рабочее время иметь законные минутки, чтобы написать в блог или порубиться в КС с коворкерами :)

Сегодня я расскажу о КСС-дэбаге и диагностике :)

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

<table border="1">....</table>

Сейчас же, верстая дивами я использую CSS стили для нужных блоков. Мало ли, какой баг закрался и без FireBugWebDeveloper не узнать почему блоки поплыли…а мы ему ррраааззз:
div.bug {background: red;}
…или…

div.bug {border: 1px solid red;}

…и сразу видно что к чему! Правда при вёрстке пиксель-в-пиксель второй метод не советую, т.к меняются размеры блоков.

“Уууууу! Мы это всё знаеееем!”, – закричите Вы и будете правы. Поэтому я приведу ещё пару интересных решений:

Eric Meyer предложил использовать опредленные CSS правила для выявления ошибок на странице в ходе проектирования. Цель правил визуально показывать ошибки на странице. Например если у ссылки не проставлен адрес она выделяется определенным цветом и сразу обращает на себя внимание.
Почитайте на Life Style перевод статьи.

И ещё:

Есть картинка, размером 1200х800 пикселей, на которой расчерчена каркасная решетка разметки квадратами со стороной 50 пикселей. Картинка вставляется как фоновое изображение в body и упрощает визуальное размещение блоков во время верстки.
Забираем “тулзу” с Webmakers Lounge

Похожие статьи:

1. Непростое CSS меню с использованием спрайтов
2. Как Internet Explorer поддерживает CSS?
3. 8 CSS групп шрифтов для вебдизайна
4. Aptana – IDE для AJAX, HTML, CSS