Conditions with images in numbered lists (spacing issue)

[Q2TechWriter]

Hi everyone,

I have a numbered list with an image in each step. I soft return after the step, add the image, then add the next step. This is supposed to be single spacing, and it is when there aren't any images. However, when I condition them to Print Only, and then I build my HTML5 output and exclude the condition from my output, the images don't appear (which is what I want), but there is still double spacing between the steps.

See the images attached to this topic to get a better idea when I'm talking about.

[Robotman]

Instead of a soft return, wouldn't you be better off making the <li> a paragraph item?

Code: Select all

<ol>
   <li>
      <p> first line </p>
      <p condition>image</p>
   </li>
   <li>
   </li>
</ol>

[Daniel Ferguson]

The issue here is the soft return. When you do the soft return, it adds a line break in your HTML code (<br />). Because your condition tag is on the image itself, it's not excluding the line break from any of your outputs, and it's the line break that's causing the double spacing you're seeing.

My recommendation is to not use line breaks. Instead, put the image in its own paragraph, and then put the condition on the paragraph tag.



Here is what Gary's solution above would look like in the XML editor (image paragraph within the list item):



Code looks like this:

Code: Select all

 
<li>
<p>Click a category area in the graph...</p>
<p MadCap:conditions="xxxx.yyyy">
                    <img src="Resources/Images/IMG_20151104_163822262_HDR.jpg" />
 </p>
</li>

[Q2TechWriter]

Hi Daniel and Robotman,

Thanks for the response. The only reason I include it in the break is because it didn't work as it's own paragraph item. I just tried it again, and the spacing is the same this time as well.

[Daniel Ferguson]

Make sure the condition is on the paragraph tag, not the image.

[Q2TechWriter]

Make sure the condition is on the paragraph tag, not the image.

Other than going into the text editor, how would I get the image to be a paragraph item on the list item?

[Q2TechWriter]

Actually, that still didn't work. It's still double spaced.

[Daniel Ferguson]

OK, we might not be able to fully diagnose this problem without looking at your code. I did notice one thing in your screenshot though. I see that steps 3 and 4 are actually in separate ol tags. So your structure probably looks like this:

Code: Select all

<ol start="3">
<li>Step 3 content</li>
</ol>

<ol start="4">
<li>Step 4 content</li>
</ol>

Normally, ordered list contain multiple li tags within the list, like this:

Code: Select all

<ol>
<li>Step 1 content</li>
<li>Step 2 content</li>
<li>Step 3 content</li>
<li>Step 4 content</li>
</ol>

The reason I bring this up is because you might have some margin-top or margin-bottom on your ol tag in your stylesheet. If that's the case, one way to resolve this is to remove the margin from the ol in the stylesheet. I would argue that a better way to resolve it is to contain all of your list items in a single ol tag, at which point you can adjust the margin of your list items on the li tag rather than the ol tag.

[Q2TechWriter]

There it is! That's the issue. I appreciate it. I'll get this fixed in the style sheet rather than coding it every time.

Thanks, everyone!