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

Создадим табличку на пять ячеек и в каждую поместим по картинке. Выровняем картинки по центру ячеек (td {text-align: center}), а таблицу растянем на всю ширину (table {width: 100%})

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

Как и следовало ожидать, и как и должно было произойти (такова природа таблиц: для ячеек, содержащих больше отводится большее место), пустые ячейки сжались до минимальной ширины. Поэтому для ячеек с картинками создадим класс, которому зададим свойство width:1%. Опять воспользуемся свойством таблиц: несмотря на указание ширины ячейкам, эти ячейки будут растянуты по ширине содержимого, если только таблице на задано свойство table-layout:fixed.

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

.someclass{
    display: inline-block;
}

.someclass{
    //display: inline;/*магия ИЕ*/
}

Именно вот так: в таблице стилей должны присутствовать обе записи. Если же вы предпочитаете условные комментарии, то вторая запись должна быть вынесена в стили для ИЕ.
Работает в ИЕ6+, ФФ3+, Опера (даже не знаю с какой версии), Хром, Сафари, далее – везде).
Для ФФ2 нужен костыль

jQuery('a', '#accord').each(function(){
        if ($(this).next('ul').length > 0)
            $(this).css({
                color: '#000'
            });
        $(this).click(function(event){
            if ($(this).next('ul').length > 0) {
                event.preventDefault();
            }
            $(this).addClass('selected');
            $(this).next().show('slow');
            $('ul', $(this).parent().siblings()).hide('slow');
            $('a', $(this).parent().siblings()).removeClass('selected');
        })
    })

Все остальное просто  добротная верстка. Вот пример страницы.

главная страница сайта

Что мне не нравится на этом сайте — это огромные формы. Мне трудно представить, что  кто-то станет заполнять их полностью. Например вот такую

пример формы

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

Something like this (как-то так):
button {padding:2px 5px;background: #FAF9F5 url(../images/bgimg.png) repeat;line-height: 1.5;
}
then use smaller padding left/right value for IE, e.g. (и потом уменьшите отступы для ИЕ)
button {padding: 2px 1px !important}

Вот последняя строчка и вызвала мое изумление. Уважаемый подписчик WSG не знает как можно избавиться от лишних отступов по бокам в кнопках в Интернет Експлорере.

Поясню в чем дело. Интернет Експлорер в версиях до 7 включительно добавлял в кнопках (будь то input, илиbutton) справа и слева непонятные отступы, причем, чем длиннее была надпись на кнопке, тем больше отступы. Вот как-то так:

лишние отступы в кнопках в браузерах Интернет Експлорер 5-7

Тогда как в остальных браузерах (для меня это Файрфокс, Опера и Хром) все выглядит так:

отступы в кнопках в файрфоксе

Никаких непонятных отступов, все одинаково, независимо от количества знаков в надписи.

И что же делать? Как привести в чувство этот загадочный ИЕ? Ответ как всегда прост и непостижим, как и любое шаманство, касающееся ИЕ. Задайте в ваших стилях для кнопок простое свойство overflow: visible. Вуаля, и теперь уже для ИЕ придется добавить несколько пикселей справа и слева, чтобы по бокам были отступы

Итак, чтобы убрать лишние отступы в кнопках в браузерах семейства Интернет Екслорер версий 6 и 7 надо добавить в стили для этих кнопок свойство overflow: visible и поправить отступы, которые теперь нам полностью подвластны.

На живом примере разницу увидят только обладатели ИЕ6-ИЕ7 (на ИЕ5 не проверял ибо нех (написал это и проверил-таки – ИЕ 5.01 – сакс, ИЕ 5.5 подобен ИЕ6 – но все равно нех уже))
button

button — лишние отступы чудесным образом пропали

submit type submit

submit type submit

На сайте я немного необычно, как мне кажется, сделал меню (первый его уровень). Как обычно, я старался уменьшить количество картинок, используемых для создания меню. И делая это меню, я еще не использовал CSS-свойство clip. Думается мне, что это свойство мне могло пригодится. Но обошелся и без него, сделав все кроссбраузерно, использовав минимум картинок, причем PNG с альфа-каналом. Вот из-за альфа-канала весь сыр-бор, как обычно. Как известно ИЕ6 не поддерживает альфа-прозрачность в PNG напрямую, а только через проприетарные майкрософтовские фильтры. И поэтому не получилось просто сдвигать фон пунктов меню, как обычно это делается для меню, реализованных фоновыми картинками. Ну раз нельзя двигать фон, будем двигать целиком элемент, в котором фоном будет необходимая нам картинка.

Итак, делаем картинку, состоящую из двух частей: одна с белой надписью, вторая с красной (синий фон добавлен, чтобы читалась белая надпись, но синий в данном случае означает прозрачный).

Высота картинки равна двойной высоте меню (в данном случае 51 пиксель). Создаем в таблице стилей описание для элемента, фоном которого будет наша картинка. Размеры элемента равны размеру картинки. Это необходимо для, чтобы пнг-фильтр для ИЕ6 отобразил картинку полностью. И теперь нам только остается сдвигать этот элемент с фоном при наведении на соответсвующий пункт меню.

иллюстрация к идее

Чтобы показать как все это ведет себя в браузере воспользуюсь возможностями FireBug.

исходное состояние. элемент с необходимым фоном подсвечен голубым цветом

Красным обведены стили, отвечающие за исходное состояние.

наведенное стояние пункта меню

Как видите (обведено красным), я поспользовался отрицательным <code>margin</code>, чтобы сдвинуть элемент с фоном и показать красную надпись.

Вот такой вариант мне пришел в голову, когда я верстал этот макет. И вот итог работы.

макет главной страницы

Что касается карты, то в ней единственной сложностью было, что приходилось работать через удаленный рабочий стол, имея не очень хорошо сгенеренный картографическим модулем HTML. Пришлось много перелопачивать уже готовых шаблонов вывода результатов. Но общий каркас мне удался) Аж самому понравилось. К тому же было принято несколько моих предложений по, как мне кажется улучшению интрефейса. И верстка получилась в общем компактная, вполне себе семантичная. И почти без Expressions для ИЕ6) В общем смотрите, любуйтесь, что понравилось — используйте. К сожалению в статичном варианте раздела карты у меня нет, по причине укзанной выше. Все делалось наживую на удаленном сервере. Но будет время, соберу воедино все стили и всю верстку карты и выложу на общее обозрение.

карта Геоинформационной Системы Инвестора Санкт-Петербурга

При верстке карты обнаружил забавную мелочь: из всех браузеров, которые у меня установлены (ИЕ6-8, ФФ 2-3,5. Опера 9.2-10, Хром 3.0.183.1 и Сафари 4 бета (кстати, надо скачать уже не бету)), только Сафари и ИЕ8 понимают свойство background-image для selecta‘а. background-color понимают все, даже ИЕ6, а вот background-image отнюдь нет.

Выглядит это как-то так

Поместим второй DIV внутрь первого

Если ваш браузер поддерживает стандарты в полной мере, то вы увидите

иллюстрация стандартного поведения браузера - родительский элемент сохраняет указзную ширину, не обращая внимания на ширину контента

Если же нет и вы пользуетесь ИЕ6 или даже еще более ранней версией Инернет Експлорера , то вашим глазам предстанет следущая картина

иллюстрация поведения ИЕ6 - браузер растягивает элемент по соширине содержимого

Как видите ИЕ6 растянул родительский контейнер по ширине содержимого.

Чтобы этого не происходило добавим внутрь контейнера еще один блок.

HTML

<div class="parent">
Наш контейнер
    <div class="wie6">
        <div class="child">
        Вложенный элемент
        (пусть тоже будет DIV)
        шириной в 250 пикселей</div>
    </div>
шириной в 200 пикселей
</div>

И зададим указанным классам следущие свойства

CSS

<style type="text/css">
.parent {
	background:#afa;
	border:1px solid #000;
	width:200px;
}
.child {
	background:#aff;
	border:1px solid #f00;
	width:250px;
}
/* trick */
.wie6 {
	margin-right:-999px;
	position:relative;
	width:100%;
}

Откроем пример в ИЕ6 и о чудо. Родительский контейнер сохранил свою ширину в целости, а вложенный блок не обрезался и никуда не пропал

Предлагаемый способ не идеален (а есть ли другой?) и требует дополнительной разметки. Но на что не пойдешь, чтобы уважить пользователей ИЕ6.

Что же мне не понравилось в это раз? Ну, ни то, что не понравилось, но все же.

Приводится способ выравнивания блоков с картинками по центру родительского контейнера. Что ж, хороший способ применения нечасто используемого свойства inline-block. Но…

Так это выглядит в браузере

Рецепт основан на двойственной природе элемента INS. Как известно элементы INS и DEL могут быть как блочными (display: block), так и строчными (display: inline). При этом, будучи строчными, они могут быть контейнерами для блочных элементов, таких как DIV или P. Впервые подобный трюк я увидел около двух лет назад у Stuart Nicholls. Там была необходимость расположить по центру меню из табов при произвольной общей ширине меню. К сожалению, это пример был пересмотрен 24 января этого года)). Я сам использовал этот прием на своей народовской страничке (не смеяться!!!). Что забавно, в новом способе центрирования меню использован метод, который я впервые увидел у Лебедева. Но вернемся к нашим баранам.

Для чего в рецепте элементы DIV оборачиваются в INS? Дело в том, что применяемое свойство display: inline-block в Internet Explorer не действует на блочные элементы, такие как DIV, а только на строчные. INS же элемент строчный, но может быть контейнером для блочных, не нарушая стандартов (что нельзя помещать блочные элементы внутрь строчных). Эта особенность INS плюс особенность поведения display: inline-block-элементов — вот и весь трюк)

И опять но. А зачем, собственно, использовать DIV, если картинки с описаниями можно поместить в SPAN, который элемент строчный и на, него соотвественно действует display: inline-block. Ведь для чего предназначен INS? Теги INS и DEL предназначены для выделения добавленных или удаленных частей документа, соотвественно. Обычно, INS выделяют подчеркиванием текста, а DEL выглядит как зачеркнутый текст. Оба элемента имеют особые атрибуты cite (URI, отсылающий к документу, объясняющему причину изменения) и datetime (дата внесения изменения). И использование INS таким образом, как описано в техногрете, существенно нарушает семантику документа. И при этом добавляет лишний код в HTML.

Но предположим, что для описание картинки нам необходимо использовать заголовок (любого уровня). Тогда, соблюдая требования стандарта, что нельзя помещать блочные элементы внутрь строчных, нам придется использовать DIV вместо SPAN. Получается, что display: inline-block работать не будет и нам придется использовать трюк с INS? Вовсе нет. Вместо того, чтобы портить HTML мы воспользуемся небольшим трюком в CSS. Трюк простой и забавный, как все, что касается Internet Explorer, но эффективный. Напишем в нашем файле стилей следущее:

.some_class {
    display: -moz-inline-stack;
/*на мой взгляд малонужное правило для файрфокса 2
*/
    display: inline-block;
/*для браузеров, которые понимают, в том числе ИЕ8*/
}
/** и вот трюк (можно написать в файле стилей для ИЕ,
*  подключаемом через условные комментарии
*  или же используя хаки)
*/
/*стили для ИЕ6 и ИЕ7 */
.some_class {
    display: inline;
}

И все чудесным образом заработает.

Что неприятно удивило, так использование BR, чтобы картинка и подпись к ней располагались на разных строках. Ведь и так уже обернули картинку и текст в ссылки по отдельности. Так почему бы не задать одной из ссылок, или обеим, display: block. Зачем плодить мусор в коде в виде BR. А еще лучше задать display: block; картинке и обернуть и картинку, и текст в одну ссылку

В итоге можем получить короткий и кроссбраузерный код

Вариант без учета ФФ2

HTML:

<a href="#someURI" class="thumbnail">
    <img src="someImage" />
    описание картинки
</a>

CSS

.thumbnail {
    display: inline-block;
	}
    .thumbnail img {
    	dispaly: block;
        }

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

Если же нам понадобится добавить поддержку ФФ2 и в качестве контейнера использовать DIV, то пример немного усложниться, но все равно останется компактнее.

Inline-block с поддержкой Файрфокс 2

HTML

<div class="thumbnail">
	<a href="#someURI">
    	<img src="someImage" />
        описание картинки
	</a>
</div>

CSS

.thumbnail {
	display: -moz-inline-stack;/*ФФ2*/
    display: inline-block;
	margin:2em  0 0 2em;
	}
    .thumbnail img {
    	display: block;
        }
	/* hack section )*/
	/** с некоторых  пор я предпочитаю хаки в стилях
	  * условным комментариям для подключения стилей
	  * почему? будет время - будет пост
	 */
@-moz-document url-prefix() {
    .thumbnail a {
        display: block;
/*нужно для ФФ2, чтобы привести в чувство -moz-inline-stack*/
    }
    .thumbnail a {
        position:relative;
/* фигасе, это нужно для ФФ2, чтобы он увидел ссылку */
    }
}
/*IE 7*/
*+html .thumbnail {
    display:inline;
    }
/*IE 6*/
* html .thumbnail {
    display:inline;
    }

хотя можно и проще

.thumbnail {
    //display:inline;
    }

эту запись поймут только ИЕ7 и ИЕ6

А вот и небольшой пример, по максимуму приближенный к техногретному. За одним исключением — я не задал ширину для .thumbnail.

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

Что мы видим на первой же странице:

Названия товаров не помещаются и просто обрезаются свойством overflow: hidden
Не очень красиво, я бы сказал. Но ведь есть же замечательное, но крайне редко используемое (мне ни разу не попадалось на глаза его использование) свойство text-overflow: ellipsis. Что удивительно, его (это свойство) поддерживает дружное семейство браузеров по имени Internet Explorer. Это свойство имеет два (согласно с сайтом MS) значения: clip (по умолчанию) и   ellipsis, что в сочетании со свойством  overflow: hidden дает замечательный результат: текст, который не помещается в каком-либо элементе обрезается с заменой последних символов на многоточие!!! Получается очень аккуратно и симпатично.
А вот и примеры:

Без применения overflow и text-overflow

Теперь установим overflow: hidden и text-overflow:clip; (поведение по умолчанию)

И наконец требуемый результат в результате применения overflow: hidden и text-overflow:ellipsis;

Некоторые браузеры, в частности Opera, требуют своего префикса для этого свойства. MSDN рекомендует так же использовать префикс -ms для ИЕ8, но понимает это свойство и без него

Проверил, что Хром 2 и Сафари 4 понимают без префиксов, а ФайрФокс 3 не понимает вовсе

Но если не использовать это свойство, то хотя бы снабдить заголовок соответствующей всплывающей подсказкой, хотя бы в виде title