picture in list setting off alignment

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
ladyrae
Propeller Head
Posts: 20
Joined: Fri Apr 25, 2008 11:19 am
Location: Somerville, MA

picture in list setting off alignment

Post by 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
You do not have the required permissions to view the files attached to this post.
LTinker68
Master Propellus Maximus
Posts: 7247
Joined: Thu Feb 16, 2006 9:38 pm

Re: picture in list setting off alignment

Post by 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.
Image

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
Serena
Jr. Propeller Head
Posts: 1
Joined: Sun Jun 22, 2008 6:55 pm

Re: picture in list setting off alignment

Post by 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
Senior Propellus Maximus
Posts: 2087
Joined: Tue Mar 07, 2006 5:06 pm
Location: Adelaide, far side of the world ( 34°56'0.78\"S 138°46'44.28\"E).
Contact:

Re: picture in list setting off alignment

Post by SteveS »

Thank-ypu, Serena - and welcome to the forums :D
Image
Steve
Life's too short for bad coffee, bad chocolate, and bad red wine.
Post Reply