Forum How do I...?

use <img> or content: url() in static flow?

bynan
I have this code:

@page { @top { content: flow(header) } @bottom { content: flow(footer) } } #divHeader { flow: static(header) } #divFooter { flow: static(footer) }

Then I have #divHeader and #divFooter HTML that can have tables and page numbering and other stuff and it all works great. However, if I try to put <img> in there, or classes with content: url(), then the images never render in the PDF.

are images not compatible with static flow like that?
mikeday
That should work, are the margins big enough? Are there any errors in the Prince output log about the images failing to load?
bynan
I'll check the margins. I'm using the command line parser, and all I get is "fin|success" and a PDF that looks correct except for the missing images.
bynan
hmmm. i guess i'm not sure what you mean by "are the margins big enough"? i'm not setting any css margins if that's what you mean.

also, if i comment out the @page CSS above, the <img> and content:url() images show up just fine...
mikeday
You may need to increase the size of the margin-top and margin-bottom for the @page rule to ensure that the image can fit.
bynan
you mean something like

@page { margin-top:100px; margin-bottom:100px; @top { content: flow(header) } @bottom { content: flow(footer) } } #divHeader { flow: static(header) } #divFooter { flow: static(footer) }

i tried that and it didn't make a difference
mikeday
Would you be able to email me (mikeday@yeslogic.com) some HTML and CSS demonstrating the problem?
bynan
Thanks for the email response. Setting the margin to be bigger than that image size did the trick!