Getting lists to indent properly in Firefox

[tspaul]

Hello,

We have recently been looking at our style sheet for WebHelp to overcome problems we've seen in some browsers. We have found in the KB that we can overcome the extra indentation for lists in Firefox by setting the padding. However, we are having a different Firefox problem with indented lists. We have an indent18 style that indents paragraphs 18 px. When we apply numbering or bullets to paragraphs with this style, the numbers and bullets indent with the paragraph text in IE, but not in Firefox. In Firefox, the numbers and bullets stay at our left margin, and only the paragraph text indents.

I have tried adjusting padding and margin-left specifications in the style sheet for the style and for OL or UL, but nothing seems to make this problem go away.

Has anyone else seen this or come up with a solution? Should we be using different styles for list items? If so, do we apply the style first and then select the numbering, or apply the numbering and then select a style for each list item?

Thanks in advance for any help you may be able to provide.

Tammy

[Peter Grainge]

See the second item.

http://www.grainge.org/pages/authoring/browsers/browsers.htm

---

See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

[tspaul]

I did read through that page and several other forum posts before posting yesterday, but it didn't seem to answer my specific question. The text is indenting to the proper level, but the bullets and numbers are not.

Tammy

[tspaul]

Let me try to simulate an example.

1. Normal numbered step.
   1. Indented numbered steps.

This is how the numbered steps should look when indented.

What is happening in Firefox for the indented steps is this:

1.          Text is indented, but number or bullet is not.

Tammy

[Willam_van_Weelden]

Hi,

My guess is that it's something in the style definition of the paragraph. My first hunch would be that you use padding-left or text-indent. Can you post an example topic and your style sheet?

Greet,

Willam

[tspaul]

Here is the style sheet and a sample topic that my colleague has given me to test. I apologize for the missing graphics you'll see in the header. This is a generated WebHelp help topic, not pre-generation.

The style sheet might appear a bit crazy right now. I have been experimenting with different settings in the OL and UL tags and in the paragraph styles themselves, trying to come up with a solution. I have removed some things as they proved not to help.

Tammy

[Willam_van_Weelden]

Hi,

I'm not sure what you want with the different indenting paragraphs. Do you only want to use them for lists, of also for indented text outside of lists?

The paragraph is set to have a left margin from the parent element (unless you specify a position as absolute or fixed). The paragraph will then indent 18 px within its parent element, in this case the list item. Firefox is displaying the list correct, while IE is not...

The solution is to use list classes and not paragraphs for the indent. You create them in the Robo css editor, or by creating LI. classes. Apply a style by right click, bullets and numbering, custom and then your style.

Set the indent in the list style. If you don't use the paragraphs for anything but lists, remove them from your style sheet and use a use the normal paragraph.

If you use these paragraphs for anything outside these lists, and you do want to use them in lists, add the following to your style sheet:

LI P {
    margin-left: 0 !important;   
}

This wil set the left margin of all paragraphs in lists to 0, thus correctly displaying your lists.

Greet,

Willam

[tspaul]

Thank you, William. I did discover in my work yesterday that the topics were using the actual paragraph styles like indent18, instead of the list classes, which surprised me. I think there may be some resistance to going back and changing them, but it sounds like I can try the latter solution. Either way, this gets me on the right track, and I appreciate it!

[tspaul]

I'm sorry that it has been a couple of days since I have gotten back to this - I was out of the office and also had to finish another project.

I just wanted to note that I tried the

LI P {
    margin-left: 0 !important;
}

solution first since our writers are currently using the paragraph styles for both lists and outside of lists, but it did not solve the problem. I will try the list classes instead.

I confess that I'm not quite sure how showing the number for a list item not indented and the text behind it indented (as Firefox) can be the correct interpretation, but I'm guessing it has to do with my trying to define the indents in two places.

I will look at the list classes that already exist in the style sheet and try using those.

Tammy

[Willam_van_Weelden]

Hi,

I just wanted to note that I tried the

LI P {
    margin-left: 0 !important;
}

solution first since our writers are currently using the paragraph styles for both lists and outside of lists, but it did not solve the problem. I will try the list classes instead.

Very strange... It should work and it does work on your example topics. It does not indent the list, but is sets the indent of the paragraph inside the list to 0, so the text is shown correctly behind the list style. Sorry if I wasn't clear on that before.

I confess that I'm not quite sure how showing the number for a list item not indented and the text behind it indented (as Firefox) can be the correct interpretation, but I'm guessing it has to do with my trying to define the indents in two places.

Tha's because of the structure of HTML. A HTML document is not like a word document or a text document. Every element in a page is a block or a level. Say you have the following:

<body>

<h1>My heading</h1>

<p>My paragraph<p>

</body>

First a heading, followed by a paragraph. Both elemenst are blocks that are set within a parent element, normally <body>. The margin you apply for the paragraph starts at its parent element.

When the paragraph is in the list, the paragraphs parent element is the list item (li). The indent will then start from the list element and not from the <body>. See also the attached .htm for an example. Note that Internet Explorer does not render the page correct. This is an IE bug! (The attachment may take some time to be approved)

Greet,

Willam

[tspaul]

I'm afraid this is not helping me. My goals are these:

-In indented sublists, get Firefox to indent the numbers and bullets with the paragraphs themselves.

-If possible, use the existing styles and not require the writers to go back and make extensive changes to what styles are applied - in other words, they would prefer that I could just provide a new style sheet that will solve the problem. Requiring them to apply different styles to all their topics could start a small-scale riot. 🙂

So far I do not have a solution to this. I apologize if I am not understanding whether this is possible and what would need to change. Meanwhile, I'm continuing to look into this on my own.

Tammy

[Willam_van_Weelden · Accepted solution]

Hi,

The solutions may not be all that complicated. There are a couple of things you need to do (I guess you are using Robo8):

0. Back up your projects! You have to do some changes that CANNOT be undone.

1. Teach all writers to also use proper lists:

     i. Click the list button, right click and select Bullets and Numbering, go to the tab custom and select the desired list.  Small-scale riot

     ii. Create RH Multilevel lists

2. Create a corresponding list style for every paragraph that is used in a list. The Robo7 convention is LI.p-<paragraph name>. Add all relevant styling in this style. You may want to use this convention or something like this, because it sets a relation between the list style and the paragraph.

3. Add LI P {margin-left: 0 !important} to your style sheet

4. Use a find and replace to give all your list items classes, example:

<li><p class=indent18> will have to be replaced with: <li class="p-indent18"><p class="indent18">

This way you can update all your lists in a matter of minutes. Just figure out what paragraphs are used an create the corresponding find and replace operation.

[tspaul]

Thank you! I will try your solutions and talk to the writers. I really appreciate your help and patience.

Tammy

[tspaul]

A combination of your item #1 and #3 appear to be solving the problem. Thank you so much! And I have been assured that there will be no riots.

Tammy