Некорректно отображается маркер списка

[trololo]

Добрый вечер!

Столкнулся со следующей проблемой: некорректно отображается маркер списка исключительно в опере, при том что в фаерфоксе, эксплорере и хроме всё как и должно быть. Выглядит это следующим образом:

Это такая особенность оперы, или с этим можно что-то сделать? Подскажите пожалуйста.

Вот css на всякий случай:

ul li.collapsed { 
  list-style-image: url("../images/plus.png");
}
ul li.expanded {
  list-style-image: url("../images/minus.png");
}

[Vlad]

Единственный адекватный способ это убрать list-style и заменить его background, т.е. картинку выводить фоном.

[trololo]

Единственный адекватный способ это убрать list-style и заменить его background, т.е. картинку выводить фоном.

Попробовал как вы посоветовали, теперь в опере и фаерфоксе всё впорядке, в хроме же совсем бардак (при открытии-закрытии пункта меню подпункты каждый раз сдвигаются на заданный margin и появляется маркер), а в эксплорере игнорируется этот же margin.

CSS:

ul li.collapsed { 
  list-style-image: none;
  list-style-type: none;
  display: inline;
  background: url("../images/plus.png") no-repeat left center;
}
ul li.expanded {
  list-style-image: none;
  list-style-type: none;
  display: inline;
  background: url("../images/minus.png") no-repeat left center;
}
.content ul li ul {
  margin: 0 0 -20px 0;
}

[tt48]

Попробовал как вы посоветовали, теперь в опере и фаерфоксе всё впорядке, в хроме же совсем бардак (при открытии-закрытии пункта меню подпункты каждый раз сдвигаются на заданный margin и появляется маркер), а в эксплорере игнорируется этот же margin.

CSS:

ul li.collapsed { 
  list-style-image: none;
  list-style-type: none;
  display: inline;
  background: url("../images/plus.png") no-repeat left center;
}
ul li.expanded {
  list-style-image: none;
  list-style-type: none;
  display: inline;
  background: url("../images/minus.png") no-repeat left center;
}
.content ul li ul {
  margin: 0 0 -20px 0;
}

list-style-type достаточно пробить один раз для ul, -image тоже лишний.

А почему display: inline? У Вас же вертикальный список..

Ослик пм-му(точно не скажу) игнорит как раз для inline

всякие отступы.. По-меньшей мере - такое случалось.

По теме выравнивания - попробуйте поиграться с параметром

line-height, vertical-align. И было бы проще, если был бы

минимизированный до темы обсуждения пример, где-нить на хосте.

[trololo]

list-style-type достаточно пробить один раз для ul, -image тоже лишний.

А почему display: inline? У Вас же вертикальный список..

Ослик пм-му(точно не скажу) игнорит как раз для inline

всякие отступы.. По-меньшей мере - такое случалось.

По теме выравнивания - попробуйте поиграться с параметром

line-height, vertical-align. И было бы проще, если был бы

минимизированный до темы обсуждения пример, где-нить на хосте.

inline потомучто с блочными элементами работает не корректно, это dhtml-меню. Я сохранил страницу, посмотрите.

Это вариант где вместо бекграунда я вернул list-style-image. Вот тут версия с бекграундом.

CSS код в файле style000.css, самые последние строки, начиная с 1659-й

Без бекграунда:

ul li.leaf, ul li.collapsed, ul li.expanded { 
  list-style: none;
}
ul li.collapsed { 
  list-style-image: url("../images/plus.png");
}
ul li.expanded {
  list-style-image: url("../images/minus.png");
}

С бекграундом:

ul li.leaf, ul li.collapsed, ul li.expanded { 
  list-style: none;
  padding-left: 15px;
}
ul li.collapsed { 
  background: url("../images/plus.png") no-repeat left center;
}
ul li.expanded {
  background: url("../images/minus.png") no-repeat left center;
}

Edited February 21, 2011 by trololo