picture in list setting off alignment

This forum is for all Flare issues related to styles, stylesheets and XML.

picture in list setting off alignment

Postby ladyrae on Thu May 08, 2008 6:39 am

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.


VMP_print icon problem.jpg
You do not have the required permissions to view the files attached to this post.
Propeller Head
Posts: 20
Joined: Fri Apr 25, 2008 11:19 am
Location: Somerville, MA

Re: picture in list setting off alignment

Postby LTinker68 on Thu May 08, 2008 8:40 am

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.

Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
Master Propellus Maximus
Posts: 7245
Joined: Thu Feb 16, 2006 9:38 pm

Re: picture in list setting off alignment

Postby Serena on Tue Jun 24, 2008 6:29 pm

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

Code: Select all
    vertical-align: middle;
Jr. Propeller Head
Posts: 1
Joined: Sun Jun 22, 2008 6:55 pm

Re: picture in list setting off alignment

Postby SteveS on Tue Jun 24, 2008 9:09 pm

Thank-ypu, Serena - and welcome to the forums :D
Life's too short for bad coffee, bad chocolate, and bad red wine.
Senior Propellus Maximus
Posts: 2032
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).

Return to Styles, Stylesheets and XML

Who is online

Users browsing this forum: No registered users and 7 guests