VPF::Вертикальное меню на списках css IE6

JEEN

Дата 6.3.2012, 19:54 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 88
Регистрация: 8.3.2008

Репутация: нет
Всего: 1

Пытаюсь сделать менюшку что-то вроде этой
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 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 9
Всего: 112

Код


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 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 88
Регистрация: 8.3.2008

Репутация: нет
Всего: 1

Цитата

clear:both;

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

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »