Nested snippet in ordered lists - stupid blank.

[Matze]

Hi all,

I´ve created a simple snippet as shown in the figure. It is only a p-style with an image. It is not an ordered list snippet.

Snippet.jpg

When I put this snippet in the topic, it looks fine so far as also shown.

Topict.jpg

It has this code:
<ol>
<li>Click on <img src="../../4_Images/1_Images_SSW/Symbol_Buttons/Settings_Button_SSW.png" alt="[Settings]" style="width: 20px; height: 20px;" class="Symbol_Buttons" /> to open the <MadCap:variable name="Project_Variables.Window_ApplicationSettings" /> window.</li>
<li>Select your service software style.</li>
<li>
<MadCap:snippetBlock src="../../5_Snippets/1_Snippets_SSW/ClickOn_Ok.flsnp" />
</li>
</ol>


But in the HTML5 output I have this stupid blank at the beginning of the third ordered list line.

HTML5_output.jpg

Have you ideas to fix it or is it a bug?

[NorthEast]

Have you ideas to fix it or is it a bug?

My guess is that your p style includes a left margin or padding, so it is being indented from the list item (li).

[paintedturtle]

<li>
<MadCap:snippetBlock src="../../5_Snippets/1_Snippets_SSW/ClickOn_Ok.flsnp" />
</li>

The Snippet Blocks are known to create interesting formatting when combined with regular text. Just go in and change your code from <MadCap:snippetBlock= to <MadCap:snippetText= and it should play nice with the rest of your text.
~Sarah

[NorthEast]

<li>
<MadCap:snippetBlock src="../../5_Snippets/1_Snippets_SSW/ClickOn_Ok.flsnp" />
</li>

The Snippet Blocks are known to create interesting formatting when combined with regular text. Just go in and change your code from <MadCap:snippetBlock= to <MadCap:snippetText= and it should play nice with the rest of your text. :)
~Sarah

Using the snippetBlock should be fine though, as it's inserting a p tag inside a li tag, which is valid HTML.

Inserting a snippetText would remove the p tag - which may inadvertently fix the issue, if it was caused by the p tag formatting.

Inserting a snippetBlock should only create interesting formatting if it causes invalid or unexpected HTML; e.g. inserting this snippet as a snippetBlock inside a p tag would create nested p tags, and probably result in strange formatting.
Flare will usually insert the right snippet type, depending on where your cursor is when you insert the snippet.

[ChoccieMuffin]

Have you ideas to fix it or is it a bug?

My guess is that your p style includes a left margin or padding, so it is being indented from the list item (li).

If this is the case (very likely) I suggest you add a complex selector to your stylesheet, to remove any left margins from a <p> tag when it's inside a <li>.

Code: Select all

li p
{
margin-left: 0;
}

It's worth adding, as it'll fix any other instances where you have a <li> containing paragraphs, not just when you shove a snippet in.

www.w3schools.com has a very good reference section on how selectors in CSS work, it's well worth bookmarking if your styling just isn't doing what you expect it to.

[Matze]

indeed my global p.style has a 10px left margin, thats the distance to the left.

Hmmm, using a snippet.Text instead of snippet.Box sounds nice, but I´ve always edit this in the thml source code by inserting a snippet in the topic right?

Therefore I´ve create a p.SnippetTask child without 10px margin. I guess a nice workaround for my team.

THX

[NorthEast]

indeed my global p.style has a 10px left margin, thats the distance to the left.

Hmmm, using a snippet.Text instead of snippet.Box sounds nice, but I´ve always edit this in the thml source code by inserting a snippet in the topic right?

Therefore I´ve create a p.SnippetTask child without 10px margin. I guess a nice workaround for my team.

THX

An easier way to fix this is by adding CSS so that paragraphs (p) inside list items (li) don't have a margin; e.g.

Code: Select all

li p { margin-left: 0; }

[ChoccieMuffin]

indeed my global p.style has a 10px left margin, thats the distance to the left.

Hmmm, using a snippet.Text instead of snippet.Box sounds nice, but I´ve always edit this in the thml source code by inserting a snippet in the topic right?

Therefore I´ve create a p.SnippetTask child without 10px margin. I guess a nice workaround for my team.

THX

An easier way to fix this is by adding CSS so that paragraphs (p) inside list items (li) don't have a margin; e.g.

Code: Select all

li p { margin-left: 0; }

I already said that, Dave!