Images floating left with lists v. IE and Edge

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

Images floating left with lists v. IE and Edge

Post by writer_sam »

Hello all!

Apologies if this has been covered before; I've gone through the posts and can't find anything recent so just trying my luck.

I'm using Flare 2017 and have based this project off one of the the templates provided. I'm using the included style of having images floating to the left of the paragraphs and lists - HTML5 output. This works beautifully in Firefox, Chrome, Safari, and so on. IE and Edge ... well, let's just say, I'm about to go over the edge!! When viewed in an IE or Edge browser, and using lists (both ol and ul), the number or bullet is positioned in the middle of the image:

IE Output:
ie_edge_output.png
It should look like:
firefox_output.png
I've gone through previous forum posts and they point to a bug in Flare, but as these posts are from 2010 or before and it works in other browsers, I'm assuming this isn't the same bug here.

Do I have to create a different style for IE and Edge browsers?? — can we even do this in Flare?? Or do I have to use tables as we used to "back in the day"??

Cheers for your help!!

PS. This is my (sanitised) XML if you wanted a gander:

Code: Select all

<h2>Adding a New Task Step (cont.)</h2>
<div class="ImagesFloatLeft">
            <p><img src="../Resources/Images/myimage.png" class="Thumbnail" style="width: 73px;height: 49px;" /></p>
            <p><small>Click the image<br />to view full size.</small>
            </p>
</div>
<ol>
            <li>Provide a meaningful <span class="Object">Name</span> and <span class="Object">Description</span> (optional) for this step.</li>
            <li>Choose your <span class="Object">Data source</span>. This can either be:
				<ul>
					<li><span class="Object">No data source</span></li>
					<li><span class="Object">Task step</span></li>
					<li><span class="Object">Custom schema</span></li>
				</ul>
		</li>
</ol>
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: Images floating left with lists v. IE and Edge

Post by writer_sam »

In case anyone is following this hoping for a resolution.

To date, I have not had any luck with this at all. Paragraphs of text wrap beautifully but the lists are still left with the bullet or number overlapping the image.

Having spoken with MadCap Support, I was advised to use the "overflow: hidden;" property in my ol and ul CSS. This did work, however, it did not wrap the around the image. Instead it seemed to create a 2-column output with the image on the left, and the text on the right. I tried using browser-specific CSS entries for IE and Edge, but it appears these aren't supported by Flare 2017 - see viewtopic.php?f=6&t=29692. We were all left scratching our heads.

I was on the verge of just having images in the middle of text when I remembered that the div also works on the right ... Well that works perfectly :oops:
To err is human, but to really foul things up you need a computer.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Images floating left with lists v. IE and Edge

Post by NorthEast »

writer_sam wrote:I tried using browser-specific CSS entries for IE and Edge, but it appears these aren't supported by Flare 2017 - see viewtopic.php?f=6&t=29692.
It's not a case of being supported by Flare - media queries will not be removed/altered by Flare, and they'll be included in the output as-is.
So if they don't work, then they're probably (a) not correct, (b) not applicable to the browser/device you're testing, or (c) they might actually be working, but something else is the problem - see below.

When using mediums in Flare, one thing to beware is how Flare will handle a medium selected in the target -they don't work like "real" media types, like you've used in that post.
You might naturally assume that the medium selected in a Flare target is applied at run-time in the browser, like a "real" media type - but it isn't, it's processed at build time.
If you select a medium for a target, Flare essentially just copies the CSS from that medium, and pastes it at the end of the stylesheet (Topic.css I think) so it's outside of a medium.
As it comes at the end of the end of the stylesheet, it takes precedence over earlier statements.

Anyway, I'd always advise using developer tools (press F12) to diagnose any CSS problems in a browser.
writer_sam
Propeller Head
Posts: 26
Joined: Thu Sep 14, 2017 6:38 am
Location: Dorset, UK

Re: Images floating left with lists v. IE and Edge

Post by writer_sam »

O I understand now! I've just checked the built CSS in my Output folder, and the IE / Edge additions I made aren't there. I added them post-build and tested. Works fine in Edge (seems I've an additional problem in the IE section but I can debug that in my own time now). I totally misunderstood how Flare handles the CSS - because of the responsiveness of the HTML5 target, I assumed it was all applied at run-time rather than build. Thanks for the help, Dave!
To err is human, but to really foul things up you need a computer.
Post Reply