2

I'm trying to print a business card using HTML and CSS. The user will be able to print using his browser.

When I print in an A4 format there's no problem. When I print it on card paper (cr80 3in by 2in) nothing printed.

What can I do to make it work?

screenshot of the print preview

this is a preview of the print. The frame will hold a qr code and a label.

The code follows. The image src will load with ajax later.

<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script>
$(function(){
    function printMe() {
      window.print()
    }
    $("#badge").click(function(){
      printMe();
    });
});
</script>

<title>Badge</title>
<style type="text/css">

  @media print {
    .page-break  { display: block; page-break-before: always; }
  }
  *{
    margin:0px;
    padding:0px;
  }
  #details{
    position:relative;
    top:0.8in;
    height: 1.1in;
    width:100%;
    overflow:hidden;
  }
  #badge{
    width:3in;
    height:2in;
    border:1px solid gray;
    //background-image:url("badge-background.png");
  }
  #qr_code {
    margin-top:2px;
    float:left;
    height:1.1in;
    width: 1.1in;
  }
  #text{
    float:right;
    margin:0 auto;
    width:180px;
  }
  #first_name{
    position:relative;
    top:0.3in;
    font-size:0.4in;
  }
</style>
</head>
<body>
    <div id="badge" class="page-break">
      <div id="details">
        <div id="qr_code"><img src="" id="qr_code_image" width="105" heigth="105"/></div>
        <div id="text"><span id="first_name"></span></div>
      </div>
    </div>

</body>
</html>
4

0 回答 0