Image appears in Web table but disrupts Print table

This forum is for all Flare issues related to PDF, eBook, Microsoft Word, Adobe FrameMaker, XPS, and XHTML book targets.

Image appears in Web table but disrupts Print table

Postby Kim in GA on Wed Sep 25, 2019 10:23 am

When I add an image to my snippet at row 8 or so, it appears in at the top of the table, disrupting a repeated header row.
Normally, I'd encase the snippet in a table cell but I've been warned (by Flare gurus at my office) not to nest tables.
How can I place the icon next to the text as a cue to the reader that this represents a CD or DVD that must be installed?
Thanks!!!

See attached snippet showing Icon|Description (see code, below).
See attached PDF showing icon disrupting header row in Print output.
Here's the code:
<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd">
<head>
</head>
<body>
<p class="CellBody">
<img src="../Images/cd dvd.png" style="width: 114px;height: 102px;float: left;left: 0px;top: 2px;" class="ArtWide" MadCap:mediastyle="@media print { position: absolute;z-index: 0; }" />NCR APTRA Windows10 Bundle SW (Americas) </p>
<p class="CellBody">Common-BootDVD1</p>
<p class="CellBody">Vol 01/02 (PSSCM-10808)</p>
<p class="CellBody">Version 08.01.01.01</p>
</body>
</html>
You do not have the required permissions to view the files attached to this post.
Kim in GA
Propeller Head
 
Posts: 12
Joined: Fri Mar 08, 2019 12:12 pm

Re: Image appears in Web table but disrupts Print table

Postby ChoccieMuffin on Thu Sep 26, 2019 4:33 am

Firstly, I don't understand the problem with nested tables, I use them all the time and have never had a problem!

Where I think your problem arises is with this line, particularly the bit highlighted:

<img src="../Images/cd dvd.png" style="width: 114px;height: 102px;float: left;left: 0px;top: 2px;" class="ArtWide" MadCap:mediastyle="@media print { position: absolute;z-index: 0; }" />NCR APTRA Windows10 Bundle SW (Americas) </p>

I think that the "position: absolute" is being interpreted as being absolute relative to the body on the page, rather than the table cell into which you've inserted the snippet.

I'm sorry I can't offer a suggestion to fix it, but I hope I've helped narrow down how you can resolve it.

Can I ask how you've dealt with the position of the graphic in line 13 in your main topic?
Started as a newbie with Flare 6.1, now using Flare 2019r1.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
ChoccieMuffin
Senior Propellus Maximus
 
Posts: 2191
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Image appears in Web table but disrupts Print table

Postby Kim in GA on Thu Sep 26, 2019 8:46 am

I resolved the image stuck at the top left of the table by removing it from the snippet - I'm sure you're right about the 'absolute' but I had only tried to format the image as 'square' so the text would flow around it/ flush right.
Thanks for weighing in on nested tables. It might work, but I forgot the snag:

The table is formatted to alternate background colors for each row (gray/white). Normally, I'd:

1) Insert a row below the instructional text ("Insert the DVD").
2) Make the DVD icon|DVD description snippet into a two-column cell, one containing the image (on the left) and the other containing the description (on the right).
2) Remove the border between rows, leaving the appearance of a single row.

But with rows alternating color, that doesn't work. Unless I manually reset the row background, somehow? It sounds HARD. :(
Kim in GA
Propeller Head
 
Posts: 12
Joined: Fri Mar 08, 2019 12:12 pm

Re: Image appears in Web table but disrupts Print table

Postby doloremipsum on Mon Sep 30, 2019 5:54 pm

A few notes that might help you with your playing around:

- The "position:absolute" style does place it in a particular position on the page itself (in this case, the top left as defined earlier in the style) rather than within its containing element. position:relative does the latter, but I haven't had much luck with it.
- Absolute positioning and floats are incompatible. The float by itself might actually work for the print output, give it a try.
- Are you concerned about the background colour of your inset table clashing with that of the frame? You could create a new style class (I use table.layout) and set the background-color of the cells to 'transparent'.
neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit - sed saepe cum dolor apud multos callidos mutuetur, reduci potest.
doloremipsum
Propeller Head
 
Posts: 60
Joined: Mon Aug 26, 2019 2:11 pm

Re: Image appears in Web table but disrupts Print table

Postby robdocsmith on Mon Sep 30, 2019 10:24 pm

Hi Kim,

If this is something you do regularly, could you encase the CD section in a DIV then use a background image on the DIV to include the CD image?

For example, I have a Caution DIV style that puts a standard Caution icon in an indented margin:

Code: Select all
div.caution
{
   page-break-inside: avoid;
   column-break-inside: avoid;
   width: 100%;
   border: 0.1mm solid;
   background-image: url('../Images/cautionSmall.png');
   background-repeat: no-repeat;
   background-position: 1cm .5cm;
   padding: 5mm;
   padding-left: 25mm;
   margin: 0;
   margin-bottom: 3mm;
   margin-top: 3mm;
}


If I wrap paragraphs in the DIV like:

Code: Select all
<div class="caution">
<p class="cautiontext">This is a cautionary note with lots of text in it. It goes on and on and on and on.</p>
<p class="cautiontext">It can be many paragraphs in size.</p>
</div>


It looks like the below:
note.png


I added a border so you can see the definition of the DIV.

The important bits are the no-repeat on the background image, locating the image in the correct place so it's found by the style, the background-position to location the image in the right place, and the padding-left to create space for the image.

Hope that helps,

Rob
You do not have the required permissions to view the files attached to this post.
robdocsmith
Propeller Head
 
Posts: 40
Joined: Thu May 24, 2018 3:11 pm

Re: Image appears in Web table but disrupts Print table

Postby Kim in GA on Tue Oct 15, 2019 8:22 am

Thanks so much, Rob.

Flare says the code I wrote into the snippet 'plagiarizing' yours is not valid :oops:

<?xml version="1.0" encoding="utf-8"?>
div.DVD
{
page-break-inside: avoid;
column-break-inside: avoid;
width: 100%;
border: 0.1mm solid;
background-image: url('../Images/cd dvd.png');
background-repeat: no-repeat;
background-position: 1cm .5cm;
padding: 5mm;
padding-left: 25mm;
margin: 0;
margin-bottom: 3mm;
margin-top: 3mm;
}

<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd">
<head>
</head>
<body>
<div class="DVD">
<p class="CellBody">
<img src="../Images/cd dvd.png" style="float: left;left: 145px;top: 2701px;width: 114px;height: 102px;" MadCap:conditions="Default.Disk Image" />NCR APTRA Windows10 </p>
<p class="CellBody">Productname</p>
<p class="CellBody">Version 12345</p>
</div>
<p class="Important" MadCap:autonum="&lt;b&gt;! Important: &#160;&lt;/b&gt;"> Edge 10 customers do NOT need to perform a complete reinstall. Install this Delta via Copy File to update an existing Edge 10 installation.</p>
</body>
</html>
Kim in GA
Propeller Head
 
Posts: 12
Joined: Fri Mar 08, 2019 12:12 pm

Re: Image appears in Web table but disrupts Print table

Postby Kim in GA on Tue Oct 15, 2019 8:31 am

Rob :D :D :D :D !

Thank you^100000000

IT WORKS! Exactly as pictured.

Much, much appreciated.

<head>
</head>
<body>
<div class="DVD">
<p class="CellBody">
<img src="../Images/cd dvd.png" style="float: left;left: 145px;top: 2701px;width: 114px;height: 102px;" MadCap:conditions="Default.Disk Image" />NCR APTRA Windows10 </p>
<p class="CellBody">Productname</p>
<p class="CellBody"> Verion 123456</p>
</div>
Kim in GA
Propeller Head
 
Posts: 12
Joined: Fri Mar 08, 2019 12:12 pm

Re: Image appears in Web table but disrupts Print table

Postby robdocsmith on Wed Oct 16, 2019 10:22 pm

Glad to help :P

I use these a lot and like them because it takes the image formatting from the content and ties it to a style. So much easier to change one style than find all references in your document and change those!

Cheers,
Rob
robdocsmith
Propeller Head
 
Posts: 40
Joined: Thu May 24, 2018 3:11 pm


Return to Printed Documentation Targets

Who is online

Users browsing this forum: No registered users and 1 guest

cron