Верстка меню

Привет всем хочу сверстать вот такое меню (смотрите фото)
Вот типа такого ссылка
<div class="menu">
<ul>
<li class="active">
<i class="front1"></i><i class="front2"></i>
<a href="#"><b>Каталог</b></a>
<i class="end1"></i><i class="end2"></i>
</li>
</ul>
</div>

Когда я ставлю bg <li> его высота только как сам шрифт пунтка (Каталог)
Спасибо.

Цитата ("qualitative"):

Привет всем хочу сверстать вот такое меню (смотрите фото)
Вот типа такого ссылка
<div class="menu">
<ul>
<li class="active">
<i class="front1"></i><i class="front2"></i>
<a href="#"><b>Каталог</b></a>
<i class="end1"></i><i class="end2"></i>
</li>
</ul>
</div>

Когда я ставлю bg <li> его высота только как сам шрифт пунтка (Каталог)
Спасибо.

Поставьте высоту где шрифт bg <li> можно шпунька (Каталог).
Незачто.

Я ставлю высоту и ничего не меняется только вот когда ставлю position:absolute и высоту то высота ставится но margin и padding нет ((

Цитата ("qualitative"):

Я ставлю высоту и ничего не меняется только вот когда ставлю position:absolute и высоту то высота ставится но margin и padding нет ((

Используйте также и ширину чтобы менялось не только то и при этом position:absolute в ширине и ширина будет а margin и padding конечно нет..

AlekartRu, Спасибо сейчас попробую )

Да не за что, обращайтесь.

Абсолютное позиционирование тут нафиг не нужно, дайте ссылку на пациента. Проблема в блочном/строковом отображении, если я все правильно понял.

Display:block; всё должен исправить, а прочий мусор лучше убрать

nehovaysyatopol, ссылка

Цитата ("Gia-WEB"):

Display:block; всё должен исправить, а прочий мусор лучше убрать

display:block; присвоить <li> ?

Вы точно не ссылке фон даете? li себя обычно так не ведет. ну поставьте ему display:block; а потом тогда float: left; чтобы они в одну строку были. А position убрать вообще

Цитата ("Gia-WEB"):

Вы точно не ссылке фон даете? li себя обычно так не ведет. ну поставьте ему display:block; а потом тогда float: left; чтобы они в одну строку были. А position убрать вообще

Наверное inline стоит.
А зачем тогда display:block; ставить, если float и так будет блочным? Лучше оставить inline ... IE6 всё ещё 12% )
Абсолютное позиционирование, как я понял, в примере нужно было бы для скругленных уголков, которые и есть "прочий мусор" и на скрине отсутствуют.
Если скругления не нужно, то все эти front и end действительно мусор. Ссылку, например, в block и цвет ей фоновый. А треугольник нижним-средним фоном для li. и нижний padding на его высоту.
А вообще и при скруглении наверное уже почти можно и border-radius использовать, ну или ждать IE9..

Цитата ("antonius1980"):

IE6 всё ещё 12%

в каком месте это его 12% осталось?

В основном в Китае -_-

Цитата ("Gia-WEB"):

в каком месте это его 12% осталось?

Общая статистика.... Вот тут ежемесячно обновляется: ссылка

У меня лажа
Не получяется..

<div id="menu">


    <ul>                                <li>




                  <span tooltip='section' section_id='127'>Каталог</span>


                                  </li>


                                <li>


                                    <a tooltip='section' section_id='160' href='sections/160'>О компании</a>


                                  </li>


                                <li>


                                    <a tooltip='section' section_id='121' href='sections/payment'>Оплата/Доставка</a>


                                  </li>


                                <li>


                                    <a tooltip='section' section_id='123' href='sections/contacts'>Контакты</a>


                                  </li>


                                <li>


                                    <a tooltip='section' section_id='161' href='sections/161'>Размеры</a>


                                  </li>


                        </ul>


  </div>

span это активный пункт меню.

И фон конечно приписывается span'у... он ведь строчный элемент