Background image missing from printed output (PDF)
-
- Sr. Propeller Head
- Posts: 184
- Joined: Thu Aug 07, 2008 6:43 am
- Location: Massachusetts
Background image missing from printed output (PDF)
One of our custom styles uses a background image (a GIF file). In the XML editor, the image appears as intended (see first graphic below), but it does not appear in the preview of the print medium, nor does it appear in the printed output (PDF - see the second graphic below). The image file is specified in both mediums, and, generally, the default and print medium styles in which the image is specified are identical.
IN XML EDITOR:
IN PDF OUTPUT:
Any idea why the image may not be appearing? Please let me know if there is a bit of code or other information I can provide that would help.
Thanks,
Todd
IN XML EDITOR:
IN PDF OUTPUT:
Any idea why the image may not be appearing? Please let me know if there is a bit of code or other information I can provide that would help.
Thanks,
Todd
Todd Richardson
Engineering Team Lead – Customer Experience | IntervalZero
Windows 10, Flare 2020
Engineering Team Lead – Customer Experience | IntervalZero
Windows 10, Flare 2020
Re: Background image missing from printed output (PDF)
That sounds like something doc_guy posted about, but I believe he said he had the problem with Vista 64-bit but it wasn't a problem with 32-bit. What OS are you running?
Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
-
- Sr. Propeller Head
- Posts: 184
- Joined: Thu Aug 07, 2008 6:43 am
- Location: Massachusetts
Re: Background image missing from printed output (PDF)
Windows XP Professional
Version 2002
Service Pack 3
Version 2002
Service Pack 3
Todd Richardson
Engineering Team Lead – Customer Experience | IntervalZero
Windows 10, Flare 2020
Engineering Team Lead – Customer Experience | IntervalZero
Windows 10, Flare 2020
Re: Background image missing from printed output (PDF)
Well, that's not it. I've seen something similar where my image is there, but it's out of position. It's appearing inside the paragraph, but it's behind it so the text covers it.
I haven't gotten around to figuring out a workaround yet, but I think someone else in another thread suggested using a div or two divs or a div containing two divs. Whatever. One would contain the image and one would contain the content. The one containing the content would be positioned slightly to the right of the one containing the image.
Or you could try altering the styles for print only to see if you need to adjust the positioning of the image inside the paragraph. Maybe you need to expressly state its position in the paragraph instead of letting it go with the default.
I haven't gotten around to figuring out a workaround yet, but I think someone else in another thread suggested using a div or two divs or a div containing two divs. Whatever. One would contain the image and one would contain the content. The one containing the content would be positioned slightly to the right of the one containing the image.
Or you could try altering the styles for print only to see if you need to adjust the positioning of the image inside the paragraph. Maybe you need to expressly state its position in the paragraph instead of letting it go with the default.
Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
-
- Sr. Propeller Head
- Posts: 184
- Joined: Thu Aug 07, 2008 6:43 am
- Location: Massachusetts
Re: Background image missing from printed output (PDF)
Thanks Lisa.
I have tried specifying an explicit location within the paracgraph, but that didn't improve the result any.
As for the divs, is this something I can accomplish through the stylesheet? If so, how? (My knowledge of CSS is growing - in a large part thanks to Flare - but still rudimentary.)
Thanks again,
Todd
I have tried specifying an explicit location within the paracgraph, but that didn't improve the result any.
As for the divs, is this something I can accomplish through the stylesheet? If so, how? (My knowledge of CSS is growing - in a large part thanks to Flare - but still rudimentary.)
Thanks again,
Todd
Todd Richardson
Engineering Team Lead – Customer Experience | IntervalZero
Windows 10, Flare 2020
Engineering Team Lead – Customer Experience | IntervalZero
Windows 10, Flare 2020
Re: Background image missing from printed output (PDF)
Yes, you can create DIVs through the stylesheet. I haven't tried this yet, but in theory it should work... Create two DIVs. One will be the "container" DIV and will contain the image. The other will be the content DIV and will be positioned inside the other DIV. For the first DIV -- we'll call it noteCntr -- set its margin-left to 20px or something so that it's indented. Give it a background image just like you did for the paragraph. For the second DIV -- we'll call it noteText -- set its margin-left to 20px, or however much it needs to be moved to the right to avoid covering the background image that's in the first div. So if the bkg image is 30px wide then set a margin-left of 40px for the second DIV. (This is the amount it's indented inside the first DIV, not how much it's indented from the page margin.)
In the topic, you should be able to click the indent icon and in the screen that appears select the noteCntr DIV. The cursor will be inside that DIV (and the image should be visible behind the cursor). Click the indent icon again and in the screen that appears select the noteText DIV. The second DIV will be added with the cursor inside it. Enter the text for the note or whatever you're using this for.
I'm not entirely sure that the indent icon will work when you're inside one DIV, so you might have to open the topic in the Internal Text Editor and insert the code for the DIV manually.
I'll probably work on this myself for my project later today or tomorrow, so if you're not successful, let me know and if I figure out a workaround or a different process then I'll post it.
In the topic, you should be able to click the indent icon and in the screen that appears select the noteCntr DIV. The cursor will be inside that DIV (and the image should be visible behind the cursor). Click the indent icon again and in the screen that appears select the noteText DIV. The second DIV will be added with the cursor inside it. Enter the text for the note or whatever you're using this for.
I'm not entirely sure that the indent icon will work when you're inside one DIV, so you might have to open the topic in the Internal Text Editor and insert the code for the DIV manually.
I'll probably work on this myself for my project later today or tomorrow, so if you're not successful, let me know and if I figure out a workaround or a different process then I'll post it.
Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
-
- Sr. Propeller Head
- Posts: 184
- Joined: Thu Aug 07, 2008 6:43 am
- Location: Massachusetts
Re: Background image missing from printed output (PDF)
Thanks - I'll try to work this out when I get a chance.
Todd Richardson
Engineering Team Lead – Customer Experience | IntervalZero
Windows 10, Flare 2020
Engineering Team Lead – Customer Experience | IntervalZero
Windows 10, Flare 2020
-
- Propellus Maximus
- Posts: 1238
- Joined: Mon Feb 27, 2006 5:56 am
- Location: Melbourne, Australia
Re: Background image missing from printed output (PDF)
I noticed something similar when using Flare 4. If the option to resize images in the Advanced tab of the target is set ON I had some problems. This was a problem when upgrading projects from v3.1 that had images with sizes specified (yes, I reported the problem).
Might be worth checking.
Might be worth checking.
Margaret Hassall - Melbourne
Re: Background image missing from printed output (PDF)
Didn't solve the problem for me, unfortunately.
Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
-
- Propellus Maximus
- Posts: 1979
- Joined: Tue Nov 28, 2006 11:18 am
- Location: Crossroads of the West
- Contact:
Re: Background image missing from printed output (PDF)
Yeah. I have a problem that a single machine won't include background images that are set in my page layouts. They show up fine in the Flare interface, but when I build the PDF, the images aren't there. The images work fine on my other computers. I have yet to figure out why.
I tried the re-size option (disabling it in the target), but that didn't help this project, unfortunately.
I tried the re-size option (disabling it in the target), but that didn't help this project, unfortunately.
Re: Background image missing from printed output (PDF)
Ok, it took me a couple of hours but I think I have something that works. I haven't tested this extensively in my project, but it worked in one topic. This works in WebHelp output and PDF output. I have a separate issue where I'm not able to generate Word output so I can't test this there, but I'm guessing it won't work since Word doesn't like DIVs. If your help needs to be output to WebHelp, PDF, and Word, then you'll have to use tables, because that's the only element that works consistently in all three outputs.
Of course, all margins, padding, etc., in the following code can be adjusted. This is to work with a "note" image that's 33px by 40px. And it's no longer a background image -- it's now inserted directly in the topic instead of being called from the stylesheet. It just doesn't seem to recognize the background image method for some reason. So it's not quite as automated as I'd like.
Stylesheet code:
Topic code:
I couldn't figure out a way to insert the three DIVs through the Flare GUI. Once I had one set in the topic, though, I was able to select the container DIV, copy it, then paste it elsewhere in the topic or other topic and then edit the content of the text container.
Of course, all margins, padding, etc., in the following code can be adjusted. This is to work with a "note" image that's 33px by 40px. And it's no longer a background image -- it's now inserted directly in the topic instead of being called from the stylesheet. It just doesn't seem to recognize the background image method for some reason. So it's not quite as automated as I'd like.
Stylesheet code:
Code: Select all
div.noteCntr
{
vertical-align:top;
width:100%;
margin-left:40px;
margin-right:80px;
margin-bottom:6px;
}
div.noteImg
{
width:35px;
float:left;
padding-bottom:6px;
}
div.noteText
{
margin-left:45px;
padding-top:4px;
}
@media print
{
div.noteCntr
{
margin-bottom:12pt;
}
}
Code: Select all
<div class="noteCntr">
<div class="noteImg"><img src="../Resources/Images/imgNote.gif" /></div>
<div class="noteText">Note that the menu option is displayed without a checkmark next to it, indicating that the option is currently disabled.</div>
</div>
Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
-
- Sr. Propeller Head
- Posts: 184
- Joined: Thu Aug 07, 2008 6:43 am
- Location: Massachusetts
Re: Background image missing from printed output (PDF)
Wow - well done, Lisa! You have undoubtedly saved a great deal of work for many of us.
I will give this a try when I get a chance.
Todd
I will give this a try when I get a chance.
Todd
Todd Richardson
Engineering Team Lead – Customer Experience | IntervalZero
Windows 10, Flare 2020
Engineering Team Lead – Customer Experience | IntervalZero
Windows 10, Flare 2020