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

Новости

Инвентарь

HTML и CSS XSLT JavaScript Изображения Софт Etc

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

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

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

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

Еще один параграф с отступами.
Вложенный нумерованный список:
1. Ну и ненумерованный:
  - А вот и знак — ^® в теге <sup>. Он увеличивает высоту строки, и из-за этого наше тире сбивается в некоторых браузерах.
  - Но исправить это — довольно просто^®.

<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>

Электропочта:
Телефон: (+7 495) 926-18-00

Текстовые маркеры в списках 25 января 2007

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