Подскажите как сделать меню на CSS если:

[greatilya]

Конечно как делать меню на CSS я знаю. Сейчас интересует немного другой вопрос. Бился несколько часов над следующей задачей:
Имеется следующий код:

<ul class="menu_top">
<li id="current" class="active item1">
<a href="http://localhost/"><img src="home.gif" align="left" alt="home" /><span>Главная</span></a></li>
<li class="item2"><a href="#"><img src="mail.gif" align="left" /><span>Обратная связь</span></a></li>
<li class="item3"><a href="#"><img src="sitemap.gif" align="left" /><span>Карта сайта</span></a></li>
</ul>

Этот код менять нельзя. С помощью CSS нужно сделать следующее:
(скриншот)
Итого: 1 картинка с белой подложкой, 3 картинкаи УЗКИЕ для каждого пункта меню(их я выделил разными цветами)

Пытался по всякому, не выходит. По сути делаю так:

ul.menu_top {  background:url(../images/top.jpg) left top no-repeat; list-style:none;  }
ul.menu_top li { padding: 0px 5px; float:left; }
ul.menu_top span { display:none; }

Вроде всё нормально, только подложка top.jpg пропадает. Подскажите, пожалуйса, как надо?

[Kolyaj]

ul.menu_top добавить нужную ширину, она все равно фиксированная. Ну и высоту до кучи.

[greatilya]

СПАСИБО, работает!!!

Интересно а в этом логика есть? Не вижу взаимосвязи между фоновой картинкой и высотой и шириной. Эх странные они, эти стандарты).

[Kolyaj]

Логика есть, все дочерние элементы плавающие и на поток не влияют, поэтому контейнер схлопывается. Т.е. это не фон не виден, это элемент имеет нулевые размеры. Обычно в таких случаях, если размеры блока заранее неизвестны, устанавливают свойство overflow: hidden;

[x-yuri]

Обычно в таких случаях, если размеры блока заранее неизвестны, устанавливают свойство overflow: hidden;

и чем оно помогает, какой результат? По идее вообще меню исчезнуть должно

[Kolyaj]

и чем оно помогает, какой результат?

Контейнер не схлопывается под плавающие элементы.

По идее вообще меню исчезнуть должно

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

[greatilya]

Вот теперь вижу логику, спасибо за детальный ответ. Форума лучше я пока не встречал. Респект!

[x-yuri]

Контейнер не схлопывается под плавающие элементы.

кстати, в ie 6 схлопывается. Я знаю пока следующее решение: поставить float

[Kolyaj]

Как он схлопывается, если у него размеры жестко заданы?

[x-yuri]

Обычно в таких случаях, если размеры блока заранее неизвестны, устанавливают свойство overflow: hidden;

кстати, в ie 6 схлопывается

я про случай, когда размеры не заданы. И причина - hasLayout
т.е. для такого кода

<div style="overflow: hidden;
            border: 1px solid green;">
<div style="float: left;
            width: 10px;
            height: 10px;
            background: red;"></div>
</div>

схлопывается только в ie6, пока ему hasLayout не установить