This is an archived forum post. The information may be outdated. Contact us if you have any questions.

Alignment issues

naidu5b0 wrote on 2014-05-28:
Hello,
We have the html which is rendering with proper alignment at our side but some alignment is missing when we send it to the pdf crowd.
The following is our html. The word 'Terms And Conditions' which is highlighted below is going to the top, so it is overlapping with other content.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Online Accounting Software</title>
</head>
<body style="font: 14px/1.4 tahoma, serif; margin: 0; padding: 0;">
<div style="margin: 0 auto; width: 800px">
<div id="sampleImage" style="background:url(../../images/sample.jpg) no-repeat center 430px;float:left;width:640px;">
<div style="width: 800px; border: 1px solid #f6f6f6; height: 2.97cm; min-height: 300px">
<div style="width: 800px; height: 120px; border-bottom: 1px solid #c6c6c6; line-height: 100px;">
<div style="height: 80px; line-height: 20px; padding: 10px 0 0 0px; width:100%; text-align: center;"><b style="color:#000; font: normal 12px Arial, Helvetica, sans-serif; font-size: 16px;font-weight: bold;">Democompany</b><br>Kundhanahalli Gate, White field Road<br>Bangalore - 5630023<br>Phone No.9949619152 Fax.080-4563848</div></div>

<div style="float: left; background-color: #047cb4; width: 800px; padding: 8px 0 8px 0; margin-bottom: 0px; text-align: center; color: #FFF;">
<b>Quotation</b></div>

<div style="background: none repeat scroll 0 0 #E6F5FB; folat: left; background: #e6f5fb; width: 800px; height: 215px">
<div style="width: 380px; padding: 10px; height: 160px; float: left;">
To <br>Sravan Kumar<br>AECS Layout, 6th lane<br>Bangalore - 560037<br>Karnataka<br> <br> 080-253-80793<br>accguru.sample@gmail.com
</div>
<div style="width: 390px; height: 160px; float: left;">
<div style="float: right; margin: 6px 10px 0 10px; width: 300px;">
<div style="float: left; width: 130px; text-align: right; padding: 0 10px 0 0;">
PAN</div>
:
<div style="float: right; width: 145px; text-align: left;">
0942FTOJ</div>
</div>
<div style="float: right; width: 300px; margin: 6px 10px 0 10px;">
<div style="float: left; width: 130px; text-align: right; padding: 0 10px 0 0;">
Service Tax Reg No</div>
:
<div style="float: right; width: 145px; text-align: left;">
SFXE23455</div>
</div>
<div style="float: right; width: 300px; margin: 6px 10px 0 10px;">
<div style="float: left; width: 130px; text-align: right; padding: 0 10px 0 0;">
Tin No</div>
:
<div style="float: right; width: 145px; text-align: left;">
RFD456</div>
</div>
<div style="float: right; width: 300px; margin: 6px 10px 0 10px;">
<div style="float: left; width: 130px; text-align: right; padding: 0 10px 0 0;">
Quote No</div>
:
<div style="float: right; width: 145px; text-align: left;">
1</div>
</div>
<div style="float: right; width: 300px; margin: 6px 10px 0 10px;">
<div style="float: left; width: 130px; text-align: right; padding: 0 10px 0 0;">
Dated</div>
:
<div style="float: right; width: 145px; text-align: left;">
01/05/14</div>
</div>
</div>
</div>

<div style="float: left; width: 800px; margin-bottom: 40px;">
<table cellpadding="0" cellspacing="0" border="0" width="800" style="float:left;"><tr style="float: left; background: #376274; color: #FFF; font-size: 12px; font-weight: 600; width: 100%;"><td width="60" style="padding: 8px 10px;">No</td><td width="305" style="padding: 8px 10px;">Description</td><td width="100" align="left" colspan="2" style="padding: 8px 20px;">Quantity</td><td width="100" align="right" style="padding: 8px 20px;">Unit Price</td><td width="120" align="right" style="padding: 8px 10px;">Amount in (Rs.)</td></tr><tr style="background: none repeat scroll 0 0 #F0F1F1; border-bottom: 1px solid #999999; color: #000000; float: left; font-size: 12px; width: 100%;"><td style="padding: 8px 10px;" width="60">1</td><td style="padding: 8px 10px;" width="305">Pen<br><small>Ultimate Pen<small></small></small></td><td align="right" width="110"><p style="text-align: right;">3.0</p></td><td width="28px"><p style="margin-left:5px;">pcs</p></td><td align="right" width="170">10.00</td><td align="right" width="170">30.00</td></tr><tr style="background: none repeat scroll 0 0 #F0F1F1; border-bottom: 1px solid #999999; color: #000000; float: left; font-size: 12px; width: 100%;"><td style="padding: 8px 10px;" width="60">2</td><td style="padding: 8px 10px;" width="305">Stapler<br><small>Ultimate Stapler<small></small></small></td><td align="right" width="110"><p style="text-align: right;">3.0</p></td><td width="28px"><p style="margin-left:5px;">dzn</p></td><td align="right" width="170">5.00</td><td align="right" width="170">15.00</td></tr><tr style="border-left: 1px solid rgb(0, 0, 0); float: right; width: 250px; background: none repeat scroll 0 0 #E8F5FD; border-bottom: 1px solid #999999; padding: 3px 8px 3px 15px; font-size: 12px;"><td width="100px" style="padding-bottom: 10px;">Total</td><td width="140px" style="text-align: right; padding-bottom: 10px;">Rs. 45.00</td></tr><tr style="clear: both"></tr><tr style="border-left: 1px solid rgb(0, 0, 0); float: right; width: 250px; background: none repeat scroll 0 0 #E8F5FD; border-bottom: 1px solid #999999; padding: 3px 8px 3px 15px; font-size: 12px;"><td width="100px" style="padding-bottom: 10px;">Vat5@5.0%</td><td width="140px" style="text-align: right; padding-bottom: 10px;">Rs. 2.25</td></tr><tr style="clear: both"></tr><tr style="border-left: 1px solid rgb(0, 0, 0); float: right; width: 250px;background: none repeat scroll 0 0 #E8F5FD; border-bottom: 1px solid #999999; padding: 3px 8px 3px 15px; font-size: 12px; font-weight: bold;"><td width="100px" style="padding-bottom: 10px;">INR Total</td><td width="140px" style="text-align: right; padding-bottom: 10px;">Rs. 47.25</td></tr><tr><td style="font-size: 14px;"><b> IN WORDS: </b>RUPEES FORTY SEVEN AND TWENTY FIVE PAISA ONLY</td></tr></table>
<div> <b>Note :</b>
Imported brand<br>
</div>
</div>
<div>
<b>Terms and Conditions :</b>
</div>
<div style="height:60px">
${termsAndConditions}
</div>
<div>Director</div>
<div id="quoteFooter" style="background-color: #D6DAD7; bottom: 0; position: fixed; text-align: center; align: center; width: 800px; z-index: 200;">Copyright @ 2010-2014 <b>www.Democompany.com</b> All Rights Reserved.</div>
<div style="clear: both"></div>
</div>
</div>
</div>
</body>
</html>
support wrote on 2014-05-28:
Hello,

What settings are you using to generate PDF? I tried to convert your code and the result seems ok to me - please see the attached PDF.
naidu5b0 wrote on 2014-06-04:
We are not using any specific pdf settings.
support wrote on 2014-06-05:
Hello,

Could you please post here your code which calls the API?
admin_kpg wrote on 2017-11-23:
Hello,

I am facing a similar issue with PDF crowd( beta 4.0).

Actually, PDF crowd is squeezing the content of my pdf by removing some of the padding.

As you can see in the file I sent you be e-mail (example.pdf), all the 'ggg___ggg' text is right next to the border whereas it should be (see the original in example.html) 25px far from it.

Texts are also much closer to each other that they should be (padding top and bottom are also affected)

I thank you in advance for your help.

Sincerely yours
support wrote on 2017-11-23:
Hi,

When I compare the PDF to what is rendered in a browser, I do not see any significant difference. Could you please post here a screenshot and highlight the issue with the border?
admin_kpg wrote on 2017-11-23:
Hello,

I realised I had an issue with my html.

Sorry for the inconveniance.

Thank you for help.