Re: Re: CSS div positioning bug

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]