Bullets and numbering in Firefox

[Guest]

I have created a WebHelp document in RH6. The document contains numbered items and bullet points created using a customized style sheet. The generated document looks fine in the WYSIWYG and in IE7. However, in Firefox 2.0.0.14 the bullets are very inconsistent. On one topic they appear fine, in another there is too much space between the bullet and the bulleted text where the same style has been applied.

In another topic the space between the bullet and the bulleted text is so great it is in fact distracting.

I am also seeing inconsistent indentations on numbered items. While the reader may or may not notice this, it is not the desired formatting and looks unprofessional when viewed in Firefox. Again, this is not an issue in IE7.

I am attaching the code for the worst topic page.

Please let me know what other details you may require.

[Guest]

Sorry, I appear to have posted this to the wrong forum. Can an admin or a mod move this to the WebHelp forum?

My apologies.

[Captiv8r]

Hi wdwood71

No need to worry with what category to post in. Pretty much everyone that is able to help already watches all the different categories.

Cheers... Rick

[Peter Grainge]

Posts cannot be moved or deleted. The only option was to edit the content out with a brief explanation. But as you've asked here...

Take a look at the article on my site titled Browsers.

[Guest]

Peter,

I looked at the Browser section on your Web site. It does answer some other Firefox issues that I am having, but the bullet issue is slightly different than the one you refer to on your site.

In this instance, the bullets themselves are separated from the bulleted text.

I will attempt to illustrate below using the letter 'o' as a bullet and underscores to represent spaces.

Normal bullet:
o_Bulleted text

Abnormal bullet:
o______Bulleted text


Note: This behavior is not consistent across all topics.

[MergeThis]

Best practice would be to remove all instances of:

style="margin-left: -20px;"

and make your adjustments to the CSteps1 class in your CSS style sheet.

Oh, besides that! Firefox might be choking on the LI items with no ending LI tags. Hmmm??


Good luck,
Leon

[Guest]

WebHelp questions can be asked here, too--it's any questions having to do with RoboHelp HTML (as opposed to RoboHelp for Word, which has a forum). I think the "HTMLHelp" part of the title is a misnomer.

Your code has a couple of different things going on in the lists. Two of the lists are tagged thus in each item:

<li class=kadov-p><p>...</p></li>

One of the lists thus:

<li style="margin-left: -20px;" class=kadov-p-CSteps1><p class=Steps1 style="margin-left: 56px;">...</p></li>

That one looks like it spells out some very different formatting for the list items. There's not only an additional CSteps1 style, but there are two left margins being declared. Try applying the same formatting to the CSteps1 list items that is applied to the others. You may have to do it in the code.

Hope this helps,

Ben

[Guest]

Ben,

That section of code is indeed the one I am having trouble with. CSteps1 is a style used for quickly offsetting numbers and bullet points for areas where readers are instructed to follow steps.

The problem you identified was one of my own making while attempting to correct the bullet spread.

The original code, which suffers the same problems is thus:

<p> </p>

<p class=Steps1
style="margin-left: 56px;">Select the criteria (listed below) on which
the report should be based in the Completed Tasks by Workflow pane.</p>

<ul style="list-style: disc;"
type=disc>

<li class=kadov-p-CSteps1><p class=Steps1
style="margin-left: 56px;">Start date</p></li>

<li class=kadov-p-CSteps1><p class=Steps1
style="margin-left: 56px;">End date</p></li>

<li class=kadov-p-CSteps1><p class=Steps1
style="margin-left: 56px;">Workflow</p></li>

<li class=kadov-p-CSteps1><p class=Steps1
style="margin-left: 56px;">Drawer</p></li>

<li class=kadov-p-CSteps1><p class=Steps1
style="margin-left: 56px;">Document type</p></li>
</ul>


The left margin is defined at 56px. The -20px that appeared in the first code was due to a change I made to the _ns.css file to try to fix this issue. Any other suggestions would be welcomed. I am not an HTML expert by any stretch.

[Peter Grainge]

wdwood71

Create a new project and experiment to get it right in that rather than mess with your live project.

Reread what is on my site as the negative margin applied in the way I describe does correct the Firefox issue if you have applied a margin in the HTML editor. The best solution, as I indicate in the article, is not to apply a margin in the first instance. Then you will have no problems with either browser.