Hi all -
I seem to be having some trouble with transparent backgrounds.
Html: http://www.socialcens.us/princeDemo/princeDemo.html
Pdf generated: http://www.socialcens.us/princeDemo/princeDemo.pdf


In this case, I would expect the container background to fade to white as it goes transparent. This is the behavior found in all major browsers. However, in prince, the container background fades into the body background, meaning I've got "stripey_bg.gif" showing up in the middle of my container.

Furthermore, if I wrap "container" with another div with a background of "#FFFFFF", container's background *still* fades into the body background, rendering the extra div transparent.

I've checked that my html validated xhtml strict, and my css is valid as well.

Has anyone got any thoughts as to what issue I am running into?
Thanks for any and all help

-Tristan[/url]

Edited 22 Oct 2009 by TristanS

Hey all - that last example of mine was miserable. My apologies.
Here, you can find a link to the actual HTML being used:
http://www.socialcens.us/princeDemo/princeDemo.html

And an example of the PDF generated with Prince 6 - Should be noted that there isnt much difference with Prince 7.

http://www.socialcens.us/princeDemo/princeDemo.pdf


Thank you for any help you can provide - I am really quite stumped.

I should note that setting the "container" to an absurdly tall height creates a pdf that looks perfect.

That's a very interesting document, but I'm not sure which background you are referring to. Is it possible to simplify it a little bit for testing purposes?

Heh, looking back at it, you are correct - that was a miserable example.

I've simplified it as best I could while maintaining original document integrity.

Html here:
http://www.socialcens.us/princeDemoSimple/princeDemo.html
PDF here:
http://www.socialcens.us/princeDemoSimple/princeDemo.pdf

Notice that in the html view, we have a clean white background extending through the bottom of our content.
Notice also that we have two background attributes set - one on body, and one on #container. The body background is gray, while the #container background is white.

In PDF view, #container does not maintain its setting of having a white background. It goes transparent, displaying the body's background instead of what it should be.
Notice further that on page breaks (pages 2,3), we see the body's (gray) background instead of container's (white) background.

What I believe is happening is #container is becoming zero-height.
I have attempted the tricks I know to fix this, but have not arrived at a solution.

Hopefully this new demo is a bit clearer. Thanks for your quick response and any help!

The issue here seems to be because the container only holds floats, that are extending outside the container and leaving it to collapse to zero height. Specifying "overflow: hidden" on the container element solves this problem. Prince does behave differently to browsers for this document, though.

Hrmm. I would have thought the following rules would have had the same effect:

		
#container:after {
content: ""; 
display: block; 
height: 0; 
clear: both;
}

I believe that prince supports the :after selector, but I may be mistaken.
Overflow: hidden gets me much closer to where I need to be, and for that, I am thankful. It still seems that Prince is splitting up the container div on each page, causing the background color to show after the content ends. Perhaps I can come up with a workaround for that in the near future.

Thanks again for your insight.

The :after pseudo-element selector is supported, as you can see by using content: "hello", which will appear at the end of the last page. It is true that the splitting behaviour is rather unintuitive when floats are involved.

To get a reasonable look, I ended up having to add in print-only styles; something I was trying to avoid, but oh wells.

Thanks for the help