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>
Image appears in Web table but disrupts Print table
Image appears in Web table but disrupts Print table
You do not have the required permissions to view the files attached to this post.
-
- Senior Propellus Maximus
- Posts: 2630
- Joined: Wed Apr 14, 2010 8:01 am
- Location: Surrey, UK
Re: Image appears in Web table but disrupts Print table
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?
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 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
Re: Image appears in Web table but disrupts Print table
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.
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.
-
- Sr. Propeller Head
- Posts: 290
- Joined: Mon Aug 26, 2019 2:11 pm
Re: Image appears in Web table but disrupts Print table
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'.
- 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'.
in hoc foro dolorem ipsum amamus, consectimur, adipisci volumus.
-
- Sr. Propeller Head
- Posts: 247
- Joined: Thu May 24, 2018 3:11 pm
- Location: Queensland, Australia
Re: Image appears in Web table but disrupts Print table
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:
If I wrap paragraphs in the DIV like:
It looks like the below:
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
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;
}
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>
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.
Re: Image appears in Web table but disrupts Print table
Thanks so much, Rob.
Flare says the code I wrote into the snippet 'plagiarizing' yours is not valid
<?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="<b>! Important: </b>"> 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>
Flare says the code I wrote into the snippet 'plagiarizing' yours is not valid
<?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="<b>! Important: </b>"> 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>
Re: Image appears in Web table but disrupts Print table
Rob !
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>
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>
-
- Sr. Propeller Head
- Posts: 247
- Joined: Thu May 24, 2018 3:11 pm
- Location: Queensland, Australia
Re: Image appears in Web table but disrupts Print table
Glad to help
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
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