Alignment in Numbered/Bulleted Lists with Images

[sarah_downing]

Hi, I am having some difficulty with the alignment of numbered lists and bulleted lists that contain an image. I'm finding that the number/bullet aligns noticeably above the text. See example below:





Note that numbered lists without images look fine.

I would appreciate any suggestions! Thank you!

[LTinker68]

Try creating a custom <img> class, set its vertical-align property to "middle", then apply that custom class to the image.

Depending on how tall the image is and how much padding/margin you have between line items, that may result in the text on the line above or below being separated from the rest of the text a bit. For instance, if your font size is 12px and the image height is 20px, then the line of text above and/or below the image may be separated a bit more because the line height has to adjust to accommodate the height of the image.

[sarah_downing]

Hmm this didn't seem to work for me. Any other suggestions? The only thing that seems to work is exporting to FrameMaker and adjusting the lists manually in there, which I would like to avoid.

[cbdebris]

Add white space to the image. Works great.

[LTinker68]

Hmm this didn't seem to work for me.

It definitely works in WebHelp output. In PDF output, it seems to position it text-bottom, but that was just a quick test. I didn't try specifying a different position in the print medium or try padding or anything else. It definitely wasn't positioned significantly higher than the text like in your screenshot.

[bonnie]

I am having some difficulty with the alignment of numbered lists and bulleted lists that contain an image. I'm finding that the number/bullet aligns noticeably above the text.

Hi Sarah,
I had the same problem and found that I could get the numbers to line up with the text, if I set vertical-align=baseline.
Bonnie

[McCarthy]

Try creating a custom <img> class, set its vertical-align property to "middle", then apply that custom class to the image.

Depending on how tall the image is and how much padding/margin you have between line items, that may result in the text on the line above or below being separated from the rest of the text a bit. For instance, if your font size is 12px and the image height is 20px, then the line of text above and/or below the image may be separated a bit more because the line height has to adjust to accommodate the height of the image.

Hi lisa,

This does seem to work fine for WebHelp. I've tried this images in lists for PDF targets. I've tried all of the vertical align properties but none of them seems to affect the image in the list for PDF output.

I still get this sort of thing:

test1.png

Any thoughts on how to fix this for PDF?

Thanks!

[LTinker68]

It could be because of the size of the graphic. In my case, the little icons I have in the steps are smaller -- they're just a few pixels taller than the font I'm using. You could try adjusting the line-height or margin-top value of the <li> tag and see if that helps at all. The only other option I can think of is to resize your graphics to make them closer in size to the text you're using.

Or, if all your icons are the same size, then create a custom <img> tag. For online output leave the width and height settings to the default value, but for print output, specify the width and height, and then apply that custom img class to the images. They'll be normal size for online output but smaller for print output, which should prevent them from pushing the line up too far.

[bonnie]

I found that I could get the numbers to line up with the text, if I set vertical-align=baseline.

I forgot one important part of my numbering setup. I am not using the <li> tags for my numbered items, but an autonumbered paragraph (p.step_number), with vertical-align=baseline.

numbers_w_image.png

(This works as long as you don't try to get too fancy and use a different font for the number than is used for the text of the item (if you do that, then there will be a misalignment, which is related to what I've found with span tags, as I've explained below). Also, the image aligns with the text bottom. There is no way to get it to middle-align with the text line (as is the case with non-numbered paragraphs as well.

Unfortunately, there doesn't seem to be any solution to the misalignment with the bulleted items. I have tried and tried and have found no way around that. I tried using a webding character for a bullet in an autonumbered paragraph, but the center of the bullet lines up with the baseline of the text.

In fact, even the <li> default bullets line up with the text bottom (I reported this to MadCap as a bug and they have acknowledged it as a bug). For this reason, I resorted to making my own bullet graphic to use with the <li> tags. This lined up at the top of the text until I then padded the top of the graphic (as part of the graphic itself) with a little white box sized to align the bullet with the middle of the text line (that took some doing). It looks like this:

bullet_black.gif

Furthermore, I've found that there is an alignment problem with span tags in PDF output, as well. If the span specifies a font different from the text line, there is a misalignment (in some cases only a point or two, but very noticeable). Some fonts are worse than others. I reported this to MadCap as a bug, and they have acknowledged it as a bug.

Sorry for the bad news. But at least this has been MY experience.
Bonnie