2 Replies Latest reply on Nov 3, 2010 11:01 AM by dh2help

    Multi-level indent CSS for bullet

    dh2help

      Does someone know the css to stop the level 2 of  a multi-level list from indenting so far? Example:

       

      1. 12345Level One

    •           > Level Two
    • I want the bullet to be under 1 but it kicks it out further. I realise that this is a personal choice but I can't believe that I can't get it to work by editing the css code.

       

      I have experimented with the css for a multi-level list using Notepad for a while now and I have found that what I see in RH is not what I get in the compiled help.  I found this to be true in all versions of RH.  I do not want to create a custom RH list style. I would think that I should be able to do it with standard css.

       

      My code is clean and currently I don't have any CSS defined for LI, OL, or UL.

      <ol>
      <li>Level 1</li>
      <ul>
        <li>Level 2</li>
      </ul>
      </ol>

       

      Changing the left margin for LI moves the whole list left, but it doesn't fix the level 2 indent.

        • 1. Re: Multi-level indent CSS for bullet
          Willam van Weelden Adobe Community Professional & MVP

          Hi,

           

          What version of RH are you using? If you use RH8, you can define list styles in the style editor. Make one for level 1, one for level 2, etc. (You have to apply the styles manually).

           

          To target nested lists, use li li {} in your style sheet.  This targets all list items nested inside list-items. To decrease the indent, simply apply a margin-left.

           

          BTW: you html code is not correct (RH does this when you use the indent buttons for lists), it should be:

          <ol>
          <li>Level 1

            <ul>
               <li>Level 2</li>
             </ul>

          </li>

          </ol>

           

          Greet,

           

          Willam

          • 2. Re: Multi-level indent CSS for bullet
            dh2help Level 1

            This is what finally worked, not saying it will work for you, but... (Note: I removed all kadov-p an <p> refences in my code)

             

            LI {
            margin-top: 0pt;
            margin-bottom: 6pt;
            font-size: 10pt;
            margin-left: -10px;
            }
            LI LI {
            margin-top: 0pt;
            margin-bottom: 6pt;
            font-size: 10pt;
            margin-left: -20px;
            }
            ul {
            margin-top: 0pt;
            margin-bottom: 6pt;
            font-size: 10pt;
            }
            ol {
            margin-top: 0pt;
            margin-bottom: 6pt;
            }
            ol ol {
            list-style-type: lower-roman;
            margin-top: 0pt;
            margin-bottom: 6pt;
            }
            ol ul {
            margin-top: 6pt;
            margin-bottom: 6pt;
            list-style-type: disc;
            }
            ul {
            list-style-type: circle;
            margin-top: 0pt;
            margin-bottom: 6pt;
            }
            ul ul {
            list-style-type: circle;
            margin-top: 0pt;
            margin-bottom: 6pt;
            }