Participant

Question

Formatting issues in WebHelp

Forum|Forum|19 years ago
September 6, 2006
5 replies
1787 views

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

WebHelp

This topic has been closed for replies.

Peter Grainge

Community Expert

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.

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

MergeThis

Inspiring

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

H

HKabaker

Inspiring

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

Peter Grainge

Community Expert

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.

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

MergeThis

Inspiring

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

J

Just_Mary

Known Participant

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.

H

HKabaker

Inspiring

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

Inspiring

See also Snippet 50 for more information on lists.

Good luck,
Leon

J

Just_Mary

Known Participant

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

Community Expert

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.

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

Peter Grainge

Community Expert

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.

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

C

cgarbisAuthor

Participant

Thank you.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded