SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    list number outside of div

    numbers for lists appear outside of content div. What do I need to do to make them appear properly within the content div?

    Thank you for your help.

    sample list:
    <ol start="1" type="1">
    <li>The regulation of behavior will be based more on the consciousness of soul rather than the morality of the mind.
    <li>Soul will replace the mind as the central reality.
    <li>The principle of karma will replace the concept of sin.
    <li>The principle of reincarnation will replace the concept of one life to live.
    <li>The dependence on a Living Saint will replace the false dependence
    on a departed Master.
    <li>The principle of the Sound Current will replace the ever-vacillating current of the light. The soul lives in Sound and truth, while the mind is sustained by light or knowledge.
    <li>It will be understood that the ideal of liberation is to be attained while living, not after death.
    <li>The inner sanctuary located in the third eye will be the place of worship and study, not the church or ashram.
    <li>The emphasis will be on the resurrection of the spirit, rather than the resurrection of the body.
    </ol>

    css code:

    #content {
    width: 600px;
    color: #333;
    background: #fff;
    border: 1px solid #ccc;
    margin: 0px 0px 0px 0px;
    padding: 10px;
    }
    #content ol {
    list-style-type: digital;
    }

    #content li
    {
    color: #000;
    font-family: "Times New Roman", Times, serif;
    font-size: 1em;
    font-style: normal;
    font-weight: normal;
    line-height: 125%;
    text-align: justify;
    padding: 0 0 8px 0;
    }

  2. #2
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have to close the listitems with </li>.
    Like so:
    Code HTML4Strict:
    <div id="content">
    <ol start="1" type="1">
    <li>The regulation of behavior will be based more on the consciousness of soul rather than the morality of the mind.</li>
    <li>Soul will replace the mind as the central reality.</li>
    <li>The principle of karma will replace the concept of sin.</li>
    <li>The principle of reincarnation will replace the concept of one life to live.</li>
    <li>The dependence on a Living Saint will replace the false dependence
    on a departed Master.</li>
    <li>The principle of the Sound Current will replace the ever-vacillating current of the light. The soul lives in Sound and truth, while the mind is sustained by light or knowledge.</li>
    <li>It will be understood that the ideal of liberation is to be attained while living, not after death.</li>
    <li>The inner sanctuary located in the third eye will be the place of worship and study, not the church or ashram.</li>
    <li>The emphasis will be on the resurrection of the spirit, rather than the resurrection of the body.</li>
    </ol>
    </div>
    In your style under #content ol you can put margin-left: 25px (or something) to move the list further to the right.

    - Frederik

  3. #3
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    adding margin-left: 25px; to #content ol seems to have done it. Thank you fredda.

    Also, thanks for the reminder to close my list items with </li>

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by spcalia View Post
    adding margin-left: 25px; to #content ol seems to have done it
    That will only work in IE if the <ol> does not have a specified width. Better off using padding-left on the <ol> instead.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •