16 Replies Latest reply on Aug 12, 2008 1:54 PM by Captiv8r

    Bulleted List

    harooki2 Level 1
      WebHelp Pro
      RH 7

      I'm re-working a project originally done in RH5. The bulleted lists used throughout the document have an icon for the bullets. These bullets are jammed up against the sentence itself. How do I add space between the bullets and the sentences?
        • 1. Re: Bulleted List
          RoboColum(n) Level 5
          I am assuming that the bullets were applied via a style? If so, you'll have to amend the style to add some additional space.
          • 2. Bulleted List
            harooki2 Level 1
            I guess my question was even more basic. These are the parameters for bullets in the style sheet:

            Normal + list-style: inside url(blue_glass.jpg); text-indent: -0.25in; margin-left: 18pt; margin-top: 5pt;

            What can I add to this to increase that space? In Word, I would do this with the Tab property. I don't see a means to do that in RH.
            • 3. Re: Bulleted List
              Ben Minson Level 2
              I would try changing "inside" to "outside" in the list-style property and see if that makes a difference. If that doesn't work, you could also play with the values in the text-indent and margin-left properties and see if that will change the amount of space between the image and the text.

              • 4. Re: Bulleted List
                I'm having the same issue as harooki2. Using a bulleted paragraph style with a custom bullet image (bgbaby.jpg), when I generate WebHelp there is no space between the bullet points and the text. The spacing looks fine both in RoboHelp's WYSIWYG editor and when I output to Printed Documentation (Word doc).

                Here are the style sheet parameters I'm using:

                p.BulletText {
                margin-top: 0pt;
                font-family: "Myriad Web Pro", sans-serif;
                margin-bottom: 6pt;
                list-style: url(bgbaby.jpg);
                font-size: 11pt;
                margin-left: 0pt;

                I've experimented with "margin-left" and "text-indent" values, and in both cases they move the entire line (bullet included) rightward rather than inserting space between the bullet and text. (Margin-left shifts the entire block of text, and text-indent moves only the top line over).

                I see no discernable difference whether "Bullet positioned inside text" is checked or not in the style's bullets and numbering options (I have it unchecked at present).

                Normal bullets look fine; it's only when using a custom bullet image that I see this problem. I could use regular bullets, but I'd prefer to use the custom image as they look nicer.

                Any other ideas for inserting some space between the bullet image and text? (I considered altering the .jpg itself to "widen" it, adding some blank space on the right side, but I wonder whether there isn't a better way.)

                • 5. Re: Bulleted List
                  MergeThis Level 4
                  I believe that list-style: url(bgbaby.jpg); should be list-style-image: url('bgbaby.jpg');

                  That is, add -image and enclose the image file name in single quotes.

                  But, shouldn't you be adding this list styling to the UL or LI tag, instead of this paragraph style?

                  Good luck,
                  • 6. Re: Bulleted List
                    Ben Minson Level 2
                    You don't need the quotes for (bgbaby.jpg), but it doesn't hurt to have them. Leon's other suggestions are worth a shot.

                    • 7. Re: Bulleted List
                      rjmerr Level 1
                      Thanks for the suggestions, but I think I found a solution. I added "padding-left: 6px;" to the above parameters, and now the spacing looks good both in both WebHelp and Printed Doc output.

                      As to the paragraph vs. LI/UL question, I created a paragraph style just for these bulleted lists (BulletText) and that's what I was editing in the RoboHelp-generated .css file. Not sure whether it was the best approach, but I'm happy with what I have now.

                      • 8. Re: Bulleted List
                        KC in Colorado Level 1
                        I'm also having issues with the use of a custom bullet (blue_glass.jpg) in my FlashHelp project and I confess: I'm CSS-illiterate and rely on the RH7 GUI to create/modify styles. The problem I'm having is the vertical alignment of the custom bullet in paragraphs that contain a small graphic.

                        I created a style for the custom bullet list called BulletsBlueGlass and the style shows up in the project CSS file as simply:


                        P.BulletsBlueGlass {
                        list-style: url(blue_glass.jpg);
                        LI.P-BulletsBlueGlass {
                        list-style: url(blue_glass.jpg);

                        In bulletted paragraphs that include a small graphic (of the book icon in a FlashHelp skin, for example), the custom bullet seems to want to align itself with the top of the small graphic. So the text for that bulletted paragraph uses a lower baseline (?) than it should. It's pretty ugly and does not happen if I use the standard bullet style (i.e., just click the Bulletted List icon in the Robo editor).

                        Can this be fixed wth a manual modification to the CSS? If so, how?

                        Thanks and sorry for the CSS ignorance! ;*)

                        • 9. Re: Bulleted List
                          Ben Minson Level 2
                          If I'm understanding your problem correctly, I'd suggest manually adding the following to LI.P-BulletsBlueGlass:

                          vertical-align: middle;

                          I think that will affect the alignment of the bullet itself, if memory of previous personal follies serves. See if that helps at all.

                          • 10. Re: Bulleted List
                            KC in Colorado Level 1
                            Thanks Ben, I'll try that. Does it go on its own line in the CSS? i.e.,

                            LI.P-BulletsBlueGlass {
                            list-style: url(blue_glass.jpg);
                            vertical-align: middle;

                            ???? Not familiar with this syntax.

                            • 11. Re: Bulleted List
                              Ben Minson Level 2
                              Yes, that's correct.
                              • 12. Re: Bulleted List
                                KC in Colorado Level 1
                                Darn. I did that and recompiled and it didn't fix the bullet alignment. I checked the output folder to make sure it had the updated CSS and it does. Any other ideas? -- kc
                                • 13. Re: Bulleted List
                                  Ben Minson Level 2
                                  Is the image itself just the bullet, or is it a square image with some white space around the bullet?

                                  Can you provide a screenshot of the problem?
                                  • 14. Re: Bulleted List
                                    KC in Colorado Level 1
                                    The image is from RoboHelp's gallery. It's a closely cropped circle but there are white corners. Could you tell me how to post a screenshot because I HAVE one but can't figure out how to post it here. It's a GIF file. -- kc
                                    • 15. Re: Bulleted List
                                      Ben Minson Level 2
                                      Someone recently used photobucket.com to post an image. You can't post images here, so you have to use a 3rd party site to upload an image, then post the URL here. (Or if you have your own Web space, you could upload the image to your server and give us the URL.)
                                      • 16. Re: Bulleted List
                                        Captiv8r Adobe Community Professional & MVP
                                        Hi all

                                        Here is a link that may help.

                                        Click here

                                        Cheers... Rick