Нестандартные обтекаемые блоки

Доброго времени суток. Это первый пост в Новом году =).

Предложили работу. Верстка сайта, на вид довольно таки простая. Но взглянув в ТЗ (техническое задание) понимаешь, что сайт продуман до мелочей. И сейчас я напишу подробнее об одном из пунктов.

Верстка главного меню: само главное меню состоит из 1 и 2 части. То есть 1 и 2 — два различных меню. Из шаблона видна ситуация, когда 2 идет после 1 (см. название слоев). Но когда оба меню не помещаются в одну строчку, то второе находится над первым (как показано на слое «Меню Ситуация 2»).

Сразу, когда я принялся за верстку этого меню, у меня в голове не было никаких идей. Я даже собирался использовать javascript, что заказчик полностью разрешил.

Но решение само как-то пришло на следующий день. Благо, время позволяло переделать, прикрутить и завершить верстку всего сайта вовремя.

Сразу из цитаты покажу два рисунка, созданные на основе оригинального шаблона:
Ситуация 1 — когда второй блок, содержащий текст «главная», идет после первого, содержащего текст «категория».

Ситуация 2 — когда второй блок, содержащий текст «главная», размещается над первым, содержащим текст «категория».

Теория! Имеем два блока, но задаем им display:inline, чтобы убрать блочные свойства. В коде располагаем второй блок на первом месте. А первому в css прописываем обтекание по левому краю (float:left). Тогда у нас получается что при маленьком контенте первый идет первым, второй — вторым. И при увеличении контента одного или двух из блоков, то второй располагается над первым. Что нам и нужно было. Но не все так просто. Внутренние элементы должны сохранять свою ширину в зависимости от контента и обладать свойствами линейных элементов. Поэтому я отказался от привычных списков для меню и использовал обычные ссылки. При чем для них применил свойство display:inline-block, для того, чтобы можно было задавать фон картинкой и чтобы обладала свойствами линейных элементов.

Код!
html:

css:


.block2, .block1{display:inline;}
.block1{float:left;}
.block2 a{
/* Дальше идут хаки для использования display:inline-block; */
display:-moz-inline-stack;display:inline-block;_overflow:hidden;zoom:1;*display:inline;
}


Как вы могли заметить, я использовал хак для многих браузеров, связанный со свойством display. Я вам показал просто блоки без оформления. Вот теперь я вам покажу реальные стили, которые я использовал для верстки этого меню.


.block2, .block1{display:inline;}
.block2{margin-bottom:10px;}
.block1{float:left;margin:4px 0 0 5px;}
.block2 a{
background:#ebebeb url('menu-bg.png') no-repeat 0 0;
width:90px;height:21px;text-align:center;padding:5px 0;font-size:18px;
/* Дальше идут хаки для использования display:inline-block; */
display:-moz-inline-stack;display:inline-block;_overflow:hidden;zoom:1;*display:inline;
}
.block2 a:hover{color:#ccc;}
.block1 a{font-size:15px;text-decoration:underline;color:#414141;padding:0 5px;}
.block1 a:hover{text-decoration:none;}


Все хорошо, красиво, но в IE версии 6 и 7, второе меню не обтекает первое по правому краю. Как бы я ни старался, я все равно не получил желаемого эффекта. Но заказчик одобрил отображение в IE этих версий.

Мы имеем красивые менюшки с нестандартным обтеканием. Очень жаль, что мне не удалось добиться полной кроссбраузерности, но адекватно пример ведет себя в следующих браузерах: Opera 9.6.3 и выше (ниже не тестировалось), Mozilla 3.5.2 и выше (ниже не тестировалось), Konqueror 4.3.4 (ниже не тестировалось), Rekonq 0.3.0 (ниже не тестировалось), IE 8 и выше.

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