Skip to main content
May 26, 2009
Answered

Lists do not display correctly in the web browser

  • May 26, 2009
  • 3 replies
  • 1961 views

I am using robohelp 7 and I actually have two problems. First problem is if I create an <ol>, when I switch from html view to design view and then back to html view the <ol>has been changed to a <ul>.

Second I am using nested lists. They appear as desired in the design view but when I complie the code and run it in IE 8 or FF the lists are not displayed as lists. The content of the lists is just displayed like each item in the lists is  a seperate line. Also it won't display <dl> either.

    This topic has been closed for replies.
    Correct answer MergeThis
    Ok, .css corrected:
    #menu ul {
    list-style-type: none;
    margin-left: 20px;
    padding-left: 0px;
    margin-top: 0;
    text-indent: 0px;
    border-left-width: 1px;
    border-left-style: dotted;
    border-left-color: #CCCCCC;
    }
    #menu ul li a:link{
    color: #006699;
    text-decoration: none;
    }
    #menu ul li a:visited {
    color: #663366;
    text-decoration: none;
    }
    #menu ul li a:hover {
    text-decoration: underline;
    }
    #menu ol {
    list-style-type: none;
    margin-left: 20px;
    padding-left: 0px;
    margin-top: 0;
    text-indent: 0px;
    border-left-width: 1px;
    border-left-style: dotted;
    border-left-color: #CCCCCC;
    }
    #menu ol li a:link {
    color: #006699;
    text-decoration: none;
    }
    #menu ol li a:visited {
    color: #663366;
    text-decoration: none;
    }
    #menu ol li a:hover {
    text-decoration: underline;
    }

    ...but the problem continues =(

    Looking into this further, I believe that a missing descendant selector might be an issue. That is, there is no rule to cover this line (a <li></li> without an <a></a> anchor, or any content):

    <li style="list-style: none;"></li>

    I would expect that you would need settings for a rule like this:

    #menu ul li {

    I'm also thinking:

    • What happens if you delete that <li style="list-style: none;"></li> line? Or, what happens if you keep the line but add an anchor and text (duplicate the Search line from the next <ul>)?
    • Why are the lists nested in a <div></div> element? These are normally used to establish a separate division on a page (other than normal <body> elements), such as navigation blocks on the right of a page, either top or bottom.
    • Why are <li> and <a> tags so restricted? That is, the #menu ol li a:link rule covers an anchor only if it is nested within a <li> tag, only if that <li> tag is nested within a <ul> tag, and only if that <ul> tag is nested within a <div id=#menu"> tag.

    Unless you need different <li> and <a> styles for other <div> selectors, the use of descendant selectors can be extremely difficult to control. I might even suggest starting fresh with the default.css (one of several provided by RH), and set the <a> <li> <ul> <ol> individually.

    Good luck,

    Leon

    3 replies

    Known Participant
    July 9, 2009

    Hello,
    I'm having the same problem, the tag is changed  UL to OL.
    In version 7 since the problem occurred, now at 8, still happening

    To circumvent this double code of .css:
    <CSS>
    #menu ul {
    list-style-type: none;
    margin-left: 20px;
    padding-left: 0px;
    margin-top: 0;
    text-indent: 0px;
    border-left-width: 1px;
    border-left-style: dotted;
    border-left-color: #CCCCCC;
    }
    #menu ul li a:link,
    #menu ul li a:visited {
    color: #006699;
    text-decoration: none;
    }
    #menu ul li a:visited {
    color: #663366;
    text-decoration: none;
    }
    #menu ul li a:hover {
    text-decoration: underline;
    }

    #menu ol {
    list-style-type: none;
    margin-left: 20px;
    padding-left: 0px;
    margin-top: 0;
    text-indent: 0px;
    border-left-width: 1px;
    border-left-style: dotted;
    border-left-color: #CCCCCC;
    }
    #menu ol li a:link,
    #menu ol li a:visited {
    color: #006699;
    text-decoration: none;
    }
    #menu ol li a:visited {
    color: #663366;
    text-decoration: none;
    }
    #menu ol li a:hover {
    text-decoration: underline;
    }
    </CSS>
    My HTML code originally is like this:
    codAntes.gif
    After:
    codDepois.gif
    Tks,
    Fernanda (Excuse the english, I'm Brazilian).
    MergeThis
    Inspiring
    July 9, 2009

    Two things:

    • I believe multiple selectors (bold) should appear on the same line.
    • Why are there two declarations for the same selector (italic)?

    #menu ul li a:link,
    #menu
    ul li a:visited {
    color: #006699;
    text-decoration: none;
    }
    #menu ul li a:visited {
    color: #663366;
    text-decoration: none;
    }

    Good luck,

    Leon

    Known Participant
    July 23, 2009

    Looking into this further, I believe that a missing descendant selector might be an issue. That is, there is no rule to cover this line (a <li></li> without an <a></a> anchor, or any content):

    <li style="list-style: none;"></li>

    I would expect that you would need settings for a rule like this:

    #menu ul li {

    I'm also thinking:

    • What happens if you delete that <li style="list-style: none;"></li> line? Or, what happens if you keep the line but add an anchor and text (duplicate the Search line from the next <ul>)?
    • Why are the lists nested in a <div></div> element? These are normally used to establish a separate division on a page (other than normal <body> elements), such as navigation blocks on the right of a page, either top or bottom.
    • Why are <li> and <a> tags so restricted? That is, the #menu ol li a:link rule covers an anchor only if it is nested within a <li> tag, only if that <li> tag is nested within a <ul> tag, and only if that <ul> tag is nested within a <div id=#menu"> tag.

    Unless you need different <li> and <a> styles for other <div> selectors, the use of descendant selectors can be extremely difficult to control. I might even suggest starting fresh with the default.css (one of several provided by RH), and set the <a> <li> <ul> <ol> individually.

    Good luck,

    Leon


    I removed the "<li style="list-style: none;"> </ li>" its function was to give space between menu items.
    The text is among <div> </ div> represented by a menu as the image is:

    I understand that the overlapping of tags should be a problem to the editor, which surprised me that other publishers do not occur this problem.
    Finally, I would like to know if there is a way to disable these amendments is in the Robohelp html, because was just a case of many that happen in our company. We have great documentation and like tool Robohelp, but every migration problems occur from changes made in template by the tool.
    Tks.
    May 27, 2009

    Thanks for the response,

    Ok here is what the code looks like:

    <ul style="list-style: disc;" type=disc>
    <li><a href="re260.html" title=vcAction>vcAction</a></li>
    <li><a href="re263.html" title=vcApplication>vcApplication</a></li>
    <li><a href="re264.html" title=vcBaseFrame>vcBaseFrame</a></li>
    <li>
    <a href="re265.html" title=vcBehaviour>vcBehaviour</a>
    <div class=itemizedlist>
    <ul style="list-style: circle;" type=circle>
      <li><a href="re261.html" title=vcActionContainer>vcActionContainer</a></li>
      <li><a href="re268.html" title="vcBooleanSignalMap">vcBooleanSignalMap</a></li>
      <li>
      <a href="re282.html" title="vcFlow">vcFlow</a>
      <div class=itemizedlist>
      <ul style="list-style: disc;" type=disc>
      <li><a href="re275.html" title="vcComponentFlowProxy">vcComponentFlowProxy</a></li>
      <li>
      <a href="re278.html" title="vcContainer">vcContainer</a>

      <div class=itemizedlist>
      <ul style="list-style: circle;" type=circle>
        <li><a href="re274.html" title="vcComponentCreator">vcComponentCreator</a></li>
        <li><a href="re304.html" title=vcMotionPath>vcMotionPath</a></li>
        <li><a href="re315.html" title="vcPatternContainer">vcPatternContainer</a></li>
        <li><a href="re325.html" title="vcRoutingRule">vcRoutingRule</a></li>
      </ul>
      </div>
      </li>
      </ul>
      </div>
      </li>
      <li><a href="re288.html" title="vcIntegerSignalMap">vcIntegerSignalMap</a></li>
      <li><a href="re291.html" title="vcKinematics">vcKinematics</a></li>
      <li><a href="re307.html" title="vcNodeList">vcNodelist</a></li>
      <li><a href="re321.html" title="vcProcessPointSensor">vcProcessPointSensor</a></li>
      <li><a href="re327.html" title=vcRslProcessHandler>vcRslProcessHandler</a></li>
      <li><a href="re329.html" title="vcRslProgramExecutor">vcRslProgramExecutor</a></li>
      <li><a href="re333.html" title="vcScript">vcScript</a></li>
      <li>
      <a href="re336.html" title="vcServoController">vcServoController</a>

      <div class=itemizedlist>
      <ul style="list-style: disc;" type=disc>
      <li><a href="re324.html" title=vcRobotController>vcRobotController</a></li>
      </ul>
      </div>
      </li>
      <li>
      <a href="re337.html" title="
    vcSignal
    ">vcSignal</a>
      <div class=itemizedlist>
      <ul style="list-style: disc;" type=disc>
      <li><a href="re267.html" title="
    vcBoolSignal
    ">vcBooleanSignal</a></li>
      <li><a href="re337.html" title="
    vcSignal
    ">vcComponentSignal</a></li>
      <li><a href="re287.html" title="
    vcIntegerSignal
    ">vcIntegerSignal</a></li>
      <li><a href="re302.html" title="
    vcMatrixSignal
    ">vcMatrixSignal</a></li>
      <li><a href="re323.html" title="
    vcRealSignal
    ">vcRealSignal</a></li>
      <li><a href="re344.html" title="
    vcStringSignal
    ">vcStringSignal</a></li>
      </ul>
      </div>
      </li>
      <li><a href="re338.html" title="
          vcSimInterface
        ">vcSimInterface</a></li>
      <li><a href="re343.html" title="
          vcStatistics
        ">vcStatistics</a></li>
      <li><a href="re345.html" title="
    vcStringSignalMap
    ">vcStringSignalMap</a></li>
    </ul>
    </div>
    </li>
    <li><a href="re266.html" title="
    vcBitmap
    ">vcBitmap</a></li>
    <li><a href="re269.html" title="
    vcCamera
    ">vcCamera</a></li>
    <li><a href="re270.html" title="
    vcCollisionDetector
    ">vcCollisionDetector</a></li>
    <li><a href="re277.html" title="
    vcConnector
    ">vcConnector</a></li>
    <li>
    <a href="re271.html" title=vcCommand>vcCommand</a>
    <div class=itemizedlist>
    <ul style="list-style: circle;" type=circle>
      <li>
      <a href="re289.html" title="
    vcInteractiveCommand
    ">vcInteractiveCommand
    </a>
      <div class=itemizedlist>
      <ul style="list-style: disc;" type=disc>
      <li><a href="re348.html" title="
    vcTranslateCommand
    ">vcTranslateCommand</a></li>
      </ul>
      </div>
      </li>
      <li><a href="re334.html" title="
    vcSelectCommand
    ">vcSelectCommand</a></li>
      <li><a href="re342.html" title="
    vcSnapCommand
    ">vcSnapCommand</a></li>
    </ul>
    </div>
    </li>
    <li>
    <a href="re281.html" title="
          vcFeature
        ">vcFeature</a>

    <div class=itemizedlist>
    <ul style="list-style: circle;" type=circle>
      <li><a href="re285.html" title="
    vcGeometryFeature
    ">vcGeometryFeature</a></li>
    </ul>
    </div>
    </li>
    <li><a href="re284.html" title="
    vcGeometryContainer
    ">vcGeometryContainer</a></li>
    <li>
    <a href="re286.html" title="
    vcGeometrySet
    ">vcGeometrySet</a>
    <div class=itemizedlist>
    <ul style="list-style: circle;" type=circle>
      <li><a href="re283.html" title="
    vcFrameSet
    ">vcFrameSet</a></li>
      <li><a href="re299.html" title="
    vcLineSet
    ">vcLineSet</a></li>
      <li><a href="re319.html" title="
    vcPolygonSet
    ">vcPolygonSet</a></li>
    </ul>
    </div>
    </li>
    <li><a href="re290.html" title="
    vcJoint
    ">vcJoint</a></li>
    <li><a href="re292.html" title="
    vcKinObject
    ">vcKinObject</a></li>
    <li><a href="re293.html" title="
    vcLayer
    ">vcLayer</a></li>
    <li>
    <a href="re294.html" title="
    vcLayoutItem
    ">vcLayoutItem</a>
    <div class=itemizedlist>
    <ul style="list-style: circle;" type=circle>
      <li><a href="re308.html" title="
    vcPathObject
    ">vcPathObject</a></li>
    </ul>
    </div>
    </li>
    <li><a href="re296.html" title="
    vcLight
    ">vcLight</a></li>
    <li><a href="re300.html" title="
    vcMaterial
    ">vcMaterial</a></li>
    <li><a href="re301.html" title="
    vcMatrix
    ">vcMatrix</a></li>
    <li><a href="re305.html" title="
    vcMotionTarget
    ">vcMotionTarget</a></li>
    <li>
    <a href="re306.html" title="
    vcNode
    ">vcNode</a>
    <div class=itemizedlist>
    <ul style="list-style: circle;" type=circle>
      <li><a href="re273.html" title="
          vcComponent
        ">vcComponent</a></li>
    </ul>
    </div>
    </li>
    <li>
    <a href="re320.html" title="
    vcPrimitive
    ">vcPrimitive</a>
    <div class=itemizedlist>
    <ul style="list-style: circle;" type=circle>
      <li><a href="re297.html" title="
    vcLine
    ">vcLine</a></li>
      <li>
      <a href="re316.html" title="
    vcPoint
    ">vcPoint</a>
      <div class=itemizedlist>
      <ul style="list-style: disc;" type=disc>
      <li><a href="re298.html" title="
    vcLinePoint
    ">vcLinePoint</a></li>
      <li><a href="re318.html" title="
    vcPolygonPoint
    ">vcPolygonPoint</a></li>
      </ul>
      </div>
      </li>
      <li><a href="re317.html" title="
    vcPolygon
    ">vcPolygon</a></li>
    </ul>
    </div>
    </li>
    <li><a href="re322.html" title="
    vcProperty
    ">vcProperty</a></li>
    <li><a href="re330.html" title="
    vcRslRoutine
    ">vcRslRoutine</a></li>
    <li>
    <a href="re331.html" title="
    vcRslStatement
    ">vcRslStatement</a>

    <div class=itemizedlist>
    <ul style="list-style: circle;" type=circle>
      <li><a href="re326.html" title="
    vcRslMotionStatement
    ">vcRslmotionStatement</a></li>
      <li><a href="re328.html" title="
          vcRslProcessStatement
        ">vcRslProcessStatement</a></li>
    </ul>
    </div>
    </li>
    <li>
    <a href="re332.html" title="
      vcScalarQuantity
    ">vcScalarQuantity</a>

    <div class=itemizedlist>
    <ul style="list-style: circle;" type=circle>
      <li><a href="re353.html" title="
      vcVectorQuantity
    ">vcVectorQuantity</a></li>
    </ul>
    </div>
    </li>
    <li><a href="re335.html" title="
    vcSelection
    ">vcSelection</a></li>
    <li><a href="re340.html" title="
    vcSimInterfaceField
    ">vcSimInterfaceField</a></li>
    <li><a href="re339.html" title="
    vcSimInterfaceSection
    ">vcSimInterfaceSection</a></li>
    <li><a href="re341.html" title="
    vcSimulation
    ">vcSimulation</a></li>
    <li><a href="re349.html" title="
          vcUnit
        ">vcUnit</a></li>
    <li><a href="re350.html" title="
          vcUnitFamily
        ">vcUnitFamily</a></li>
    <li><a href="re351.html" title="
          vcUnitGroup
        ">vcUnitGroup</a></li>
    <li><a href="re352.html" title="
    vcVector
    ">vcVector</a></li>
    <li><a href="re354.html" title="
    vcView
    ">vcView</a></li>
    <li><a href="re355.html" title="
    vcVolumeDetector
    ">vcVolumeDetector</a></li>
    </ul>

    If I copy this code to Dreamweaver is diplays as I want it to. I have attached a screen shot of how it is displayed in FF. It is also displayed this way in IE 8. But in the Robo Help design view it displays the list correctly.

    Peter Grainge
    Community Expert
    Community Expert
    May 27, 2009

    Impossible to read that image as you have put two screenshots alongside each other. Also please use the camera icon so that the images appear within the post, not as attachments.

    So RH design view works but the browsers do not. Have you looked at the code in the output files to see if RH is amending it in some way or is the problem with how the browsers handle those tags?


    See www.grainge.org for RoboHelp and Authoring tips

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

    list 1.png

    Sorry about that. I used the camera ico as you said. I checked the output code and it hasn't been changed. But if it would be changed the question I have is why? This is what happens when you create something that tries to help you too much. In the other post you used the illustration of a traction control system in a car, but I find that to be inacurate. Robo Help is like a navigation system that takes control of the vehicle when it thinks you are driving in the wrong direction and doesn't tell you why. As I said earlier the same code works just fine in DreamWeaver. So I think the problem is with RoboHelp.

    Peter Grainge
    Community Expert
    Community Expert
    May 26, 2009

    1] Not a problem I have seen reported. If you create the list in Design view and then toggle, does it still break? Is the code any different done that way?

    2] Please use the camera icon to insert an image of what you are describing. I just tried a simple DL list and it seems to work as expected.


    See www.grainge.org for RoboHelp and Authoring tips

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