Strange bullet alignment

[trishe]

I seem to be seeing this alignment in every output I try (HTML 5, WORD, WebHelp Mobile, WebHelp).

This:
<ul class="FirstLevel">
<li> When the phone is first installed in the case, the case may actually "top off" the phone battery. After that, the phone will operate on the case battery.</li>
<li>When the phone charge is below 20% and the case has a full charge, the case may charge the phone battery.</li>
</ul>

Yields the output attached. I do not want the graphic to levitate so far above the line of the list item! I've viewed the output in Safari, Firefox, IE, Chrome, just in case. The output is the same.
TIA
Trish

[LTinker68]

Can you supply your style definitions for the ul.FirstLevel and li tags from your stylesheet?

[trishe]

Sure thing:
ul.FirstLevel
{
list-style-type: disc;
list-style-image: url('../Images/bullet_black_.png');
}

li
{
margin-bottom: 6pt;
margin-top: 6pt;
text-align: left;
orphans: 2;
widows: 2;
line-height: 13px;
font-weight: normal;
color: #363636;
}

Thanks!

[LTinker68]

First, make sure the image you're using isn't any taller than your defined line height of 13px.

Second, you have a margin-top of 6pt set for your <li> tags, which means the text of the list item will be positioned down 6pt relative to the parent and any preceding <li> tags within the same parent; however, the list image is defined in the <ul> tag, so although the image appears to be part of the <li> tag, it's actually more of a sibling element, and because you didn't likewise add that space to the image, then they're not aligned.

I recommend that you remove the margin-top:6pt from your <li> tag definition, because it's not needed for spacing between list items. That's because distance between elements is not cumulative. That is, a margin-bottom of 6pt for list item 1 is not added to margin-top of 6pt for list item 2 to get you a total distance of 12pt. Since the largest distance defined between the elements is 6pt, that's all the distance that will be between. (Note that this doesn't take into account padding, which is distance from the content to the tag's border, whereas margins are distance between elements.) As another example, if you had defined margin-top:9pt and margin-bottom:6pt, then two list items would only be 9pt apart, because that's the largest defined value between those two tags.

So, I recommend setting your <li> tags to have margin-bottom:6pt and margin-top:0pt. That should make the image defined in the <ul> tag line up with the top of the text in each <li> tag, while still giving you separation between <li> tags (as defined by the bottom margin). If you want to make sure the entire list is separated from preceding and following elements, then add margin-top and margin-bottom values to the <ul> tag.

Give all that a try and see if that helps. I don't have Flare open at the moment to test it, but I think my theory is sound. You might still have to play with things a bit, depending on the size of your image and such, and perhaps add padding:0 to the <ul> tag, but the above should get you closer to how you want it to look.

[trishe]

Absolutely no effect whatsoever - even adjusting the height of the graphic.

Thanks tho!

[trishe]

DOH! I resized the wrong image... when I resized the CORRECT image *and* removed the top margin, VOILE!

Success - THANK YOU!

[likeller]

I am having a bullet alignment issue but I am not using custom bullets, just the regular circle bullets.

Instead of vertically aligning to the center of the text, they are slightly below the center, almost as if in line with the bottom of the text.

Any suggestions?

[thirob]

likelller: Did you ever get a response? I'm having the same issue...

[doc_guy]

Can you share your css for your UL and LI elements? That might make it easier for us to help you.

[stevenmundy]

Folks
Try this:
For the image, set Text Wrap properties to Square.