Question 167367 in Html Question posted in
Some basic documentation can be found here.

Html – CSS print shows white Bar

I’m trying to create an ticket width the dimensions (203mmx82mm). This is in HTML and CSS via python (cgi, jinja2, weasyprint) the template will be converted to an pdf, which the user can download via a button on the website.

The HTML Body:

<body>
    <div id="ticket"></div>
</body>

And my CSS:

body{
    margin: 0;
    padding: 0;
    height: 82mm;
    width: 203mm;
    background: red;
}
#ticket{
    height: 82mm;
    width: 203mm;
    background-color: red;
    margin: 0 auto;
}
@page{
    size: 203mm 82mm;
    margin: 0;
    padding: 0;
}

I’ve chosen red to see it better. Even when the Body has the same color as the ticket, I still get an odd border in the printpreview (see Image blow)
enter image description here

The white bar is also seen on the actual pdf.
Can anyone help me?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After deleting the

    @page{
    size: 203mm 82mm;
    margin: 0;
    padding: 0;
}

    and a pc restart i inserted agian the snippet. It works now.


  2. 0

    The default margins on the page are removed by setting the margin attribute of the @page rule to 0. Similar to this, removing the default margins from the body element requires setting the margin property of the body rule to 0. By doing this, you should guarantee that your ticket fills the whole page and that the white bar is gone.

    Additionally, you can think about setting the #ticket element’s box-sizing attribute to border-box, which includes the padding and border in the element’s total width and height so you won’t have to worry about them influencing the ticket’s overall dimensions. Here is your CSS changed with the following changes:

    @page {
  margin: 0;
}

body {
  margin: 0;
  padding: 0;
  height: 82 mm;
  width: 203 mm;
  background: red;
}

#ticket {
  height: 82 mm;
  width: 203 mm;
  background color: red;
  margin: 0 auto;
  box-sizing: border-box;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search