Правильные маркеры

HTML и CSSXSLTJavaScriptИзображенияСофтEtc
Владимир Токмаков

7 февраля 2004


Задача.

Заменить стандартные маркеры в списках на длинные тире.

Кладем картинку в качестве фона. Можно, конечно, использовать CSS-свойство list-style-image, но в этом случае картинка по-разному позиционируется относительно текста в разных браузерах.

Как это выглядит в браузере

  • пункт с правильным маркером
  • способ®, в котором не будет проблемы с sup
01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 
18 
<style type="text/css">
    ul.example
    {
        margin: 0.5em 0;
        padding: 0 0 0 2em;
    }
    ul.example li
    {
        margin: 0.5em 0; padding: 0 0 0 20px;
        list-style-type: none;
        background: url('li.gif') no-repeat 0 0.6em;
    }
</style>
<ul class="example">
    <li>пункт с&nbsp;правильным маркером</li>
    <li><a href="../css_content_in_ie/">способ</a><sup>&reg;</sup>,
        в&nbsp;котором не&nbsp;будет проблемы с&nbsp;<code>sup</code></li>
</ul>