Proper markers

HTML and CSS XSLT JavaScript Images Soft Etc

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

Use background image. CSS property list-style-image could be used, but image-to-text position would vary in different browsers.

How it looks in the browser

item with a proper marker
a technique^® that allows to ensure correct behavior of sup

<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>item with&nbsp;a&nbsp;proper marker</li>
    <li>../css_content_in_ie/">a&nbsp;technique</a><sup>&reg;</sup>
        that allows to&nbsp;ensure correct behavior of&nbsp;<code>sup</code></li>
</ul>

Order a design...

Proper markers 7 February 2004

How it looks in the browser