picture in list setting off alignment

[ladyrae]

Hi! I was wondering if anyone has encountered this problem before and knows how to fix it!

I've inserted a small picture into a line of text in a auto-number list. It looks fine in the editor, but when I preview it or build it (HTMLHelp) the list number seems to jump up a little on the page and is no longer aligned with the line of text.

I thought the picture might need more space above it perhaps, so I changed the spacing 'before' in hopes that would fix it, but nothing changed.

Thanks!!

VMP_print icon problem.jpg

[LTinker68]

I'm guessing the auto number must be set up to be vertically aligned to the middle of the line. The height of the line is higher because the image height is taller than the line height. Try creating a sub-class of the <img> tag and set the vertical alignment property to middle or text-bottom (might require some trial-and-error). Then apply the class to the image. It should lower the image in relation to the text a bit, which should bring the number down. Note that if your step is long and word-wraps to the next line, then you'll have a gap between the first line of text and the second line.

That type of movement on the number doesn't occur if you use the standard <ol> and <li> tags. So you might want to set the vertical align property on the auto numbering field, if it's available (sorry, don't have Flare running at the moment). If there is such a property, then you may not need to play with the image alignment (unless you want to) because the number will be behaving as it's meant to.

[Serena]

I had the same alignment problem. Solved it by adding the following to my CSS file:

Code: Select all

img
{
    vertical-align: middle;
}

[SteveS]

Thank-ypu, Serena - and welcome to the forums