• Техногрет
  • Текстовые маркеры в списках

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

    25 января 2007


    Задача.

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

    При изменении межстрочного интервала (CSS-свойство line-height) потребуется исправить строки 24 и 36.

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

    • — Обычное тире для сравнения.
    • Параграф. И он не переносится на другую строчку, как в предыдущем варианте.

      Еще один параграф с отступами.

    • Вложенный нумерованный список:
      1. Ну и ненумерованный:
        • А вот и знак — ® в теге <sup>. Он увеличивает высоту строки, и из-за этого наше тире сбивается в некоторых браузерах.
        • Но исправить это — довольно просто®.
    01 
    02 
    03 
    04 
    05 
    06 
    07 
    08 
    09 
    10 
    11 
    12 
    13 
    14 
    15 
    16 
    17 
    18 
    19 
    20 
    21 
    22 
    23 
    24 
    25 
    26 
    27 
    28 
    29 
    30 
    31 
    32 
    33 
    34 
    35 
    36 
    37 
    38 
    39 
    40 
    41 
    42 
    43 
    44 
    45 
    46 
    47 
    48 
    49 
    50 
    51 
    52 
    53 
    54 
    55 
    56 
    57 
    58 
    59 
    60 
    61 
    62 
    63 
    64 
    65 
    66 
    67 
    68 
    69 
    70 
    71 
    72 
    73 
    74 
    75 
    76 
    77 
    78 
    79 
    80 
    81 
    82 
    83 
    <style type="text/css">
        .example p
        , .example ul
        , .example ol
        {
            padding: 0;
            margin: 1em 0;
        }
        .example li
        {
            margin: 0.5em 0 0.5em 1.3em;
        }
        .example ul
        {
            list-style-type: none;
            //list-style-image: url('li.gif');
        }
        .example ul li
        {
            padding: 0;
            behavior: expression(
                ( !this.before && parentNode && parentNode.tagName == 'UL' )
                ?
                    ( this.before = true )
                    & ( parentNode.style.listStyleImage = 'none' )
                    & (
                        ( this.firstChild && this.firstChild.firstChild )
                        ?
                            ( this.firstChild.style.marginTop = '-1.2em' )
                            & ( this.firstChild.style.position = 'relative' )
                        : ''
                    )
                    & ( eNOBR = document.createElement( '<nobr style="position: relative; display: block; width: 1.25em; left: -1.25em; margin: 0 -1.25em -1.2em 0;" />' ) )
                    & ( eNOBR.innerHTML = '&mdash;&nbsp;' )
                    & ( this.insertBefore( eNOBR, this.firstChild ) )
                : ''
            );
        }
        .example ul>li:before
        {
            content: '\2014\a0';
            float: left;
            margin-left: -1.25em;
        }
        .example ul>li>*:first-child:-moz-first-node
        {
            margin-top: -1.2em;
        }
        .example ul>li>*
        {
            text-indent: 0;
        }
        .example .sup
        {
            position: relative;
            top: -0.5em;
            font-size: 0.75em; //font-size: 0.89em;
            line-height: 0;
            vertical-align: baseline;
        }
    </style>
    <div class="example">
        <ul>
            <li>&mdash; Обычное тире для сравнения.</li>
            <li>
                <p>Параграф. И&nbsp;он не&nbsp;переносится на&nbsp;другую строчку,
                    как в&nbsp;<a href="../css_content_in_ie/">предыдущем варианте</a>.</p>
                <p>Еще один параграф с&nbsp;отступами.</p>
            </li>
            <li>Вложенный нумерованный список:
                <ol>
                    <li>Ну и&nbsp;ненумерованный:
                        <ul>
                            <li>А&nbsp;вот и&nbsp;знак&nbsp;&#151; <sup>&reg;</sup> в&nbsp;теге <code>&lt;sup&gt;</code>.
                                Он&nbsp;увеличивает высоту строки, <nobr>и из-за</nobr> этого наше тире сбивается в&nbsp;некоторых браузерах.</li>
                            <li>Но&nbsp;исправить это&nbsp;&#151; довольно
                                просто<sup class="sup">&reg;</sup>.</li>
                        </ul>
                    </li>
                </ol>
            </li>
        </ul>
    </div>