Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Вертикальное меню на списках css IE6

Автор: JEEN 6.3.2012, 19:54

Пытаюсь сделать менюшку что-то вроде этой
user posted image

меня мало волнуют цвета и мало волнует левая сторона, а вот то, что справа нет выравнивания по ширине - вот то, что мне интересно. Обычно таким менюшкам тегу A задается display:block; padding: ... margin: ... Ну и она выглядит как-то так:

Я сделал так:

Код


ul {
    list-style:none;
}
ul li {
    margin-bottom:5px;
    overflow:hidden;
}
ul li a {
    display:block;
    float:left;
    padding:0 13px 0 13px;
}
ul li a.current {
    background-color:#698cac;
    padding:5px 13px 7px 13px;
}

а html выглядит так (и не может быт по другому)

Код


<ul>
    <li><a href="#">Первая ссылка</a></li>
    <li><a href="#" class="current">Вторая ссылка</a></li>
    <li><a href="#">Третья ссылка</a></li>
    <li><a href="#">Четвертая ссылка</a></li>
</ul>

везде все нормально отображается, кроме IE6. Там третий элемент пытается вставть в линию со вторым (current). Решается это проблема так:

Код


<ul>
    <li><a href="#">Первая ссылка</a><br clear="both"/></li>
    <li><a href="#" class="current">Вторая ссылка</a><br clear="both"/></li>
    <li><a href="#">Третья ссылка</a><br clear="both"/></li>
    <li><a href="#">Четвертая ссылка</a><br clear="both"/></li>
</ul>

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

Автор: Amphiluke 6.3.2012, 20:16

Код


ul li {
    margin-bottom:5px;
    overflow:hidden;
    clear:both; /* ? */
}

Можно вместо float:left дать ссылкам display:inline-block, а для IE6,7 — display:inline; zoom:1

Автор: JEEN 6.3.2012, 20:31

Цитата

clear:both;

помогло! спасибо!