Vertical-Align Images not showing as aligned

This forum is for all Flare issues related to PDF, eBook, Microsoft Word, Adobe FrameMaker, XPS, and XHTML book targets.
Post Reply
awargo
Propeller Head
Posts: 56
Joined: Mon Oct 06, 2008 11:06 am

Vertical-Align Images not showing as aligned

Post by awargo »

I have used the "vertical-align:middle" command so that I can have small icons in with the text in my lists. When I view the topics in Flare, the icons do not show as being aligned, but view in internet explorer they look fine. When I view my print target the same issue occurs. Is there a way to make the icons align correctly as they do in explorer?
LTinker68
Master Propellus Maximus
Posts: 7247
Joined: Thu Feb 16, 2006 9:38 pm

Re: Vertical-Align Images not showing as aligned

Post by LTinker68 »

What type of print output are you producing? Word, PDF, or Framemaker? If it's Word, then I'm not sure that it'll work because Word doesn't recognize a lot of CSS styles. A possible workaround would be to create the graphic at the correct height (say 12px high) and then position the dot or icon or whatever in the middle of that graphic. You'd then set the CSS vertical-align back to the default option or maybe baseline and the graphic would look to be positioned correctly when you build Word output.
Image

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
awargo
Propeller Head
Posts: 56
Joined: Mon Oct 06, 2008 11:06 am

Re: Vertical-Align Images not showing as aligned

Post by awargo »

I am using a PDF. By using your suggestion would it mess up the list item below it and would the border go around the larger graphic or the actual picture?
LTinker68
Master Propellus Maximus
Posts: 7247
Joined: Thu Feb 16, 2006 9:38 pm

Re: Vertical-Align Images not showing as aligned

Post by LTinker68 »

It would only mess up the line item above or below if the graphic is taller than the line height of the text. So if you're using 10pt text, keep the graphic height to 10pt or below. If you apply a border to the <img> tag then it'll apply the border to the entire graphic, even if the graphic has a transparent background. If you want a border around those icons but not the graphic, then I recommend making the border part of the graphic file and not having CSS apply a border. In other words, make the border yourself in whatever paint program you're using.
Image

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
Post Reply