Lists do not display correctly in the web browser

[Guest]

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.

[Peter Grainge]

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

[Guest]

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]

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

[Guest]

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.

[MergeThis]

Might the CSS settings for div.itemizedlist be causing RH some heartburn?

By the way, none of your lists seem to require numbers, anyway (OL = procedural steps).

Good luck,

Leon

[Fernanda_Br]

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:

After:

Tks,

Fernanda (Excuse the english, I'm Brazilian).

[MergeThis]

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

[Fernanda_Br]

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 =(

[MergeThis · Accepted solution]

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

[Fernanda_Br]

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.