why are numbered steps displaying as bullets in FlashHelp?

Report · May 11, 2011

I'm using TCS3 and have imported my Help contect from FrameMaker.

Some of my topics that have numbered steps are displaying as bullets in the generated FlashHelp. This is not consistently happening to all of my topics.

Any ideas why this would be happening?

Report · May 11, 2011

The answer will be in the HTML used to represent the list, and in the CSS(s) used to format the content.

Once the content is in RH, the issue won't be the original FM files. You may, however, need to modify the mappings of the FM content into RH to come up with better code.

2 hints: -if you see FM_ in the html, then you need to map that format into RH properly -if you don't see

elements, then you need to map your list numbering in the conversion options

-Matt Matt Sullivan Director of Training | roundpeg, Inc. @mattrsullivan P: 714.960.6840 | F: 360.230.7269 | matt@roundpeg.com 4590 MacArthur Blvd., Suite 620 | Newport Beach, CA 92660

www.roundpeg.com

-Matt Sullivan
FrameMaker Course Creator, Author, Trainer, Consultant

Report · May 11, 2011

Matt,

Everything is mapped correctly. Not a FM tag in sight.

Report · May 12, 2011

I'm checking in again to see if there is an answer to my problem I don't understand why there is such a disconnect between what is in RH, what is in the preview and what FlashHelp displays.

Why does it not look the same consistently across all topics. Some of the topics display numbered steps correctly, while others are all bullets.

Sure hoping for help on this one.

Report · May 12, 2011

So what you're saying is that some topics in the project are displaying correctly & some in the same project aren't? Regardless of what SSL format? That would definitely point the finger at the topic as opposed to something to do with the launching program.

Report · May 12, 2011

Jeff,

I just did a comparison between the HTML of two similar topics. One of the topics displayed in FlashHelp with a correctly numbered procedure; the other one displayed with bullets instead of numbers. (The bullets weren't even my customized bullets.) The HTML in both instances was the same. How do you explain that?

What is SSL?

Thanks!

Report · May 12, 2011

Sorry - Single Source Layouts; if the html is the same, what about the css that's being used for each topic?

Report · May 12, 2011

SSL=Single Source Layout (FlashHelp might be defined as your Primary Layout, and is an SSL

What *is* the HTML?

BTW, your CSS code snippet included a definition for a 3rd level OL that wasn't formatted in an obvious place.

Your CSS has a definition for a p-steps class. and also for a steps class. Did you mean to define both?

-Matt

-Matt Sullivan
FrameMaker Course Creator, Author, Trainer, Consultant

Report · May 12, 2011

Same CSS is being applied to all topics.

Report · May 12, 2011

In order to get my customized bullets, one of our developers helped me with the following HTML:

UL LI UL LI {
font-family: Tahoma;
font-size: 11pt;
font-style: normal;
list-style-image: url(new_hollow_bullet.png);
list-style-position: outside;
}
OL UL LI {
font-family: Tahoma;
font-size: 11pt;
font-style: normal;
list-style-image: url(new_hollow_bullet.png);
list-style-position: outside;
}
UL UL LI {
font-family: Tahoma;
font-size: 11pt;
font-style: normal;
list-style-image: url(new_hollow_bullet.png);
list-style-position: outside;
}
} P.Bullet1 {
font-family: Tahoma;
margin-top: 7pt;
margin-bottom: 7pt;
font-size: 11pt;
margin-left: 5pt;
color: #000000;
list-style-image: url(new_blue_bullet.png);
}
LI {
font-family: Tahoma;
font-size: 11pt;
font-style: normal;
list-style-position: outside;
}
UL LI {
list-style-image: url(new_blue_bullet.png);
margin-left: -15pt;
}
OL UL OL {
margin-left: 5px;
}
P.Steps {
margin-top: 5pt;
margin-bottom: 0pt;
font-family: Tahoma;
font-size: 11pt;
margin-left: 1pt;
}
LI.p-Steps {
font-family: Tahoma;
font-size: 11pt;
}

Would these be throwing things off? I can't map an FM style directory to the UL and OL tags.

Report · May 12, 2011

Also, with TCS3, you will likely have a primary CSS (then one used for mapping) and an additional one recreated when updating content.

Don't modify the additional one; mod's will be lost on update

Also don't change the assigned css files; they'll be reassigned on update

-Matt

-Matt Sullivan
FrameMaker Course Creator, Author, Trainer, Consultant

Report · May 12, 2011

Matt,

I have not been changing the chapter CSS. The only one I have been changing is my primary one (default.css).

Report · May 12, 2011

Matt,

I'm using FlashHelp as my SSL.

Not sure what you mean by what is the HTML. Isn't HTML just HTML?

Do I not need to define both p-steps class and steps class? If not what should I delete and how should the remaining one look?

I inherited this CSS so I'm sure there are some very strange things that could be blown away.

Where is an obvious place to format a 3rd level OL?

Thanks for your patience. This has all been so horrible.

Report · May 12, 2011

I'd like to see a snippet of the HTML code used to represent the list itself.

-Matt

Matt Sullivan

Director of Training | roundpeg, Inc.

@mattrsullivan

P: 714.960.6840 | F: 360.230.7269 | matt@roundpeg.com

4590 MacArthur Blvd., Suite 620 | Newport Beach, CA 92660

www.roundpeg.com

-Matt Sullivan
FrameMaker Course Creator, Author, Trainer, Consultant

Report · May 24, 2011

Using TCS3 and importing from FM9.

I'm just back from vacation and I was hoping the little elves would have taken care of this problem for me. Since this was not the case, I'm back to the mines on this again.

I am noticing that RH is placing the following tag in front of each of my numbered steps:

Where would this tag be coming from? Don't have anything like it in my CSS. If I do a global search and replace and replace it with a simple <li> tag, I get my steps back.

Thanks in advance.

Report · May 25, 2011

A new development. Just for grins, I decided to generate HTML help. Guess what? Everything looks fine there. My steps display blue bullets where appropriate and the step procedures display numbers.

Why does it display fine in HTML Help and go kaflooey in FlashHelp?

What a journey.

Report · May 25, 2011

Hi,

Perhaps I can shed some light on the HTML help / FlashHelp mystery: HTML help topics use the HTML 4.01 format that RoboHelp 7 also uses. This is an older format and renders in quircks mode. This means that you can use some non-standard styling. FlashHelp topics use the XHTML 1.0 format which is much stricter and forces the browser to render in standards mode. This doesn't allow the non-standard styling thus breaking some bad code that used to work in RH7. This is the root of the infamous RH8 lists problem.

I'm not that big on FM integration, but my guess is that you are experiencing some variant of the list problem. When you generate the HTML, do the problems occur in single level lists, multilevel lists, only on certain levels in a multilevel list, etcetera? Perhaps you can share an example topic that is generated from FM so we can check the HTML.

Greet,

Willam

Report · May 25, 2011

William,

Here is the HTML for a topic that is a numbered procedure in RH, but in IE is displayed as bullets with no numbers. We don't understand where the >li type="1"> tag comes from.

<body>
<h1><a name="IX_dumping_data"></a><a name="IX_dumping_guide_map_data"></a><a
name="XREF_id096TH08I0PF"></a>Dumping guide map data</h1>
You can dump all guide map data for a specific cache
environment into the guide map cache dump folder.
<ol start="1">
<li type="1">In the Administrator Toolkit menu,
click Directory Service.</li>
The Directory
Service page opens.
<li type="1">Select a Logical
Server Name.</li>
The Directory
Services panel is populated with all the Directory Services
running on the logical server that you selected.
<li type="1">Do one of the following: </li>
</ol>
<ul type="disc">
<li>If you want to execute the command across
all running instances of a Directory Service role on all logical servers
in the environment, then select Broadcast
Command > Dump Guide Map Data.</li>
<li>If you want to execute the command on a
specific instance of a role on a logical server, then do the following
in the Directory Services
panel:</li>
</ul>
<ol start="1">
<li type="a">Select the check box next to the Directory
Service(s) on which you want to execute the command.</li>
<li type="a">Select
Dump Guide Map Data from the
drop-down list.</li>
<li type="1">Click GO.</li>
</ol>
The system displays the
success of the action in the Console
panel.
<?rh-placeholder type="footer" ?>
</body>
</html>

Report · May 25, 2011

William,

I read your excellent blog on the RH change from HTML to XHTML. Very clearly written. You also discussed creating global list styles. Here are my questions:

When you link or import from FM you have to map the FM styles to an RH style. For example, a Bullet1 in FM must be mapped to a RH Bullet styles that has the same formatting. Can you use global lists in these situations? Do they override the RH style that the FM style is mapped to or do they work together. If they override the style, is it the P style or the LI style?

Thanks, William.

Report · May 26, 2011

Hi,

Thanks for the kind words.

You can use global lists and they work together with other definitions. One note: CSS works with a kind of point system to calculate which styling rule applies to an element. If you set a global list style for LI and give that style a definition, the styling can be overwritten by a definition to LI.myclass. This means that you can apply global styling and override that styling whenever you need. It also means that you set global styling that won't apply to certain styles. Depending on how you use it, the styles can work together or work against each other.

Mapping in RoboHelp might not work exactly as you expect. (I hope one of the FM integration guru's can step in if I'm wrong.) When you map your list paragraph from FM to RoboHelp, you map only the paragraph. When you choose to convert the list to a HTML list, the mapped styling will apply to the paragraph. Robo creates a list and adds the type attribute to determine what kind of list you are creating: numbered, bulleted, alpha, etc. When a li element has the type="1" attribute, that means that list item is to be numbered using numbers.

Note: The style definition for p.Bullet1 will not work, as that tries to override the styling of a list in the paragraph.

In the example HTML you posted I see everyting as expected when I open it in Firefox. The first three steps are numbered, followed by two bullets. Then to alphanumeric steps followed by one numbered step. How should it look?

The HTML that is generated looks fine to me, but I don't know how your FM doc is structured. Please post back with some details os how you expect it to be and how it looks.

Greet,

Willam

Report · May 26, 2011

William,

What you saw displayed in Firefox is exactly how this topic should look (with the exception of the indentation of the step bullets and the substeps; I can't seem to figure out what it controlling those two lists.)

Why is it showing up so perfectly in Firefox and not in IE? Below is a screen shot of how it looks in IE:

As you can see, there are no numbered steps or substeps with letters. The only thing that comes through correctly is the bullets and those are not indented correctly. On your recommendation, I have ordered the O'Reilly book on CSS. It should come in two days. But I am completely baffled by how RH handles this. The only way that I can get numbered steps is to do a global search on <li type= "1"> and replace it with just <li>. This is not a very good solution. I feel like I'm being driven into the arms of Madcap Flare when it comes time to upgrade.

Thanks for the continued assistance.

Report · May 26, 2011

Hi,

I just looked in IE: IE6 and IE7 work fine. Only IE8 is giving trouble. Don't blame Robo just yet: This is definitely an IE8 bug. As soon as you remove the type attribute it works in IE8...

The bullet indent is cause by your css:

UL LI {
list-style-image: url(new_blue_bullet.png);
margin-left: -15pt; <- This indents the bulleted list back fifteen point. Amending this value will solve it.
}

For a solution, you would need to tweak the import so it doesn't create the type attribute for list items. Perhaps Jeff can help you out there.

I do have a workaround for IE: In the imported/linked topic, add the meta tag:

Directly after the <head> tag:

This will force IE8 to render in IE7 mode and thus displaying your topic correct. This may not be ideal, but if you like I can write a script that you can use to quickly add this rendering tag to linked or imported topics.

Greet,

Willam

Report · May 26, 2011

William,

YOU ARE BRILLIANT!

I tried this in a small test project and it works like a charm. Stupid Microsoft.

And yes, I would be interested in a script that would add this tag to all of my topics. I have over 600 so it would take a while to replace this in all of them.

Only problem left is that the numbered step following the lettered substeps is repeating the previous step number. For example:

1.

2.

3.

o (bullet)

3. (This should be 4.)

Thank you, William. You're a lifesaver.

Mary

Report · May 26, 2011

Stupid Microsoft.

Couldn't agree more when it's about Internet Explorer...

The repeating step is another problem altogether. RH creates a new list for the alpha characters and the last numbered list item is inside that list... This might be a RH bug, but I hope a FM guru can confirm that.

Greet,

Willam

Report · May 26, 2011

Doesn't happen in my FM to RH project (see resulting WebHelp output image).

In FM I'm using a Numbered1 paragraph style to start the numbered list, then a BulletedIn one for the indented bullets, and then a Numbered one to continue the numbering. It seems to have translated to RH fine - I seem to remember that I just leave the Conversion Settings to bring them in as text.

why are numbered steps displaying as bullets in FlashHelp?

1 Correct answer