CSS problems after upgrading to RoboHelp 8

[Chrodgers]

We've recently upgraded from Robohelp 7 to 8. After upgrading, I'm having issues with my numbered/bullet styles after generating a webhelp project. The styles appear fine in the WYSIWYG. However, if I preview a topic or view after generating, the font size of the numbers are bigger than they should be, and the bullets aren't appearing as they should be (they're either "hollow" or square, instead of round and filled in). Has anyone else experienced a similar issue? Does anyone have any suggestions?

[phiguru]

On the WebHelp Pro options screen, there is a new feature in RH8 at the bottom right named:

Apply to all  Topics and it is followed by buttons for:
Master Page (with a template selection box)

CSS (with a template selection box)

It looks like the styles called by either of these two options will over-ride any template you may have attached to a file using the file's Properties menu.

Perhaps your inline formatting is being over-ruled by this global feature.

Good luck, Dennis O'Neal

[Guest]

What browser are you viewing WebHelp in?  Do you see these problems in all browsers?

In RH7 and earlier, you'd get a CSS file with "_ns" appended to the file name, and when WebHelp is viewed in non-IE browsers, it would use that style sheet (I imagine the "ns" stands for Netscape).  That may have changed in RH8 so all browsers use the same style sheet, so you may need to tweak your styles a bit to make them look right across browsers.

This problem of numbers being formatted wrong has been discussed in the forums before, so you may want to try a search on that.  For the bullets, it sounds like list-style-type is not specifically set to "disc."

Ben

GryphonMountain.net

[Amebr-ke0mH4]

I'm currently testing RH8 and I have seen the same issues. From my point of view, bullets and numbering in RH8 are significant stuffed. However, a few things can help in terms of display. You will need to manually make some changes to the stylesheet in a text editor.

Assuming upgrades from older versions of RH, there should be two definitions per style, for example:

P.Numbered

LI.P-Numbered

You'll probably find that most of the styling is in the P definition, and only a couple of things are in the LI definition. Ensure the P and LI definitions are the same. Possibly not everything is needed, but it's just easier to make them match.

Additionally, you may find that in your topics the styles assigned are a different case from the stylesheet, for example "p-Numbered". You should check both in a separate text editor, as the RH HTML editor seems magically "correct" a few problems. The easiest thing is to change the stylesheet to match the case in your topics. For example, change "LI.P-Numbered" to "LI.p-Numbered".

This seems to fix the majority of my display problems (although applying bullets and numbering are another matter - I plan to add to another numbering topic when I've finished investigating.)

EDIT:

I've just realised that margin-lefts are doubled when you duplicate between the P and LI styles. I couldn't tell about the other margins, but probably it's safer to not copy them.

[Chrodgers]

Thank you all for your responses. Much appreciated.

The "Apply to all Topics" check box is not selected in my Webhelp layout.

The issue appears in both IE and Firefox, and in RH when viewing a topic via the "View selected item" button.

Amebr, you are correct that my P and LI definitions didn't match. I've now managed to get them to match (I think), but the display problems are still present. The case of the styles in the CSS matches what's in RH. Currently this is what's displaying in RH when I view my bulleted list style:

BulletedStep - P definition:

Normal + list-style: disc; font-size: 10pt;

P-BulletedStep - LI definition:

LI + list-style: disc; font-size: 10pt;

And in the style sheet the following is appearing:

P.BulletedStep {

list-style: disc;

font-size: 10pt;

}

LI.P-BulletedStep {

list-style: disc;

font-size: 10pt;

Am I missing something? Again, the bullets and numbers appear fine in the WYSIWYG, but when I view the topics via the "View selected item" button or in the generated webhelp, the bullets appear "hollow".

[Amebr-ke0mH4]

Oops. My bad. I'd been playing around with a couple of versions of my stylesheet and thought the P definition had font-family and font-style defined, which I just copied to the LI. But I just had another look at the original stylesheet and it doesn't have that definition in.

So you could either add the font-family and font-size to each style, or perhaps define them for the OL and UL elements, which I think would flow through. Perhaps try the OL and UL styles first to see if it works in your situation, then if that isn't right for all your combinations of bullets and numbering, then try replicating them into your bullet and numbering styles.

Amber

[Chrodgers]

Thank you for everyone who responded to my post, and I apologize for the long delay in replying. We were forced to rollback to RH7 due to deadlines, and have just now been given the green light to troubleshoot the RH8 problems further.

Amber: your suggestion of adding the font family/size to the ol tag solved my problem of the numbers appearing larger than they should. Thank you!

As for my issue regarding bullets appearing "hollow", adding "list-style-type: disc;" to my ul tag (as suggested by Willam in this thread http://forums.adobe.com/message/2166981#2166981), solved that issue. Thank you.

I have one remaining problem and that is my alpha lists. They are appearing as numbers when I preview or after compiling. I see Willam's comments in the mentioned thread of removing the list-style definition from the paragraph style and adding "list-style-type: decimal" to the ol tag. This would work if only I didn't have both numbered steps (1,2,3) and alpha steps (a,b,c). So my question is, how can I get my alpha steps to appear alphabetically instead of numerically? I'm not sure if this further complicates the situation, but I typically use the alhpa style within my numbered lists, so:

1) Text...

     a)

This is what I have in my CSS for my alpha style:

P.NumberedStepABC {
color: #000000;
font-size: 10pt;
list-style-type: lower-alpha;
}
LI.P-NumberedStepABC {
color: #000000;
font-size: 10pt;
list-style-type: lower-alpha;

}

And my ol definition is:

OL {
margin-top: 0px;
margin-bottom: 0px;
font-size: 10pt;
font-family: Verdana, sans-serif;
}

Hopefully this makes sense. I am not a CSS expert and appreciate any suggestions.

Thanks

[Willam_van_Weelden]

Ah, the joy of multilevel lists. If you don't want to use RH's Multilevel lists, you'll have to modify the HTML yourself.

Each ordered list standard starts renumbering, so to get a separate sequence in a list, add a new list inside the list. RH doesn't support this from the GUI and since they now have multilevel lists, I doubt they will in the future.

To make your list, first create the first level. Then select the line where you want to add the second level and go to HTML view. It will look like this:

<li class="p-x"><p class="x">123</p></li>

Now add the following code between the </p> and </li> tags:<ol></li><p></p></li></ol>. The code will now look like this:

<li class="p-x"><p class="x">123</p><ol></li><p></p></li></ol></li>

Go back to design view and voila, your two level list is ready. Now simply select NumberedStepABC from the style menu to set the alpha list. Simply add a new line by pressing ENTER, just as you would add a line to a regular list.

Greet,

Willam

[Chrodgers]

Thanks for your response, Willam (and for your assistance helping me with the bullet issue).

Is there a way I can modify my existing NumberedStepABC style to use the Multilevel List feature? I just want to avoid having to create a new style and apply it everywhere the existing style is used, and am not sure how to do this.

I did make a modification to my CSS that fixed the alpha steps appearing numerically in my existing topics. However, in a new topic when I apply NumberedStepABC within a list where NumberedStep123 is used, the alpha numbering continues from the numeric (e.g. 1, 2, c -- where 'c' should be 'a'). Also, if the ABC style was already applied in an existing topic, the indentation of this style is different than when I apply it in a new topic.

I've attached a copy of my style sheet, if that helps. I realize it's likely user error at this point and me not understanding the proper way to apply/handle styles in RH8. Any suggestions will be much appreciated.

This is the CSS change I made:

OL {
margin-top: 0px;
margin-bottom: 0px;
font-size: 10pt;
font-family: Verdana, sans-serif;
list-style: decimal;
}
OL OL {
list-style: lower-alpha;

}

[Chrodgers]

I also just noticed that the HTML when the NumberedStepABC style is applied is different in an existing topic than it is in a new topic:

HTML for an existing topic:

<li class="P-NumberedStepABC" type="a"><p class="NumberedStepABC">

HTML for a new topic:

<li class="P-NumberedStepABC"><p class="NumberedStepABC">

So perhaps the problem of applying this style and the indentation appearing differently in a new topic lies in how I'm applying my styles. However, the issue of applying this style in a new topic and the numbering continuing (1, 2, c) still remains. Just want to provide as much information as possible. I'm almost positive it's something I'm doing wrong, I'm just not sure what that is.

[Peter Grainge]

It was the case that for every style in the CSS, RH created an LI equivalent. The idea was that no matter what style you were using, if you clicked the bullet icon, nothing changed apart from the addition of the bullet.

HTML editors like Dreamweaver don't work that way. There you must define how you want lists to appear quite separately. That involves created list styles using classes.

RH8 has moved to that method. Create a "Normal" paragraph of text and in the style dropdown you will see Normal displayed. Now hit Enter and you will see "none" is displayed. Depending on the fonts in your CSS, you will probably also see a change in the font displayed in the list.

You have two options. Create <li> classes in your CSS where each class is fully defined or click the list icon and then select a style from the dropdown. That way the bullet icon applies the bullet point and the style selected affects the text. If you generate printed documentation the latter is needed as you cannot map list styles.

There is more about this in my RoboHelp Tour.

I hope that with this information you can resolve your issues. I strongly recommend you create a test project to test this out.

---

See www.grainge.org for RoboHelp and Authoring tips

@petergrainge