Formatting issues in WebHelp

[cgarbis]

Hello,

I have had problems with properly displaying bulleted and numbered lists in my WebHelp projects. Basically, bulleted and numbered lists almost always display as intended/designed in IE, but not in Firefox 1.5x. There are always discrepancies, even when I use a third-party HTML editor like Dreamweaver to tweak the formatting of some pages.

I have created my WebHelp project from an imported Word doc containing numbered and bulleted lists into RoboHelp HTML. For the most part all made the transition well to RoboHelp, but there are serious formatting issues when the WebHelp is generated. Firefox does not display the lists the way IE does--in other words they are not justified properly as formatted in RoboHelp, and the round bullet symbol is almost always shown as a diamond symbol in Firefox.

Can anyone suggest fixes to list formatting problems, or does anyone know what is the cause of the formatting discrepancies? Your help would be much appreciated.

Thanks,
Chris

[Peter Grainge]

Welcome to the forum.

Take a look at this topic on my site and you will see part of what you describe is covered there. Click here.

You may need to modify your style sheet to resolve the different shape.

[cgarbis]

Thank you.

[Just_Mary]

Peter, your topic mentions changing the left margins in the NS stylesheet for Firefox. When I change the UL and OL margins in mystylesheet_ns.css, the space between the bullet/number and the text that follows it changes. For example, if I use "margin-left:12pt" in the OL tag, I go from

1. Some text

to

1. Some text


Instead, I want to change the spacing to the left of the number/bullet, such that I go from

1. Some text

to

1. Some text

Any ideas?

--Mary

[Just_Mary]

Whoops, I realized my hard spacing didn't come through. Let me use underscores as spaces.

Changing the left margin changes the formatting from

1._Some text

to

1.___Some text


What I want is to go from

1._Some text

to

__1._Some text

[Peter Grainge]

It looks like you might be applying the margin to the <li> tag rather than the <ol> and <ul> tags. If that is not it, tell us exactly what you are amending and how.

[HKabaker]

Mary,

Also be aware that when you edit bulleted and numbered lists, RH sometimes gets the code confused.

It can be helpful to take a look at the truecode.

For example, you have a bulleted list and want to insert an unbulleted paragraph. (I'm not going to suggest exactly how to do this). Or you have a numbered list and insert a new paragraph that's numbered, or perhaps not numbered.

The point here is that RH sometimes loses track of where these tags

<ol> ---- </ol>
<ul> --- </ul>
<li> ---- </li>

need to go.

As a result, you might see a problem in RH WYSIWYG view, but can't fix it easily. Or you might not see it in RH, but the WebHelp output is not what you expected.

Harvey

[MergeThis]

See also Snippet 50 for more information on lists.


Good luck,
Leon

[Just_Mary]

WHY I'M HAVING PROBLEMS
I guess my problem stems from me using styles for my lists (including nested lists) rather than creating lists using RoboHelp's bulleted and numbered list buttons and the indent button. When I use styles, everything looks fine in IE, but all list levels are aligned on the left in Firefox (e.g., Step 1 is left-aligned with Step 1a). Changing the margin in those styles doesn't affect the space to the left of the number or bullet; it changes the space to the right of the number+period or bullet. So part of the answer is to change how I create lists if I expect users to use Firefox. Much as I hate to do that....

NEW PROBLEM WHEN I PLAY BY THE RULES
However, when I change to bare-bones HTML lists and tweak the style sheet to handle each type of list (<UL>, <UL> <UL>, <UL> <OL>, etc.), I still have a problem, which I guess is HTML-related. I can get everything nice and pretty with one exception: the space between the bullets (whether I use discs or circles or squares) and the text that follows is always smaller than the space between a number and the text that follows it. In both IE and Firefox. For example, I get:

1. __Follow these steps:
____a.__Do either of the following:
_______ o_This thing xxxxxxxxxxxxx
__________xxxxxxxxxxxxxxxxxxxxxxxx.
_______ o _That thing xxxxxxxxxxxxx
__________xxxxxxxxxxxxxxxxxxxxxxxx.
____b.__Do the following:
_______ i.__First this thing xxxxxxxxxxxxx
___________xxxxxxxxxxxxxxxxxxxxxxxx.
_______ ii.__Then that thing xxxxxxxxxxxxx
___________xxxxxxxxxxxxxxxxxxxxxxxx.

That wasn't a very good representation, but hopefully you can see how the space after the bullets in 1a is slightly narrower than the space after 1bi (and, subsequently, the text on the second line for the bullet point is not aligned with the second line of 1bi). Does anyone know how to change that in the style sheet? I can't find any attributes to change that on W3C's site, so maybe it's not even possible. I've tried adding style attributes for margin-left, padding-left, text-indent -- none of these affect the spacing AFTER the bullet.

[Peter Grainge]

OL and UL control the whole list and LI controls the list items. The gap between the number OL and bullet UL and the items in those lists will be different between a numbered and bulleted list. You can redefine the LI but that will move it in both list types. You would need to create a LI class and use that with one of the list types.

http://www.w3schools.com/html/html_lists.asp is a good place to look for more information.

[MergeThis]

Run a little test in a new topic.

First, select all the "New Test Topic" items, and click the "Create a Numbered List" button, which will give you list items 1 thru 17.

Then select items 7-9, click the "Create a Numbered List" button to remove numbering, click the "Create a Bulleted List" button to add bullets, and then click the "Increase Indent" button to indent the bullets. (Note that RH restarts the numbering at 1 for the remaining items when you switch to non-numbered mode.)

Then select the second group of items 4-6, click the "Increase Indent" button to indent the numbering, select Format > Bullets and Numbering, and then click the "lower-roman" page.

Then select the first bullet item (the whole line), enter True Code, and remove the OL close/open code in three lines above it, which I've compressed into one here (</ol><ol style="list-style: decimal;"type=1>).

In IE7 (the only browser on my machine), the space between numbers/bullets and the text is equal in all three types.

Follow these steps and compare your results with the code provided below. You can then compare it to what you currently have. As far as I know, this spacing is the HTML standard default, which can only be different if the author makes it so.


Good luck,
Leon

[Just_Mary]

I was hoping to make 1) the bullets and numbers themselves left-aligned with each other and 2) the text that follows them to be left-aligned. That's how most applications format. HTML doesn't; I was hoping there was a workaround. I guess I have to accept that there isn't one.

The test you suggested does left-align the TEXT in similar levels (which accomplishes Wish 2); however, the level-two bullets are not aligned on the left with the level-two numbers (so Wish 1 not accomplished). Numbers begin farther to the left, and the period ends farther to the left, than the bullet. To make, for example, both the bullets and the numbers begin at exactly 12pt from the left margin, the text that follows them will not be aligned.

Adding left padding to the <LI> tag does change how much space is to the right of the bullet or number+period, but it does not change the base amount, so the spacing remains uneven.

[Peter Grainge]

My reply was not entirely correct and I have just played around for half an hour or so as this is something that has always irritated me.

The only solution I found googling was to use an image that had the right clear space.

A problem for another day.

[MergeThis]

You can nest your UL/OL combos in your CSS, such as "UL UL" or "UL OL UL" or "UL UL UL". For example, whatever indents and spacing values are applied to a "UL UL UL" element would apply to the final UL of that particular combo (third-level numbered list only when nested within a second-level list only when nested within a first-level list)

For a really entertaining discussion, which uses colors to denote how things cascade in these combos, click here. If you'd prefer to use certain combos for only certain topics, you could set up those combos in a STYLE section inside the HEAD section of the selected topics, instead of the external CSS.


Good luck,
Leon

[HKabaker]

Leon,

I went to click here click here and saw how the colors are controlled in nested items. Very interesting.

However, no lines are indented (IE 6.0). I thought the browser would automatically set nested indents.

Was the example built to show only color settings? Would it need more code to show both color and indent changes?

Thanks.

Harvey

[MergeThis]

Harvey:

Yes, and yes.