Косяк с таблицей стилей в маркерованном списке

[eugene1986]

Здравствуйте.

У меня такая проблема: Есть меню, сделанное списком <ul> <li>, с помощью css присваиваются маркеры:

ul#my-menu li.collapsed {list-style: url("/images/collapsed.gif")}
ul#my-menu li.expanded {list-style: url("/images/expanded.gif")}
ul#my-menu li.kl {list-style: disc; color:white;}
ul#my-menu ul {list-style: disc; color:white;}

вот html код мею:

<ul id="my-menu" class="sample-menu">
<li><a href="#0">Автосвет, автолампы, ксенон, биксенон</a>
<ul>
<li><a class="direction" href="/catalog/index.php?group=16&menu=1"> Альтернативная оптика</a></li>
<li><a class="direction" href="/catalog/index.php?group=17&menu=1"> Блок-фары, оптика</a></li>
<li><a class="direction" href="/catalog/index.php?group=18&menu=1"> Ксенон, биксенон. комплектующие</a></li>
<li><a class="direction" href="/catalog/index.php?group=19&menu=1"> Лампы галогеновые</a></li>
<li><a class="direction" href="/catalog/index.php?group=20&menu=1"> Лампы накаливания</a></li>
<li><a class="direction" href="/catalog/index.php?group=21&menu=1"> Лампы светодиодные</a></li>
<li><a class="direction" href="/catalog/index.php?group=22&menu=1"> Указатели поворотов, габариты</a></li>
<li><a class="direction" href="/catalog/index.php?group=23&menu=1"> Фары противотуманные</a></li>
<li><a class="direction" href="/catalog/index.php?group=24&menu=1"> Фонари задние, стоп-сигналы</a></li>
</ul>
</li>
<li><a href="#0">Автоэлектроника</a>
<ul>
<li><a class="direction" href="/catalog/index.php?group=26&menu=1"> DVD рессивер</a></li>
<li><a class="direction" href="/catalog/index.php?group=27&menu=1"> GPS навигаторы</a></li>
<li><a class="direction" href="/catalog/index.php?group=28&menu=1"> MP3 CD рессивер</a></li>
<li><a class="direction" href="/catalog/index.php?group=29&menu=1"> Антенны</a></li>
<li><a class="direction" href="/catalog/index.php?group=30&menu=1"> Антирадары, парктроники</a></li>
<li><a class="direction" href="/catalog/index.php?group=31&menu=1"> Колонки</a></li>
<li><a class="direction" href="/catalog/index.php?group=32&menu=1"> Компьютеры маршрутные, часы</a></li>
<li><a class="direction" href="/catalog/index.php?group=33&menu=1"> Подиумы, полки аккустические</a></li>
<li><a class="direction" href="/catalog/index.php?group=34&menu=1"> Преобразователь напряжения</a></li>
<li><a class="direction" href="/catalog/index.php?group=35&menu=1"> Провода, предохранители. разъемы</a></li>
<li><a class="direction" href="/catalog/index.php?group=36&menu=1"> Противоугонные системы</a></li>
<li><a class="direction" href="/catalog/index.php?group=37&menu=1"> Сабвуферы</a></li>
<li><a class="direction" href="/catalog/index.php?group=38&menu=1"> Телевизоры, DVD плееры, трансмитеры</a></li>
<li><a class="direction" href="/catalog/index.php?group=39&menu=1"> Усилители</a></li>
<li><a class="direction" href="/catalog/index.php?group=40&menu=1"> Флэш память</a></li>
</ul>
</li>
<li class="kl"><a class="direction" href="/catalog/index.php?group=10&menu=1"> Автоаксессуары</a></li>
<li class="kl"><a class="direction" href="/catalog/index.php?group=8&menu=1"> Автошины, диски, камеры</a></li>
<li class="kl"><a class="direction" href="/catalog/index.php?group=9&menu=1"> Аккумуляторы</a></li>
<li class="kl"><a class="direction" href="/catalog/index.php?group=14&menu=1"> Аудио, видео, сигнализация</a></li>
<li class="kl"><a class="direction" href="/catalog/index.php?group=1&menu=1"> ВАЗ, Ока</a></li>
<li class="kl"><a class="direction" href="/catalog/index.php?group=3&menu=1"> Волга, Газель, Соболь, УАЗ</a></li>
<li class="kl"><a class="direction" href="/catalog/index.php?group=5&menu=1"> Грузовые, Автобусы</a></li>
<li class="kl"><a class="direction" href="/catalog/index.php?group=7&menu=1"> ГСМ, Химия, Краски</a></li>
<li class="kl"><a class="direction" href="/catalog/index.php?group=4&menu=1"> Дополнительное оборудование</a></li>
<li class="kl"><a class="direction" href="/catalog/index.php?group=6&menu=1"> Иномарки</a></li>
<li class="kl"><a class="direction" href="/catalog/index.php?group=11&menu=1"> Инструмент, Приспособления</a></li>
<li class="kl"><a class="direction" href="/catalog/index.php?group=12&menu=1"> Литература</a></li>
<li class="kl"><a class="direction" href="/catalog/index.php?group=2&menu=1"> Москвич, ИЖ, Таврия, ЗАЗ</a></li>
<li class="kl"><a class="direction" href="/catalog/index.php?group=13&menu=1"> С п о р т</a></li>
</ul>

По идее у всех <li>, у которых есть потомки должны иметь рисуночек (треугольник), а у всех остальных - точка. В opera все отлично как и в фаирфоксе, а вот в IE6 - косяк ставит саркеры рисунка у всех элементов. Что делать?

[npofopr]

поставить !important; может быть?

[eugene1986]

поставить !important; может быть?

где, можно пример кода если несложно?

[psywalker]

Покажи скриншот того, что хочешь получить.

[eugene1986]

Сам рисуночек "вращается" с помощью JavaScript меняя классы у элементов <li>

Edited July 19, 2010 by eugene1986

[psywalker]

Смотри:

1) У тебя все классы лишние.

2) Вместо list-style-type можно пользоваться background, во многих случаях это намного лучше.

3) Вот тебе стили, перепиши их так:

<style type="text/css">
	ul { list-style: none;}
	ul#my-menu li{ background: url(children.jpg) no-repeat}
ul#my-menu li ul li{ background: none; list-style-type: disc; }

</style>

[eugene1986]

Смотри:

1) У тебя все классы лишние.

2) Вместо list-style-type можно пользоваться background, во многих случаях это намного лучше.

3) Вот тебе стили, перепиши их так:

<style type="text/css">
	ul { list-style: none;}
	ul#my-menu li{ background: url(children.jpg) no-repeat}
ul#my-menu li ul li{ background: none; list-style-type: disc; }

</style>

Такой вариант не устраивает, т.к. маркеры списка будут "утоплены" в текст и будут плохо заметны.

[psywalker]

Так ведь отступы можно поставить левые.

[npofopr]

ul#my-menu li{

background: url(children.jpg) no-repeat 0 2px; /* если маркер меньше высоты строки то выровнять 0 2px */

padding-left: 10px; /*столько сколько маркер в длину + еще чуть чуть */

}

и ничего не утопится

По идее у всех <li>, у которых есть потомки должны иметь рисуночек (треугольник), а у всех остальных - точка. В opera все отлично как и в фаирфоксе, а вот в IE6 - косяк ставит саркеры рисунка у всех элементов. Что делать?

лучше дайте ссылку откуда меню взяли. или сами посмотрите поддерживает ли оно IE6

[psywalker]

Да что тут смотреть, отступы 100% должны закончить задачу.

[eugene1986]

Смотри:

1) У тебя все классы лишние.

2) Вместо list-style-type можно пользоваться background, во многих случаях это намного лучше.

3) Вот тебе стили, перепиши их так:

<style type="text/css">
	ul { list-style: none;}
	ul#my-menu li{ background: url(children.jpg) no-repeat}
ul#my-menu li ul li{ background: none; list-style-type: disc; }

</style>

Вот это + padding-left помогло, но теперь на первом уровне, та часть списка которая с точками намного ближе к краю чем те которые со стрелочкой, padding left не помогает

[psywalker]

Значит нужно у всех сложенных списков настроить отступы так, чтобы всё выглядело как надо.

[eugene1986]

Все сделал, спаибо всем! Тема закрыта!

Edited July 19, 2010 by eugene1986