There are three types of lists in HTML and XHTML:

1. Ordered lists.
2. Unordered lists.
3. Definition lists.

The list above is an ordered list (ol) using numbers. Other styles are letters, such as A, B and C or roman characters such as i, ii and iii. A standard ordered list uses numbers and start counting at 1. The HTML for such a list is as follows:

<ol>
  <li>Item one</li>
  <li>Item two</li>
</ol>

The second type is an unordered list (ul). Unordered lists use styles like bullets, squares, images or circles. The HTML for such a list is as follows:

<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>

The third type of list is a definition list (dl). This list is not very common and this list is not covered in this article.

One way to style a list is to use inline styling. This means that you define the list style directly in your topic and not in a style sheet. Inline styling let you define every list and list item as you see fit, but is much harder to maintain.

How to apply inline styling in RoboHelp

First, create a new list by clicking the ordered list button () or the unordered list button (). Then, right click on the list and select Bullets and Numbering. Select a style from the tab Bulleted or Numbered.

Why you shouldn't use inline styles for lists

When you apply inline styles to your lists, your lists will always appear as you have set them up. But when you have hundreds or thousands of topics, inline styled lists are simply unmaintainable. Say that you use a simple bullet for every unordered list. When you need to change that to a custom image, you will have to edit every single list by hand or with a macro. It's much easier and faster to use a list style, so you can change multiple lists at once by editing your style sheet.

In RoboHelp 7 it was possible to define the list style through the paragraph. This is no longer possible in RoboHelp 8 and after the conversion from RoboHelp 7 and RoboHelp 8 lists created in this way will no longer function.

In this paragraph, I describe how those lists worked in RoboHelp 7, why they stopped working, and how to fix them.

Why it stopped working

RoboHelp 8 now uses XHTML 1.0 Transitional for the topics. This version of HTML triggers a much stricter rendering mode in the browser than RoboHelp 7's HTML 4.01 Frameset . In this stricter rendering mode it is no longer possible to set the list style from the paragraph. This article shows you how to fix your lists after you upgrade from RoboHelp 7.

Note: Peter Grainge also provides a comprehensive manual for fixing your lists after upgrading. See http://www.grainge.org/pages/authoring/lists/lists.htm

If your lists are no longer correct, look at the HTML code of your list. Say you have a list with the paragraph Bullet. The HTML may look like this:

<ul type="disc">
  <li class="p-Bullet"><p class="Bullet">Item one</li>
  <li class="p-Bullet"><p class="Bullet"></li>
</ul>

The list item class (p-Bullet) is automatically generated by RoboHelp. To correct your list, simply cut the list styling from your paragraph and put it into the list item style. For the above example, the code might be:

P.Bullet {
  font-family: Verdana;
  font-size: 10pt;
}
LI.p-Bullet {
  list-style-image: ('mybullet.png');
  list-style-type: none;
}

If your HTML code looks like this:

<ul type="bullet">
  <li><p class="Bullet">Item one</li>
  <li><p class="Bullet"></li>
</ul>

You will have to apply a list item style to the list items. First, create a list item class in your style sheet, such as Bullet. Then, replace all instances of <li><p class=“Bullet”> with <li class=“Bullet”><p class=“Bullet”> using a find and replace tool. Repeat the same process for all lists that give you problems.

A global list style is a style that applies to every ordered or unordered list. This only works (of course) if the style is defined in the style sheet the topic is using. If you only have a single style sheet, adding a global style will then affect all your lists.

How to add a global list style

First decide whether you want to set the style for ordered lists or for unordered lists, or for both. To set global list styles in RoboHelp, go to the Project Manager > Style Sheets > your style sheet. In the Styles dialog, open Other and select Lists.

Setting a global list style that is not overwritten

To do this, you have to use the !important declaration. (You can only do this in an external editor.) This indicates that a style element is important and it will overwrite classes and inline styling. (As long those styles don't use !important too.)

To set the style, open your style sheet and find the style, then add !important before the semicolon.

OL,
UL {
  margin-bottom: 0px;
  margin-top: 12px;
  font-size: 12pt !important;
}

Will a global style affect the RoboHelp Multilevel lists?

Global list styles won't affect the RoboHelp Multilevel lists. The Multilevel list in RoboHelp is not a genuine list. RoboHelp uses paragraphs, font tags and indents to create a list. It is easy to work, but not a 'real' list.

With list item styles, you set certain aspects of the lists through the list item (li). Remember a simple unordered list:

<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>

The list style is defined by the type of list you use, in this case an unordered list for which the default is bullets. You can also set the list style through the list item (li tag). This allows you to set the entire list in the same style, or set every list item separately.

Creating a list item style

To create a list item style, open your style sheet with the RoboHelp Style editor. Go to list and create a new style, mine is called My_bullet.

Now simply style the item any way you like. Click Create a bulleted list () or Create a numbered list () to set the list type for your style. If you create a bulleted list, you can also use an image.

To apply a list style, first create a list. Then right click and choose Bullets and Numbering. Go to the tab Custom and select your list style. For an extensive introduction to create a list style with images, see the article Images in lists using RoboHelp 8 on Peter Grainge's site.

The best way to style a list (if you ask me) is using list classes. There are only two disadvantages: you cannot set list styling for list classes using the RoboHelp CSS editor and you can only apply list classes in HTML mode.

With a list class you style the list using the list itself. Take again the simple unordered list, but with an added class:

<ul class="flag">
  <li>Item one</li>
  <li>Item two</li>
</ul>

To style this list, create the class flag in your style sheet, using an external editor and style it, such as:

ul.flag {
  margin-top: 5px;
  margin-bottom: 5px;
  list-style-type: none;
  list-style-image: url("dutch.png");
}
ul.flag li {
  line-height: 16px;
}

To set the list class, go to HTML mode, find the correct list and replace type=“x” with class=“x”. You can only do this in HTML mode.

Why should I use list classes if I have to go to HTML mode?

You can use list item styles or RoboHelp Multilevel lists, but using a list class is simply the best practice, especially when you want to use multilevel lists. And yes, it is less intuitive than list style classes when you don't use HTML.

RoboHelp 8 introduced the RoboHelp Multilevel list. With these lists you easily create multilevel lists in a few clicks. Setting up a multilevel list may however cause some confusion.

Pros and cons of RoboHelp Multilevel lists

Before you start using RH Multilevel lists, you have to decide whether you rather want to use regular multilevel lists. The main downside of the RH Multilevel lists is that they are not lists at all, technically speaking. RoboHelp uses paragraphs and font tags to position text so that it looks like a list. You may not care at all about this though.

Setting up a RoboHelp Multilevel list

In the Styles dialog, go to Multilevel List and create a new list. With Apply formatting to you select the list level you are now formatting. Notice the difference between the Styles area and the Formatting area. The Formatting area is use to define the font and style of the list, but you can only use this when you don't apply a paragraph to the list level. I'd recommend that you only use the Styles area.

In the Styles area, there are only three fields. In the field Paragraph style, you select the paragraph you use for the list level. The easiest is to create a paragraph style solely for the list and apply it in the field Paragraph style. All the styling, such as font and colour, will be used by this list level.

In the field List style, you select the sequence for your multilevel list. Select one from the list or create your own. If you create your own sequence, remember that all the characters you add to the sequence will be your list style, exactly how you add them. Don't bother entering HTML code, for RoboHelp will interpret it as text, so you get a HTML code as your sequence. Try RoboHelp's help for instructions on how to create a sequence. Just remember that you have to enter multiple sequences if you want your list to have some order, if you only have one sequence, the list level will keep using that character, like an unordered list.

The last field is the field Edit style. Here you define what characters should follow your sequence. The characters (x) are the variable for the sequence and you can add characters before or after the sequence. Note: If you remove (x) from the field, your list will no longer have a sequence, since there's no position where the sequence has to be inserted. You list will then only use the characters in the field Edit style.

Using a RoboHelp Multilevel list

Using the list is very simple. Click the Create a Multilevel list button (). Then select a custom list or a list template, set the level you want to start the list and click OK. To make a your list multilevel, click the Create a Multilevel list button so the list is removed and then click the button again to start the Multilevel list and select the correct level in the field Start List at level.

Note: You can limit the maximum number of levels a user can use in a multilevel list. See the thread How do I limit levels in a multilevel list style? on the RoboHelp forum for more information.

Besides the RoboHelp Multilevel lists, there are two other ways of creating multilevel lists in RoboHelp, using list item styles, or using list classes.

An easy way to create multilevel lists is to define several list item styles using RoboHelp. You fake the multilevel list by creating list classes with different indents. If level one starts at 10 pixels from the border, level two may start at 25 pixels from the border. By setting the indents of the list item style in the Styles dialog, you can create the illusion of a multilevel list.

If you use this method for ordered lists, you will have to manually reset the sequence of the list for each level of the list. Since you are using a single list, the sequence will not be interrupted, unless you set the sequence!

Multilevel list using nested lists

Creating actual multilevel lists in RoboHelp will always require you to edit in HTML mode if your topics need to be valid HTML. A list has one level on which it uses a sequence. Each new list within the list will use a different sequence. You can use this method if you use only global styles, list classes or list item styles. If you use list item styles, you cannot change the style of a nested list through the WYSIWYG editor.

Another great advantage of real multilevel lists is that you can easily combine ordered lists and unordered lists.

Remember the HTML syntax for a single unordered list:

<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>

If we want to nest a list behind item one, we add a new list like this:

<ul>
  <li>Item one
    <ul>
      <li>Item one.one</li>
      <li>Item one.two</li>
    </ul>
  </li>
  <li>Item two</li>
</ul>

• Item one
  
  • Item one.one
  • Item one.two
• Item two

Note the correct syntax: The new list (ul) is added before the list item that contains the list is closed!

You can easily create a multilevel list by selecting the list by clicking the Increase indent ()  and Decrease indent () buttons. Select the item you want to add to a different level and click the appropriate button. Please note that the list will display correct, but that the HTML of the list is invalid. (See above remark and syntax example.)

One last remark: The standard margins of nested lists vary per browser. To avoid different rendering in different browsers, set a global style for nested lists in your style sheet, such as: UL UL, UL OL, OL OL and OL UL.