search

vikrambalye / dompdf

Automatically exported from code.google.com/p/dompdf
0 stars 0 forks source link

There's an inch of space at the top and to the left no matter what I do #248

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago 
No matter what I do, everything's offset by about an inch at the top and to the 
left. I have relatively, absolutely, and statically positioned elements and 
they're all perfectly aligned, it's just there's extra space at the top and to 
the left. I have 0 margins and padding specified for the body. I'm using 
version 0.6.0 Beta2.  Here's the HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Insert title here</title>
    </head>
    <body style="margin: 0; padding: 0; text-align: left;">
        <div style="position: relative; margin: 0; width: 790px; height: 377px;">
            <img alt="" src="pdf_templates/ticket_template/top.jpg" width="790" height="377" style="position: absolute; top: 0; left: 0; z-index: 0;" />
            <div style="position: absolute; top: 164px; left: 177px; font-size: 12px; z-index: 1;">{$INVOICE_NUM}</div>
            <div style="position: absolute; top: 193px; left: 177px; font-size: 12px; z-index: 1;">{$DATE}</div>
            <div style="position: absolute; top: 193px; left: 434px; font-size: 12px; z-index: 1;">{$CUSTOMER_INFO}</div>
        </div>
        <div style="margin-left: 22px; margin-bottom: 50px;">{$PRODUCTS}</div>
        <div>
            <img alt="" src="pdf_templates/ticket_template/bottom.jpg" width="790" height="526" style="z-index: 0;" />
        </div>
    </body>
</html>

Original issue reported on code.google.com by wbeau...@gmail.com on 24 Mar 2011 at 1:00

GoogleCodeExporter commented 9 years ago 
I'm having the same problem, this looks like a bug to me.

I did try a CSS reset which helped a little bit but the problem came back.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    font-family:Arial, Helvetica, sans-serif;
}

Original comment by jase.wil...@gmail.com on 25 Mar 2011 at 9:40

GoogleCodeExporter commented 9 years ago 
Hello, you need to set the page's margin like this :

@page {
  margin: 0;
}

You can also set the page's size with this, like here : 
http://www.w3.org/TR/css3-page/#page-size-prop

If it is OK, I'll close this issue.

Original comment by fabien.menager on 25 Mar 2011 at 3:44

GoogleCodeExporter commented 9 years ago 
I added this to the HTML head:

<style media="print" type="text/css">
/*<![CDATA[*/
@page {
     margin: 0;
}
/*]]>*/
</style>

But it didn't work. I assume there's something amiss with how I've written the 
CSS.

Original comment by wbeau...@gmail.com on 25 Mar 2011 at 4:06

GoogleCodeExporter commented 9 years ago 
fabien.maneger 

We have both tryed that and it doesnt work, it makes no difference.

I tryed both @page and body and  gave them both margin:0; and it made no 
difference.

My CSS is in the head and not an external file, does this matter?

Original comment by jase.wil...@gmail.com on 25 Mar 2011 at 4:25

GoogleCodeExporter commented 9 years ago 
wbeau...@gmail.com

I've just found that sizing some stuff such as the wrapper div and the header 
by mm and not pixels has pushed it up to the top again.

this could be a temporary fix but for now it kind of works.
Apart from that im not making any progress on this.

Original comment by jase.wil...@gmail.com on 25 Mar 2011 at 4:36

GoogleCodeExporter commented 9 years ago 
Perhaps the page margins should be set to 0 by default. On initial read I don't 
see anything outlining the default page margins for a printed page in the spec. 
So far as I can tell it should probably be 0.

Plus, using this value would avoid any confusion regarding unexpected margins 
in the PDF.

Location of the CSS should not matter. We'll have to look into the other claims 
of misplacement.

Original comment by eclecticgeek on 25 Mar 2011 at 6:00

GoogleCodeExporter commented 9 years ago 
Did you try without the 

    media="print"

in your style tag ? By default, dompdf uses the media screen (I think this 
could be discussed)

Original comment by fabien.menager on 26 Mar 2011 at 5:02

GoogleCodeExporter commented 9 years ago 
Is there a solution to this or is it still an open issue?

Original comment by jase.wil...@gmail.com on 28 Mar 2011 at 8:34

GoogleCodeExporter commented 9 years ago 
The solution provided by Fabien works when checked against a simple test 
document. Can you post a sample of your document, including the fix, that does 
not work?

Original comment by eclecticgeek on 28 Mar 2011 at 7:30

GoogleCodeExporter commented 9 years ago 
I'm closing this issue as we didn't have more info for one month, I'll reopen 
it if needed.

Original comment by fabien.menager on 2 May 2011 at 9:47

GoogleCodeExporter commented 9 years ago

Original comment by eclecticgeek on 30 May 2013 at 5:15