DIV background works in HTML5, not PDF

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
AlanKearns
Sr. Propeller Head
Posts: 103
Joined: Thu Sep 11, 2014 2:06 am

DIV background works in HTML5, not PDF

Post by AlanKearns »

This works to do the attached note design in HTML5, but in PDF I get the border but not the 2 things in the 'background' - anyone know why that might be?

Code: Select all

div.Note
{

   background: "url(note.png) 20px 12px no-repeat, linear-gradient(to right, #D6E3F4 60px, white 61px)";
   border: solid 1px #426DA9;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px; 
   padding: 5px 20px 10px 70px;
}
You do not have the required permissions to view the files attached to this post.
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: DIV background works in HTML5, not PDF

Post by Psider »

It's possible the css isn't supported for print output. I seem to remember other posts that say not everything is, but that there's no documentation for what's supported.

Or maybe just the shortcut syntax isn't? You could try spelling out all the background properties, rather than the shorthand.
AlanKearns
Sr. Propeller Head
Posts: 103
Joined: Thu Sep 11, 2014 2:06 am

Re: DIV background works in HTML5, not PDF

Post by AlanKearns »

Thanks - it seems to be something about the gradient. Lose that, and the icon shows.
AlanKearns
Sr. Propeller Head
Posts: 103
Joined: Thu Sep 11, 2014 2:06 am

Re: DIV background works in HTML5, not PDF

Post by AlanKearns »

So if there isn't a way to have both an icon and a linear gradient at once in PDF, any suggestions for how I can do this? Bearing in mind I can't use a table, as I am mapping these notes from Markdown blockquotes to a DIV or a P or a class of either.

For example is there a way to do a single page-high PNG of the shading with an icon near the top, which gets cropped to the height of the text in the box?
Post Reply