Working with Images

[KHupp]

I was hoping someone has an answer as to why I am getting these results...
When I insert images into my doc, I will set the "Image Properties" to position option to Float = Right, Clear = Default, Vert Align = Text Top and Left border with a 12 px margin. When there is text with a background color, the color will overlap the image (uploaded Exam01).

Exam01.png

The text will wrap as it should. When I adjust the text paragraph indention setting to accommodate the image width plus the margin then I get the result shown in image exam02

Exam02.png

.

I can use tables to get the desired results (image exam03)

Exam03.png

but tables tend to create other issues when I am producing these pages in PDF, HTML5, & CHM files.
This is only an issue when there is "Notes" that happen like in the examples. Otherwise everything is fine.

Any ideas?

Thanks Keith

[AlexFox]

Can you show me the code for the coloured element? If you'd prefer this to avoid the picture you can tell it to clear: right; which will make it float past any element that is floated to the right, although I suspect you just want the background-color to occupy the same space as the content.

[KHupp]

Image is in green
Text with background is in blue

<img src="../Images/CANMonitor Sym Tbl.png" class="img_5ptTB" MadCap:mediastyle="@media print { width: 275px; }" style="width: 300px;float: right;vertical-align: text-top;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;margin-left: 12px;margin-top: 12px;">
</img>
</p>
<p class="NormalIndented">Data Items can be edited from the Control Object by selecting the item and pressing the "F8" key or right-clicking and selecting "Properties" from the context menu.</p>
<p class="note1" style="widows: 0;orphans: 0;"><b>Note:</b>Refer to the "Data Item Properties: Description Tab" section in the "VISION Calibration and Data Acquisition User Manual" for more information on the "Scalar" and "State Variable"property tab and sub-tabs.</p>
<p> </p>

[Psider]

Try adding overflow: auto to your note1 class.

[KHupp]

I removed the orphan stuff and add the "overflow: auto;" as suggested, but nothing happened.

<img src="../Images/CANMonitor Sym Tbl.png" class="img_5ptTB" MadCap:mediastyle="@media print { width: 275px; }" style="width: 300px;float: right;vertical-align: text-top;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;margin-left: 12px;margin-top: 12px;">
</img>
</p>
<p class="NormalIndented">Data Items can be edited from the Control Object by selecting the item and pressing the "F8" key or right-clicking and selecting "Properties" from the context menu.</p>
<p class="note1" style="overflow: auto;"><b>Note:</b>Refer to the "Data Item Properties: Description Tab" section in the "VISION Calibration and Data Acquisition User Manual" for more information on the "Scalar" and "State Variable"property tab and sub-tabs.</p>
<p> </p>

[Psider]

Hmm, it should work for HTML output, but it might not for pdf. I'm not sure if you'd see any difference in the Flare editor - did you generate and see if your output is okay?

[KHupp]

I didn't do a preview or rebuild. I only went on what it showed within the editor.

It works on building the HTML and the CHM files, but alas, it does not do the PDF which is our primary.

Thanks for the info as it does help for the app help files so that is a big plus! Now just need a fix for the PDF.

Thanks again.
Keith

[ajturnersurrey]

I was having similar issues:
viewtopic.php?f=6&t=29705

It led me to change the way that I do notes (and other blocks of material that could interact in strange ways with the sidebar in html5 help).

I used to have

Code: Select all

<p class="Note_CAUTION_WARNING">Note: Do not run the EdgeConnector Configuration Wizard until this step is complete, or you will not detect any door readers.</p>
</div>

but I changed to:

Code: Select all

<div class="Note_CAUTION_WARNING">
   <p>Note: Do not run the EdgeConnector Configuration Wizard until this step is complete, or you will not detect any door readers.</p>
</div>

because the div will respond to the addition of

Code: Select all

overflow: auto;

and look good in both pdf and topnav html5 help

[ajturnersurrey]

I was having similar issues:
viewtopic.php?f=6&t=29705

It led me to change the way that I do notes (and other blocks of material that could interact in strange ways with the sidebar in html5 help).

I used to have

Code: Select all

<p class="Note_CAUTION_WARNING">Note: Do not run the EdgeConnector Configuration Wizard until this step is complete, or you will not detect any door readers.</p>

but I changed to:

Code: Select all

<div class="Note_CAUTION_WARNING">
   <p>Note: Do not run the EdgeConnector Configuration Wizard until this step is complete, or you will not detect any door readers.</p>
</div>

because the div will respond to the addition of

Code: Select all

overflow: auto;

and look good in both pdf and topnav html5 help

[KHupp]

I changed my note to a "DIV" and added the "overflow" so this is what my code looks like now... Blue is image and red is note with background color.

<p class="image">
<img src="../Images/Chng DB Load Order.png" MadCap:mediastyle="@media print { height: auto;width: 300px; }" style="height: auto;width: 350px;float: right;vertical-align: text-top;padding-top: 0pt;padding-bottom: 0pt;margin-left: 12px;margin-top: 12px;" />
</p>
<p class="NormalIndented"> The load order can be managed with the "Change DB Load Order" window accessed by right clicking on the CAN Monitor in the Device Tree.</p>
<div class="note1" style="overflow: auto;">
<p style="color: #ffffff;"> <b>Note:</b> The number of CAN messages the VISION Hub supports is currently undefined.</p>
</div>

No change in results for PDF. Background still overlaps the image but the text wraps as it should.

[ajturnersurrey]

In your switch to divs, do put the colour on the div, not on the paragraph.

One other suggestion, a work around rather than a cure, is to increase the z-index value (under Positioning) on the img element.

I have some h1s containing images which I want to hold their position, without interference from the text. In the print medium I had to set the image to have z-index 2, so that it is effectively rendered over the top of whatever the text may have done. Bigger z-indexes are rendered on top of lower ones. It won't get rid of your overflowing colour but it will make sure you still see the whole image!

[KHupp]

Still no go...
I'm beginning to think this is an issue that Madcap needs to fix and/or implement in the future.


<img src="../Images/Chng DB Load Order.png" MadCap:mediastyle="@media print { height: auto;width: 275px; }" style="height: auto;width: 350px;float: right;vertical-align: text-top;padding-top: 0pt;padding-bottom: 0pt;margin-left: 12px;margin-top: 12px;z-index: 4;" />
</p>
<p class="NormalIndented"> The load order can be managed with the "Change DB Load Order" window accessed by right clicking on the CAN Monitor in the Device Tree.</p>
<p class="NormalIndented" style="margin-bottom: 6;">Checking the "Show Full Filename" option (red box) will display the databases folder path and file name.</p>
<div style="overflow: auto;background-color: #0082c9;border-top-style: solid;border-top-width: 1px;border-bottom-style: solid;border-bottom-width: 1px;padding-top: 8px;padding-bottom: 8px;padding-left: 8px;">

Results - PDF (Bad)

PDF.png

Results - HTML (Good)

HTML.png