9 Replies Latest reply: Aug 20, 2012 3:03 AM by Willam van Weelden RSS

    Bullets not displaying correctly in Firefox

    Authorgirl Community Member

      Hi,  my bulleted lists don't seem to display properly in  Firefox. Sometimes the text is displayed underneath the bullets and sometimes the spacing between bullet and text is too large.

       

      This issue doesn't occur in IE.

       

      I'm using RH7.

       

      I see others have had this issue but I haven't found an answer yet. Is there anything I can do or is this a Firefox issue?

       

      Firefox Display Issue.jpg

       

      Firefox Display Issue 2.jpg

        • 1. Re: Bullets not displaying correctly in Firefox
          Authorgirl Community Member

          After more googling I found some of my answers in here: http://www.grainge.org/pages/authoring/browsers/browsers.htm

           

          Thanks to Peter.

           

          Although I still have a few other issues that aren't resolved like some numbers of numbered lists appearing larger than others and some text being displayed as extra bold.

          • 2. Re: Bullets not displaying correctly in Firefox
            Peter Grainge CommunityMVP

            That is likely because the font for the numbering is not defined in your OL tag.

             


            See www.grainge.org for RoboHelp and Authoring tips

             

             

            @petergrainge

            • 3. Re: Bullets not displaying correctly in Firefox
              Authorgirl Community Member

              Thanks Peter, you're right, that works.

               

              What can I do to stop the link text of some of my drop downs appearing underlined when I've set them to not be? I'm sure this is a HTML tweak too but I don't know how to do it. Some dropdowns ARE supposed to be underlined but not all.

              • 4. Re: Bullets not displaying correctly in Firefox
                Willam van Weelden CommunityMVP

                Hi,

                 

                The easiest way depends on whether you have more drop downs with or without an underline.

                 

                With underline: Add the underline as the styling for the drop down hotspot. Select the drop down hotspot where you do not want the underline and click the apply underline button to remove the underline for that hotspot only.

                 

                Without underline: In the css, set the drop down hotspot to not use an underline. Select the drop down hotspot where you want an underline and click the apply underline button to add the underline.

                 

                Greet,

                 

                Willam

                • 5. Re: Bullets not displaying correctly in Firefox
                  Authorgirl Community Member

                  Thanks Willam, this is pretty much what I've done. The problem is that sometimes, the dropdowns that are not underlined show as underlined in Firefox. There is no obvious pattern to where this occurs.

                  • 6. Re: Bullets not displaying correctly in Firefox
                    Willam van Weelden CommunityMVP

                    Sorry for the late reaction, this post slipped my mind...

                     

                    You say there is no obvious pattern, but since it is software, there must be a pattern somewhere. Can you post the HTML code of some links that work and links that don't work in FireFox? (Don't reply via email as the forum doesn't get those HTML tags in mail.)

                     

                    When you have multiple dropdowns on a page, do all dropdowns exibit the same behaviour or do they react differently?

                     

                    Greet,

                     

                    Willam

                    • 7. Re: Bullets not displaying correctly in Firefox
                      Authorgirl Community Member

                      Thanks Willam, no, if I have multiple dropdowns on a page they don't all display the same. I have just discovered the pattern though. The dropdowns that display incorrectly have a span tag whereas the dropdowns that display correctly do not. I don't know much about html - can you tell what I might have done in the editor to apply this tag? I need to know so I don't do it again without realising.

                       

                      Incorrect formatting with spantag:

                      <h2 style="font-size: 10pt; font-weight: bold; color: #73c6a1;

                            text-decoration: none; "><a class="dropspot" x-use-popup=#POPUP298968552

                      x-popup-type=pulldown href="javascript:TextPopup(this)" id=a8><span style="font-size: 10pt; font-weight: bold; color: #73c6a1;

                            text-decoration: none; "><img src="../Welcome/Green_Book_Closed.gif"

                      x-save-file=TRUE x-save-method=compute-relative style="border: none; float: none; width: 18px; height: 15px;

                                                          border-style: none; border-style: none;"

                      width=18 height=15 border=0> Non-MACRO Arezzo Tasks</span></a><robohelp><script

                      type="text/javascript" language=JavaScript1.2><!--

                      TextPopupInit('a8');

                       

                      Correct formatting without spantag:

                      <h2 style="font-size: 10pt; font-weight: bold; color: #73c6a1;

                            text-decoration: none; "><a class="dropspot" x-use-popup=#POPUP298969292

                      x-popup-type=pulldown href="javascript:TextPopup(this)" id=a7 style="font-size: 10pt; font-weight: bold; color: #73c6a1;

                                                            text-decoration: none; "><img src="../Welcome/Green_Book_Closed.gif"

                      x-save-file=TRUE x-save-method=compute-relative style="border: none; float: none; width: 18px; height: 15px;

                          border-style: none; border-style: none;" width=18 height=15 border=0>

                      Arezzo Task Inconsistencies</a><robohelp><script type="text/javascript"

                      language=JavaScript1.2><!--

                      TextPopupInit('a7');

                      • 8. Re: Bullets not displaying correctly in Firefox
                        Authorgirl Community Member

                        I also meant to add this screenshot showing the output in Firefox. The dropdowns should not be underlined - as you see, two are displaying correctly.


                        underline.jpg

                        • 9. Re: Bullets not displaying correctly in Firefox
                          Willam van Weelden CommunityMVP

                          The span is overriding your styling. The solution is to remove those span tags.

                           

                          As a temporary workaround, add the !important declaration to the underline in your css:

                           

                          a.dropspot {

                            text-decoration: underline !important;

                          }

                           

                          Greet,

                           

                          Willam