Custom bullet styles and floating images

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
writer_sam
Propeller Head
Posts: 26
Joined: Thu Sep 14, 2017 6:38 am
Location: Dorset, UK

Custom bullet styles and floating images

Post by writer_sam »

My tombstone is going to read "Never float your images"! :evil:

I've found a strange quirk with using floating images and custom bullet styles ... in that they don't seem to like one another! I wonder if anyone else has this problem and found a resolution?

Background:
I have to use FontAwesome as the bullet icon. I fell into the same trap as everyone else on this forum - output to web = perfect; ouput to PDF had the icon floating just a little above the text. The only way to resolve this, as recommended in another post, is to create a custom bullet style and apply the FontAwesome font to it. Everything aligned perfectly.

You'll also see from my previous posts that I'm using images that float. I've gotten all that working smoothly until FontAwesome was thrust upon me.

The problem:
My projects are all numbered or bulleted instructions with images that float to the right - great when using ol or ul's. IF, however, I'm having to apply my custom bullet style (p.Bullet for arguments' sake) then I find that the text isn't wrapped to the left of the image. Instead, it's aligned at the bottom as if the image is not floating at all:
custom_bullet_misaligned.png
I've tried using the image floating style as a div, and as a straight img style. I've swapped the position of the image. I've used the overflow and clear attributes. Nadda.

The only thing that does work is styling them back to ul's rather than custom p styles. If I make them straight p tags, everything works properly!

This is my CSS:

p.bullet1
{
mc-auto-number-offset: 20px;
mc-auto-number-position: outside-head;
margin-left: 20px;
mc-auto-number-class: Bullet1Style;
mc-auto-number-format: '';
}

span.Bullet1Style
{
font-family: FontAwesome;
font-size: 120%;
color: #039BE5;
}

div.ImagesFloatRight
{
clear: both;
float: right;
margin-left: 10px;
padding: 5px;
position: relative;
display: block;
overflow: visible;
}

and the XML:

<div class="ImagesFloatRight">
<p>
<img src="Resources/Images/blah.png" />
</p>
</div>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<p class="bullet1" MadCap:autonum="">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p class="bullet1" MadCap:autonum="">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>

Have I been staring at this for too long and missed something blindingly obvious??
You do not have the required permissions to view the files attached to this post.
To err is human, but to really foul things up you need a computer.
writer_sam
Propeller Head
Posts: 26
Joined: Thu Sep 14, 2017 6:38 am
Location: Dorset, UK

Re: Custom bullet styles and floating images

Post by writer_sam »

In case anyone else encounters this problem ...

I put the same question to Flare's support and was advised to use 2x1 tables to format the layout - text in one cell, image in the other. All good.
I might raise a bug about this layout problem though ...
To err is human, but to really foul things up you need a computer.
Post Reply