• Техногрет
  • Правильные маркеры

    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>