Text list-item markers

HTML and CSS XSLT JavaScript Images Soft Etc

	Task:	Replace regular list-item markers with em dashes.

If CSS property line-heights changes, lines 24 and 36 need corrections.

How it looks in the browser

—A dash to compare.
Paragraph. And it isn’t carried over to the next line like it was last time.

Another indented paragraph.
Embedded ordered list:
1. And an unordered one:
  - And here is the sign —^® using <sup> tag. It increases line height and makes the dash shift in some browsers.
  - But it’s easy to fix—here we go ^®.

<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;A dash to compare.</li>
        <li>
            <p>Paragraph. And it isn&#146;t carried over to the next line 
                like it was ../css_content_in_ie/">last time</a>.</p>
            <p>Another indented paragraph.</p>
        </li>
        <li>Embedded ordered list:
            <ol>
                <li>And an unordered one:
                    <ul>
                        <li>And here is the sign &#151;<sup>&reg;</sup> using <code>&lt;sup&gt;</code> tag.
                            It increases line height and makes the dash shift in some browsers.</li>
                        <li>But it&#146;s easy to fix&#151;here we go 
                            <sup class="sup">&reg;</sup>.</li>
                    </ul>
                </li>
            </ol>
        </li>
    </ul>
</div>

Order a design...

Text list-item markers 25 January 2007

How it looks in the browser