CSS div positioning bug

This topic has 8 replies, 3 voices, and was last updated May 26, 2010
17:54:27 by Anonymous.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
Anonymous
April 12, 2010 at 16:26
#26368
Hello,

I am doing some test with absolute positioning inside relative divs. Something like this

outer div 1

inner-1

inner-2

outer div 2

inner-1

inner-2

On the HTML each div is rendered one after the other and the inner divs are displayed INSIDE their outer divs.

Here is the sample html source code that I am trying to render with pd4ml.

<br /> <html><br /> <head><br /> <style type="text/css"><br /> h2 {<br /> page-break-after: always;<br /> }<br /> </style><br /> <jsp:include page="../../includes/head.jsp" /><br /> </head><br /> <body><br /> <center><br /> <div style=" background-color: aqua; width:100px; border-color: black; height:150px; border-width: 3px; border-style: solid;" ><br /> <div style="background-color: green; ">CONTRACHEQUE 1</div><br /> <div style="position: relative; border-color: red; border-width: 3px; border-style: solid;"><br /> <div style=" position: absolute; left: 0; top: 0; border-color: maroon; border-width: 3px; border-style: solid;"><br /> div absolute da imagem<br /> </div><br /> <div style="background-color: BLUE; position: absolute; left: 0; top: 0; border-color: yellow; border-width: 3px; border-style: solid;"><br /> <div id="destinatario" class="destinatario" ><br /> <p class="textoVerso">MARCOS URATA</p><br /> <p class="textoVerso">ENDERECO</p><br /> </div><br /> </div><br /> </div><br /> </div><br /> <h2> </h2><br /> <div style=" margin-top:5px; background-color: black; width:100px; height:150px; border-color: green; border-width: 3px; border-style: solid;"><br /> <div style="background-color: yellow; ">CONTRACHEQUE 2</div><br /> <div style="position: relative; border-color: red; border-width: 3px; border-style: solid;"><br /> <div style=" position: absolute; left: 0; top: 0; border-color: maroon; border-width: 3px; border-style: solid;"><br /> div absolute da imagem<br /> </div><br /> <div style="background-color: yellow; position: absolute; left: 0; top: 0;border-color: yellow; border-width: 3px; border-style: solid;"><br /> <div id="destinatario" class="destinatario" ><br /> <p class="textoVerso">MARCOS URATA</p><br /> <p class="textoVerso">ENDERECO</p><br /> </div><br /> </div><br /> </div><br /> </div><br /> <h2> </h2><br /> <div style="margin-top:5px; background-color: lime; width:100px; height:150px; border-color:fuchsia; border-width: 3px; border-style: solid;"><br /> <div style="background-color: silver; ">CONTRACHEQUE 3</div><br /> <div style="position: relative; border-color: red; border-width: 3px; border-style: solid;"><br /> <div style=" position: absolute; left: 0; top: 0; border-color: maroon; border-width: 3px; border-style: solid;"><br /> div absolute da imagem<br /> </div><br /> <div style="background-color: silver; position: absolute; left: 0; top: 0; border-color: yellow; border-width: 3px; border-style: solid;"><br /> <div id="destinatario" class="destinatario" ><br /> <p class="textoVerso">MARCOS URATA</p><br /> <p class="textoVerso">ENDERECO</p><br /> </div><br /> </div><br /> </div><br /> </div><br /> </center><br /> </body><br /> <br /> </html><br />

And the resulting pdf generated by pd4ml:
Anonymous
April 12, 2010 at 16:37
#27954
Hello,

I am doing some test with absolute positioning inside relative divs. Something like this

outer div 1

inner-1

inner-2

outer div 2

inner-1

inner-2

On the HTML each div is rendered one after the other and the inner divs are displayed INSIDE their outer divs.

Here is the sample html source code that I am trying to render with pd4ml.
[attachment=C:pd4ml.jpg][/attachment]

<br /> <html><br /> <head><br /> <style type="text/css"><br /> h2 {<br /> page-break-after: always;<br /> }<br /> </style><br /> <jsp:include page="../../includes/head.jsp" /><br /> </head><br /> <body><br /> <center><br /> <div style=" background-color: aqua; width:100px; border-color: black; height:150px; border-width: 3px; border-style: solid;" ><br /> <div style="background-color: green; ">CONTRACHEQUE 1</div><br /> <div style="position: relative; border-color: red; border-width: 3px; border-style: solid;"><br /> <div style=" position: absolute; left: 0; top: 0; border-color: maroon; border-width: 3px; border-style: solid;"><br /> div absolute da imagem<br /> </div><br /> <div style="background-color: BLUE; position: absolute; left: 0; top: 0; border-color: yellow; border-width: 3px; border-style: solid;"><br /> <div id="destinatario" class="destinatario" ><br /> <p class="textoVerso">MARCOS URATA</p><br /> <p class="textoVerso">ENDERECO</p><br /> </div><br /> </div><br /> </div><br /> </div><br /> <h2> </h2><br /> <div style=" margin-top:5px; background-color: black; width:100px; height:150px; border-color: green; border-width: 3px; border-style: solid;"><br /> <div style="background-color: yellow; ">CONTRACHEQUE 2</div><br /> <div style="position: relative; border-color: red; border-width: 3px; border-style: solid;"><br /> <div style=" position: absolute; left: 0; top: 0; border-color: maroon; border-width: 3px; border-style: solid;"><br /> div absolute da imagem<br /> </div><br /> <div style="background-color: yellow; position: absolute; left: 0; top: 0;border-color: yellow; border-width: 3px; border-style: solid;"><br /> <div id="destinatario" class="destinatario" ><br /> <p class="textoVerso">MARCOS URATA</p><br /> <p class="textoVerso">ENDERECO</p><br /> </div><br /> </div><br /> </div><br /> </div><br /> <h2> </h2><br /> <div style="margin-top:5px; background-color: lime; width:100px; height:150px; border-color:fuchsia; border-width: 3px; border-style: solid;"><br /> <div style="background-color: silver; ">CONTRACHEQUE 3</div><br /> <div style="position: relative; border-color: red; border-width: 3px; border-style: solid;"><br /> <div style=" position: absolute; left: 0; top: 0; border-color: maroon; border-width: 3px; border-style: solid;"><br /> div absolute da imagem<br /> </div><br /> <div style="background-color: silver; position: absolute; left: 0; top: 0; border-color: yellow; border-width: 3px; border-style: solid;"><br /> <div id="destinatario" class="destinatario" ><br /> <p class="textoVerso">MARCOS URATA</p><br /> <p class="textoVerso">ENDERECO</p><br /> </div><br /> </div><br /> </div><br /> </div><br /> </center><br /> </body><br /> <br /> </html><br />

And the resulting pdf generated by pd4ml:
[attachment=C:pd4ml.pdf][/attachment]
PD4ML
April 12, 2010 at 17:17
#27955
Unfortunately it did not attach your document to the message. But I guess the document absolute positioning suffers from the explicit page breaks.

Starting with v360fx1b1 PD4ML has 2 absolute positioning modes: document- and page-centric.

You may switch to another mode with

-Dpd4ml.absolute.address.space=document

JVM parameter, PD4ML API call

[language=java:ilwg5xsw]Map m = new HashMap();
m.put(PD4Constants.PD4ML_ABSOLUTE_ADDRESS_SPACE, “document”);
pd4ml.setDynamicParams(m);[/language:ilwg5xsw]

or with custom JSP tag, nested to

[language=xml:ilwg5xsw] [/language:ilwg5xsw]

As a result you’ll get a document where absolute positioned blocks match relatively positioned blocks. But PD4ML also requires you explicitly define block dimensions.
Anonymous
April 12, 2010 at 17:32
#27956
Thank you for the quick reply.

I tried the parameter setting configuration, but it still did not work.

There is no “choose file” and “add the file” buttons to add a message attachment, so I am pasting below the source code of the jsp. If there is another way to send you the attachment files, I will be glad to send.

<%@ taglib uri="/WEB-INF/pd4ml.tld" prefix="pd4ml" %><%@taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %><%@page contentType="application/pdf" %><%response.setHeader("Cache-Control","no-cache"); //HTTP 1.1 response.setHeader("Pragma","no-cache"); //HTTP 1.0 response.setDateHeader ("Expires", 0); //prevents caching at the proxy server %>

CONTRACHEQUE 1

div absolute da imagem

MARCOS URATA

ENDERECO

CONTRACHEQUE 2

div absolute da imagem

MARCOS URATA

ENDERECO

CONTRACHEQUE 3

div absolute da imagem

MARCOS URATA

ENDERECO
PD4ML
April 12, 2010 at 17:41
#27957
Do you use PD4ML v360 or v360fx1b1? It is important.

You may send the file by email to support pd4ml.com
marcos.urata
April 12, 2010 at 17:50
#27958
HTML print screen

[attachment=1:37qgaaen]pd4ml.JPG[/attachment:37qgaaen]

Resulting PDF
PD4ML
April 12, 2010 at 17:55
#27959
As I see from the PDF document metadata you use v360, which does not “understand” the configuration switches I described. Please give a try to v360fx1b1.

But again: in order to get identical layouts, you need to explicitly specify block heights and widths.
marcos.urata
April 12, 2010 at 17:57
#27960
Do you use PD4ML v360 or v360fx1b1? It is important.

Sorry about that. Just now I saw that there is a new version available!

Now it WORKED PROPERLY!

Thank you!

Here is new PDF:
Anonymous
May 26, 2010 at 17:54
#27961
Hello,

I have pd4ml.pro.trial.360fx1 version and class PD4Constants doesn’t contain PD4ML_ABSOLUTE_ADDRESS_SPACE.
Is it possible?

Regards,
pk
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

The forum ‘HTML/CSS rendering issues’ is closed to new topics and replies.