How to style the backgroundcolor of a bullet item?

[Rene Severens]

Hi,

I am using a 1-line bulleted list with the next style properties to show a warning icon next to the actual text, with the icon shown outside the text-flow:

background-color: #0e68c (or select anything else but white),
font-style: italic;
list-style-image: ..\Images\Bullet_warning16x16.bmp;
list-style-position: outside;
margin-left: 120px;
padding-left: -40px;

The result looks like this: (changed the body background to gray):

example.png

What is needed to have the backgroundcolor shown behing the complete text?

Greetings,

Rene Severens.

[lacastle]

are you using only webhelp/online output, or also word? word makes this type of formatting into a table, which makes it easier to see where the margins and padding come into play. it may be helpful (even if you're not doing word output) to output this topic to word to see if the highlighting is only in a certain cell/column and not somewhere else.

this may be the long way to figure something out, but it might help. another option would be to close your topic and flare and open it again (possibly reboot first). it may just be the topic editor that hasn't refreshed or applied the style correctly.

does the problem occur only in the topic editor/flare, or also in the output?

[LTinker68]

What is needed to have the backgroundcolor shown behing the complete text?

If this is a standalone bullet and not one that will be in part of another list, then you could create a class of the ul tag and set the background color on the ul class. That might work.

BTW, you could also create a custom paragraph class to get the same effect instead of using an HTML list. The benefit of that is you can use that paragraph inside a list item, if necessary. If you don't do it as a paragraph but do it as an HTML list and decide you want that warning bullet used in another list, then you'd have to start and end a list, start and end a list that contains this warning bullet, then start and end another list and if it's a numbered list, tell the last list what item number to start with. In other words...

<ol>
<li>First list</li>
<li>First list cont.</li>
</ol>
<ul class="warning">
<li>Warning list item</li>
</ul>
<ol start="3">
<li>Simulated continuation of first list</li>
</ol>

Whereas if you did a paragraph for the warning text, then it would be...

<ol>
<li>List item 1</li>
<li><p>List item 2</p>
<p class="warning">Warning text</p>
</li>
<li>List item 3</li>
</ol>

[Rene Severens]

Hi,

Thanks for the reactions. The target is a PDF. My choosen title is not what it should have been. "How to style the backgroundcolor of the text of a bullet item" would even still not be correct,since the actual problem is "How to create more space between the icon and the text when using a backgroundcolor with the text".

I tried the given ideas with the next results:
- A restart or reboot did not help.
- Both given solutions did not solve this issue.
a: Using a ul class results in having a colored bar sticking out of the textflow to the left.
b: Using a p class resulted in the already noticed effect.

While trying I could not find any other way that to adjust the padding to create more space between the icon and the text and this causes the effect that the background color of the text is shifted.
However, I found a solution by turning my attention to the icon. In stead of using an icon 16x16 I created an icon 50x16, so it has a lot of white space to its right. This way the padding can still be set to 0px, so no shift of the background color or the text will occur. By adjusting the width of the icon the position can be determined exactly and the background color of the text is not influenced anymore.

However if there exists one or more properties to create this effect, I still would like to know about them!

Greetings,
Rene Severens