0

I've read 6 or 7 different threads on Stackoverflow dealing specifically with substituting a Unicode symbol for standard list bullets. Everything does what it's supposed to but I can't get it aligned. Help appreciated.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
    <meta content="text/html; charset=us-ascii"
          http-equiv="Content-Type">

    <title>Stylin&rsquo; Lists</title>
    <style type="text/css">

    ul {
    list-style: none;
    margin-left: 0px;
    padding-left: 20px;
    text-indent: -20px;}

    li {padding-left: 20px;}

    li:before {
    content: "\25AC";
    padding-right: 10px;
    color: DODGERBLUE;}

    </style>
</head>

<body>
    <h2>Stylin&rsquo; Lists</h2>

    <div style=
    "font-family: Helvetica, Sans-Serif; font-size: 16px; line-height: 18px; font-weight: Bold;">
    <ul>
            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing
            elit. Quisque sed felis.</li>

            <li>Etiam augue pede, molestie eget, rhoncus at,
            convallis ut, eros. Aliquam pharetra. Nulla in tellus
            eget odio sagittis blandit. Aliquam sit amet felis.
            Mauris semper, velit semper laoreet dictum, quam diam
            dictum urna, nec placerat elit nisl in quam. Etiam
            augue pede, molestie eget, rhoncus at, convallis ut,
            eros. Aliquam pharetra. Nulla in tellus eget odio
            sagittis blandit. Maecenas at nisl. Nullam lorem mi,
            eleifend a, fringilla vel, semper at, ligula.</li>

            <li>Molestie eget, rhoncus at, convallis ut, eros.
            Semper laoreet dictum, quam diam dictum urna, nec
            placerat elit nisl in quam. Aliquam pharetra. Nulla in
            tellus eget odio sagittis blandit. Maecenas at nisl.
            Nullam lorem mi, eleifend a, fringilla vel, semper at,
            ligula. Consectetuer adipiscing elit. Quisque sed
            felis.</li>

            <li>Placerat elit nisl in quam. Nullam lorem mi,
            eleifend a, fringilla vel, semper at, ligula. Etiam
            augue pede, molestie eget, rhoncus at, convallis ut,
            eros. Aliquam pharetra. Nulla in tellus eget odio
            sagittis blandit. Maecenas at nisl.</li>
        </ul>
    </div>
</body>
</html>
semicodin
  • 19
  • 8
  • I'm not a css/html expert but this issue would bear on an indent character width; the page renders plausibly using `content: "\25AC"; padding-right: 4px;` or e.g. `content: "="; padding-right: 10px;` in MSIE, Mozilla Firefox and Google Chrome with all zoom levels. – JosefZ Apr 18 '17 at 11:46
  • I was taking my instruction from this post on Stackoverflow http://stackoverflow.com/questions/3203252/unicode-character-as-bullet-for-list-item-in-css but I'm unclear as to how the margins and indents are interacting with everything. – semicodin Apr 19 '17 at 21:59

0 Answers0