List Styles changes - is this a RoboHelp 8 bug?

Report · Sep 24, 2010

Our corporation has a specific list style. I created the list style which is list style based on a paragraph style (required by the Styles, Paragraph Styles drop-down). All has been well for a week or more. I have about 50 topics. Today, the styles show an indented space such as:

1. The quick brown fox

jumped over the lazy dog.

2. The quick brown fox hid

from the very lazy dog who slept.

The List Preview in the dialog box shows this misalignment. I do not see where I can control the list indentations.

The lists are misaligned in the preview (glasses) view and in the compiled WebHelp.

There are no indentations or tabs in the paragraph style (0s).

Please advise.

Report · Sep 24, 2010

/*Created with Adobe RoboHelp 8.*/
BODY {
 font-family: Arial;
 background-color: #ffffff;
}
H1 {
 font-family: "Times New Roman";
 font-size: 18pt;
 color: #007fbf;
 x-next-class: ;
 x-next-type: P;
 border-top-style: none;
 border-bottom-style: none;
}
H2 {
 font-weight: bold;
 font-size: 16pt;
 font-family: "Times New Roman", serif;
 color: #007fbf;
}
H3 {
 font-weight: bold;
 font-size: 14.0pt;
 font-family: "Times New Roman";
 color: #007fbf;
 x-next-class: ;
 x-next-type: P;
}
H4 {
 font-family: "Times New Roman";
 font-size: 14pt;
 font-weight: bold;
 color: #007fbf;
 x-next-class: ;
 x-next-type: P;
}
H5 {
 font-weight: bold;
 font-family: "Times New Roman";
 x-next-class: ;
 x-next-type: P;
 font-size: 14pt;
 color: #007fbf;
}
H6 {
 font-family: "Times New Roman";
 font-size: 14pt;
 x-next-class: ;
 x-next-type: P;
 color: #007fbf;
}
P {
 font-size: 12.0pt;
 margin-bottom: 0pt;
 font-family: "Times New Roman";
 margin-top: 14pt;
}
A.expandspot {
 color: #008000;
 cursor: hand;
 text-decoration: none;
}
SPAN.expandtext {
 font-style: italic;
 font-weight: normal;
 color: #ff0000;
 font-family: "Times New Roman";
}
A.dropspot {
 cursor: hand;
 color: #008000;
 font-style: italic;
 text-decoration: none;
}
A.glossterm {
 cursor: hand;
 font-family: "Times New Roman";
 color: #0000ff;
 text-decoration: none;
}
SPAN.glosstext {
 font-weight: normal;
 font-family: "Times New Roman";
 color: #ff0000;
}
OL,
UL {
 margin-top: 0px;
 margin-bottom: 0px;
}
rh-list.List_numbered {
 x-lvl-6-type: lower-roman;
 x-lvl-6-format: "&o<x>&c";
 x-lvl-8-type: lower-alpha;
 x-lvl-7-format: "<x>.";
 x-lvl-9-type: lower-roman;
 x-lvl-1-pfx-class: rls-1-List_numbered;
 x-lvl-2-format: "<x>.";
 x-lvl-3-format: "<x>.";
 x-lvl-1-format: "<x>.";
 x-lvl-4-format: "<x>.";
 x-lvl-5-format: "<x>.";
 x-lvl-5-pfx-class: rls-5-List_numbered;
 x-lvl-4-pfx-class: rls-4-List_numbered;
 x-lvl-7-margin: 140px;
 x-lvl-7-text-indent: -20px;
 x-lvl-8-margin: 160px;
 x-lvl-8-text-indent: -20px;
 x-lvl-9-margin: 180px;
 x-lvl-9-text-indent: -20px;
 x-lvl-6-margin: 140px;
 x-lvl-6-text-indent: -40px;
 x-lvl-1-margin: 30px;
 x-lvl-1-text-indent: -30px;
 x-lvl-1-p-tag: P;
 x-lvl-2-type: lower-alpha;
 x-lvl-2-margin: 60px;
 x-lvl-2-text-indent: -30px;
 x-lvl-3-type: lower-roman;
 x-lvl-3-margin: 90px;
 x-lvl-3-text-indent: -30px;
 x-lvl-3-p-tag: P;
 x-lvl-4-type: decimal;
 x-lvl-4-margin: 120px;
 x-lvl-4-text-indent: -30px;
 x-lvl-4-p-tag: P;
 x-level-count: 9;
 x-lvl-5-type: lower-alpha;
 x-lvl-5-margin: 150px;
 x-lvl-5-text-indent: -30px;
 x-lvl-5-p-tag: P;
}
span.rls-1-List_numbered {
 font-family: "Times New Roman";
 font-size: 12pt;
}
span.rls-5-List_numbered {
 font-family: "Times New Roman";
}
span.rls-4-List_numbered {
 font-family: "Times New Roman";
 font-size: 12pt;
}
rh-list.List_bullet {
 x-lvl-5-format: "&o<x>&c";
 x-lvl-5-margin: 80px;
 x-lvl-6-type: lower-roman;
 x-lvl-6-format: "&o<x>&c";
 x-lvl-6-margin: 100px;
 x-lvl-8-type: lower-alpha;
 x-lvl-8-margin: 140px;
 x-lvl-7-format: "<x>.";
 x-lvl-7-margin: 120px;
 x-lvl-9-type: lower-roman;
 x-lvl-9-margin: 160px;
 x-lvl-1-format: "<x>";
 x-lvl-2-type: circle;
 x-lvl-2-format: "<x>";
 x-lvl-3-format: "<x>";
 x-lvl-4-format: "<x>";
 x-lvl-3-type: square;
 x-lvl-4-type: small-square;
 x-lvl-3-margin: 90px;
 x-lvl-3-text-indent: -30px;
 x-lvl-3-p-class: Normal_no_space_after;
 x-lvl-3-p-tag: p;
 x-lvl-1-type: disc;
 x-lvl-1-margin: 30px;
 x-lvl-1-text-indent: -30px;
 x-lvl-1-p-class: Normal_no_space_after;
 x-lvl-1-p-tag: p;
 x-lvl-2-margin: 60px;
 x-lvl-2-text-indent: -30px;
 x-lvl-2-p-class: Normal_no_space_after;
 x-lvl-2-p-tag: p;
 x-level-count: 9;
 x-lvl-4-margin: 120px;
 x-lvl-4-text-indent: -30px;
 x-lvl-4-p-class: Normal_no_space_after;
 x-lvl-4-p-tag: p;
}
p.Normal_no_space_after {
 margin-top: 0;
 text-indent: 0px;
 margin-left: 0px;
}
table.TopRow {
 x-1st-row: 1;
 x-1st-row-name: t1st;
 border-left-style: Solid;
 border-left-width: 1px;
 border-left-color: #000000;
 border-right-style: Solid;
 border-right-width: 1px;
 border-right-color: #000000;
 border-top-style: Solid;
 border-top-width: 1px;
 border-top-color: #000000;
 border-bottom-style: Solid;
 border-bottom-width: 1px;
 border-bottom-color: #000000;
 x-row-pat-1: 1;
 x-row-pat-1-name: t1Row;
 x-row-pat-count: 2;
 x-row-pat-2: 1;
 x-row-pat-2-name: t2Row;
 x-border-spacing: 0px;
}
table.TopRow tr.t1st td {
 border-left-style: Solid;
 border-left-width: 1px;
 border-left-color: #000000;
 border-right-style: Solid;
 border-right-width: 1px;
 border-right-color: #000000;
 border-top-style: Solid;
 border-top-width: 1px;
 border-top-color: #000000;
 border-bottom-style: Solid;
 border-bottom-width: 1px;
 border-bottom-color: #000000;
 font-family: Arial;
 font-size: 10pt;
 background-color: #c0c0c0;
 font-weight: bold;
 text-align: Center;
}
table.TopRow tr.t1Row td {
 font-family: Arial;
 font-size: 10pt;
 border-left-style: Solid;
 border-left-width: 1px;
 border-left-color: #000000;
 border-right-style: Solid;
 border-right-width: 1px;
 border-right-color: #000000;
 border-top-style: Solid;
 border-top-width: 1px;
 border-top-color: #000000;
 border-bottom-style: Solid;
 border-bottom-width: 1px;
 border-bottom-color: #000000;
}
table.TopRow tr.t2Row td {
 font-family: Arial;
 font-size: 10pt;
 border-left-style: Solid;
 border-left-width: 1px;
 border-left-color: #000000;
 border-right-style: Solid;
 border-right-width: 1px;
 border-right-color: #000000;
 border-top-style: Solid;
 border-top-width: 1px;
 border-top-color: #000000;
 border-bottom-style: Solid;
 border-bottom-width: 1px;
 border-bottom-color: #000000;
}
span.Comment_email_message {
 font-family: "Courier New", monospace;
 font-size: 10pt;
}
rh-list.rl-p-List_bullet_table {
 x-level-count: 1;
 x-lvl-1-format: "<x>.";
 x-lvl-1-type: bullet;
}
rh-list.rl-p-List_bullet_table {
 x-level-count: 1;
 x-lvl-1-format: "<x>";
 x-lvl-1-type: bullet;
}
rh-list.List_bullet_table {
 x-lvl-5-format: "&o<x>&c";
 x-lvl-5-margin: 80px;
 x-lvl-6-type: lower-roman;
 x-lvl-6-format: "&o<x>&c";
 x-lvl-6-margin: 100px;
 x-lvl-8-type: lower-alpha;
 x-lvl-8-margin: 140px;
 x-lvl-7-format: "<x>.";
 x-lvl-7-margin: 120px;
 x-lvl-9-type: lower-roman;
 x-lvl-9-margin: 160px;
 x-lvl-1-format: "<x>";
 x-lvl-2-type: circle;
 x-lvl-2-format: "<x>";
 x-lvl-3-format: "<x>";
 x-lvl-4-format: "<x>";
 x-lvl-3-type: square;
 x-lvl-4-type: small-square;
 x-lvl-3-margin: 90px;
 x-lvl-3-text-indent: -30px;
 x-lvl-3-p-class: Normal_no_space_after;
 x-lvl-3-p-tag: p;
 x-lvl-2-margin: 70px;
 x-lvl-2-text-indent: -30px;
 x-lvl-2-p-class: Normal_no_space_after;
 x-lvl-2-p-tag: p;
 x-lvl-4-margin: 110px;
 x-lvl-4-text-indent: -30px;
 x-lvl-4-p-class: Normal_no_space_after;
 x-lvl-4-p-tag: p;
 x-lvl-1-type: bullet;
 x-level-count: 9;
 x-lvl-1-margin: 20px;
 x-lvl-1-text-indent: -20px;
 x-lvl-1-p-class: Normal_no_space_after;
 x-lvl-1-p-tag: p;
}
rh-list.List_numbered_table {
 x-lvl-6-type: lower-roman;
 x-lvl-6-format: "&o<x>&c";
 x-lvl-8-type: lower-alpha;
 x-lvl-7-format: "<x>.";
 x-lvl-9-type: lower-roman;
 x-lvl-1-pfx-class: rls-1-List_numbered;
 x-lvl-2-format: "<x>.";
 x-lvl-3-format: "<x>.";
 x-lvl-1-format: "<x>.";
 x-lvl-2-type: upper-alpha;
 x-lvl-3-type: lower-alpha;
 x-lvl-4-format: "<x>.";
 x-lvl-4-type: upper-roman;
 x-lvl-5-format: "<x>.";
 x-lvl-5-pfx-class: rls-5-List_numbered;
 x-lvl-4-pfx-class: rls-4-List_numbered;
 x-lvl-3-margin: 60px;
 x-lvl-3-text-indent: -20px;
 x-lvl-3-p-tag: P;
 x-lvl-4-margin: 80px;
 x-lvl-4-text-indent: -20px;
 x-lvl-4-p-tag: P;
 x-lvl-5-margin: 100px;
 x-lvl-5-text-indent: -20px;
 x-lvl-5-p-tag: P;
 x-lvl-6-margin: 130px;
 x-lvl-6-text-indent: -30px;
 x-lvl-2-margin: 40px;
 x-lvl-2-text-indent: -20px;
 x-lvl-7-margin: 140px;
 x-lvl-7-text-indent: -20px;
 x-lvl-8-margin: 160px;
 x-lvl-8-text-indent: -20px;
 x-lvl-9-margin: 180px;
 x-lvl-9-text-indent: -20px;
 x-level-count: 9;
 x-lvl-1-margin: 20px;
 x-lvl-1-text-indent: -20px;
 x-lvl-1-p-class: Normal_no_space_after;
 x-lvl-1-p-tag: p;
}
rh-list.List_bullet_indent {
 x-lvl-5-format: "&o<x>&c";
 x-lvl-5-margin: 80px;
 x-lvl-6-type: lower-roman;
 x-lvl-6-format: "&o<x>&c";
 x-lvl-6-margin: 100px;
 x-lvl-8-type: lower-alpha;
 x-lvl-8-margin: 140px;
 x-lvl-7-format: "<x>.";
 x-lvl-7-margin: 120px;
 x-lvl-9-type: lower-roman;
 x-lvl-9-margin: 160px;
 x-lvl-1-format: "<x>";
 x-lvl-2-type: circle;
 x-lvl-2-format: "<x>";
 x-lvl-3-format: "<x>";
 x-lvl-4-format: "<x>";
 x-lvl-3-type: square;
 x-lvl-4-type: small-square;
 x-lvl-1-type: disc;
 x-lvl-1-margin: 60px;
 x-lvl-1-text-indent: -30px;
 x-lvl-1-p-class: Normal_no_space_after;
 x-lvl-1-p-tag: p;
 x-lvl-2-margin: 70px;
 x-lvl-2-text-indent: -30px;
 x-lvl-2-p-class: Normal_no_space_after;
 x-lvl-2-p-tag: p;
 x-lvl-3-margin: 100px;
 x-lvl-3-text-indent: -30px;
 x-lvl-3-p-class: Normal_no_space_after;
 x-lvl-3-p-tag: p;
 x-level-count: 9;
 x-lvl-4-margin: 130px;
 x-lvl-4-text-indent: -30px;
 x-lvl-4-p-class: Normal_no_space_after;
 x-lvl-4-p-tag: p;
}
rh-list.List_numbered_no_space_after {
 margin-top: 0;
 text-indent: 0px;
 margin-left: 0px;
 x-lvl-6-type: lower-roman;
 x-lvl-6-format: "&o<x>&c";
 x-lvl-8-type: lower-alpha;
 x-lvl-7-format: "<x>.";
 x-lvl-9-type: lower-roman;
 x-lvl-1-pfx-class: rls-1-List_numbered;
 x-lvl-2-format: "<x>.";
 x-lvl-3-format: "<x>.";
 x-lvl-1-format: "<x>.";
 x-lvl-4-format: "<x>.";
 x-lvl-5-format: "<x>.";
 x-lvl-5-pfx-class: rls-5-List_numbered;
 x-lvl-4-pfx-class: rls-4-List_numbered;
 x-lvl-7-margin: 140px;
 x-lvl-7-text-indent: -20px;
 x-lvl-8-margin: 160px;
 x-lvl-8-text-indent: -20px;
 x-lvl-9-margin: 180px;
 x-lvl-9-text-indent: -20px;
 x-lvl-6-margin: 140px;
 x-lvl-6-text-indent: -40px;
 x-lvl-2-type: lower-alpha;
 x-lvl-3-type: lower-roman;
 x-lvl-4-type: decimal;
 x-lvl-5-type: lower-alpha;
 x-lvl-1-margin: 30px;
 x-lvl-1-text-indent: -30px;
 x-lvl-1-p-class: Normal_no_space_after;
 x-lvl-1-p-tag: p;
 x-lvl-2-margin: 60px;
 x-lvl-2-text-indent: -30px;
 x-lvl-2-p-class: Normal_no_space_after;
 x-lvl-2-p-tag: p;
 x-lvl-3-margin: 90px;
 x-lvl-3-text-indent: -30px;
 x-lvl-3-p-class: Normal_no_space_after;
 x-lvl-3-p-tag: p;
 x-lvl-4-margin: 120px;
 x-lvl-4-text-indent: -30px;
 x-lvl-4-p-class: Normal_no_space_after;
 x-lvl-4-p-tag: p;
 x-level-count: 9;
 x-lvl-5-margin: 150px;
 x-lvl-5-text-indent: -30px;
 x-lvl-5-p-class: Normal_no_space_after;
 x-lvl-5-p-tag: p;
}
P.Normal_Bold_16 {
 margin-bottom: 0pt;
 font-family: "Times New Roman";
 margin-top: 14pt;
 font-size: 16pt;
 font-weight: bold;
}
p.Normal_no_space_after_bold_10pt {
 margin-top: 0;
 text-indent: 0px;
 margin-left: 0px;
 font-size: 10pt;
 font-weight: bold;
}

I inserted my css but I don't know if it will show. I have a paragraph "normal_no_space_after" and "normal". The list style is "list_numbered_no_space_after". It uses the paragraph style "normal_no_space_after". I am on XP SP3, Intel Duo 2, and 2.5 GB RAM. The randomness of the alignment is puzzling. What in the style or css controls the alignment of the text after the list level indicator (1, a., etc.). Thanks!

Report · Sep 24, 2010

Report · Sep 24, 2010

I removed the negative indents, for example "text-indent: -30pt" and things appear to be better. I have no idea how the negative text indents got there.

Report · Sep 24, 2010

No, removing the negatives made it worse. Any ideas? Does anyone have a css that shows what a multi-level list should look like?

Report · Sep 25, 2010

Hi,

Multilevel lists are a pain to maintain in your style sheet. You're better of sticking with the style editor of RH.

The text-indent controls how much the first line of text should be indented, in this case -30px. If you enlarge it, your first line will indent more. Can you share your css and an example topic so we can have a look?

Greet,

Willam

Report · Sep 25, 2010

I attached the two CSS files. The one dated 092310 was auto generated/changed by RoboHelp somehow. It created odd indentation of my lists.

I edited both the list styles:

rh-list.List_numbered

rh-list.List_numbered_no_space_after

I simply reorganized the list styles so I could better read the information. I only use level 1 through 5. When I compiled the project with default.css, the lists look fine again. All I did is reorganize the css in a logical order.

My indented bullet lists have become unaligned also. I will work on those later today.

I was brought into a large corporation to organize their policy and procedure in one source (previously, they used Word). They exclusively use indented lists and bullets. This feature being bullet proof is very important to the success of this project.

Thanks!

Kate

Report · Sep 25, 2010

What do you mean "sticking with the style editor"? I started with the style editor. How do you get multi-level lists with the style editor? Are you suggesting I have a separate style for each level of indent?

In a separate email, I attached the two CSS files. The one dated 092310 was auto generated/changed by RoboHelp somehow. It created odd indentation of my lists after working ok for a few weeks.

I edited both the list styles:

rh-list.List_numbered
rh-list.List_numbered_no_space_after

I simply reorganized the list styles so I could better read the information. I only use level 1 through 5. When I compiled the project with default.css, the lists look fine again. All I did is reorganize the css in a logical order.

My indented bullet lists have become unaligned also. I will work on those later today.

I was brought into a large corporation to organize their policy and procedure in one source (previously, they used Word). They exclusively use indented lists and bullets. This feature being bullet proof is very important to the success of this project.

Adobe sells RH as a solution for policy and procedures which usually have deeply indented lists, so this needs to work.

Thanks for your suggestions/help. I think if there were an example of a css that works, it would go a long way to help the RoboHelp community use this feature.

Thanks!

Report · Sep 25, 2010

I compiled using the default.css I thought was working. I see the periods after each numbered heading are dropped. The first line in the single numbered list is not aligned. (This is the first line under DEFINITIONS.) I will pick this up later today. I need to deliver some work on Monday.

Report · Sep 25, 2010

Report · Sep 25, 2010

The html above seems to work except the Roman style is not indented enough for straight alignment.

Report · Sep 28, 2010

Hi,

RH multilevel lists aren't real lists. This may explain the problem. I'm quite busy at the moment but I'll try to look at your css asap.

Greet,

Willam

Report · Sep 28, 2010

I know they aren't lists but are, basically, indented parargraphs. My css has worked wonderfully for 3 days now. I think the messy css RoboHelp creates for indented lists is part of the problem. However, I don't know if HTML has to be executed in a certain order like other programming languages. It appears it does to me. If that is true, if RH need to create a clean, ordered list for the indented lists. On to my problem with the Roman numerals not "aligning", I think it is because they take up an variety of pts. While 1., 2., 3., and a., b., c., take up *roughly* the same space, i., ii., iii., iv., v., vi., vii., and viii., vairy in lenght that is visually apparant. Since there is just the paragraph indent (to control where the paragraph is placed on the page) and the negative margin (to control... what?... how far from the number the text is placed), the Roman numerals cause an odd alignment.

Our corporate policy and procedure rules dictate the numbering style, which indents in some cases to 7 levels. So, I think we are stuck with the appearance.

Report · Sep 28, 2010

I think you've exactly pinpointed the problem. I have to check however if I can overcome the problems with the different size of the numerals.

As for execution order, HTML is not a programming language but a markup language. The order in which elements are nested does matter. Putting a paragraph in a list makes sense, the other way around does not. You can use JavaScript or CSS to style, read and change the content. (Try searching HTML DOM).

If you really want 'clean lists' you need to go with actual nested HTML lists. See also http://www.wvanweelden.eu/robohelp/lists/multilevel_lists.php

Greet,

Willam

Report · Oct 01, 2010

Hi,

I've taken a look, but what you see is not a bug. When you style a Multilevel list (using the style editor), you set the distance between the sequence and the actual numbering:

Simply increase the space between the sequence and the text to avoit this problem.

You can also change this setting in you css using an external editor. (Not recommended)

For multilevel lists, there are two settings for this: x-lvl-<nr>-margin and x-lvl-<nr>-indent;

The x-level-<nr>-margin sets where the text will be placed.

The x-level-<nr>-indent sets the distance between the sequence numbering and the text. (This is allway's negative.)

Setting the indents correctly in css is a pain. For roman numbering up to 100, use an indent of -55px; The list will then allways be correctly indented. (When the text is Arial 12pt.)

Conclusion: Increase the indents using the style editor of RoboHelp. Just add some more space, open a preview and repeat if necessary. The WYSIWYG provides a reasonable preview, but I noticed that FF sometimes doesn't completely show what the WYSIWYG shows.

Greet,

Willam

Report · Oct 01, 2010

The bug is: the indented lists created in the css by RoboHelp are scrambled and have to be edited to the appropriate order in a css editor (see Sept 24th css screen shot in this post compared to the later, cocrrectly ordered html). My indented lists are bullet proof now. I sent this observation in as a possible bug fix to RH. RH should generate a style for indented lists that is ordered and clean.

I've tried the shift you've suggested and didn't get good results but I will try it again.

Okay: The x-level-<nr>-margin sets where the text will be placed (such as i. or iiiv.)

Problem with Roman numberals: The x-level-<nr>-indent sets the distance between the sequence numbering and the text. (This is all ways negative.) The latter is the problem because there is aways a farther distance between i. and iiiv.) So, whatever number you set, there will always be a slight stagger to the alignment because of the further left start point of the sequence numbering. I think the distance measure starts at the end of the sequence number not the start of the sequence number. This is probably an HTML thing and RoboHelp can't control this. I will try again, but I'm pretty sure the staggered result is always going to be with me.

I find editing the directly in the css works when the interface does not produce a good result. Editing in the css is recommended if you know html. I always back up my last css so I'm never stuck with a bad result. I also use FrontPage for editing not Notes because I can"undo" while I edit.

Cheers!

Kate

Adobe Community

List Styles changes - is this a RoboHelp 8 bug?

1 Correct answer