title: HTML CSS print card issue
body: <p>I'm trying to print a business card using HTML and CSS. The user will be able to print using his browser. </p>
  
  <p>When I print in an A4 format there's no problem. When I print it on card paper (cr80 3in by 2in) nothing printed.  </p>
  
  <p>What can I do to make it work?</p>
  
  <p><a href="http://i.stack.imgur.com/R5SqZ.png" rel="nofollow">screenshot of the print preview</a></p>
  
  <p>this is a preview of the print.  The frame will hold a qr code and a label.</p>
  
  <p>The code follows. The image src will load with ajax later.</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="http://code.jquery.com/jquery-1.8.3.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(function(){
      function printMe() {
        window.print()
      }
      $("#badge").click(function(){
        printMe();
      });
  });
  &lt;/script&gt;
  
  &lt;title&gt;Badge&lt;/title&gt;
  &lt;style type="text/css"&gt;
  
    @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;
    }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="badge" class="page-break"&gt;
        &lt;div id="details"&gt;
          &lt;div id="qr_code"&gt;&lt;img src="" id="qr_code_image" width="105" heigth="105"/&gt;&lt;/div&gt;
          &lt;div id="text"&gt;&lt;span id="first_name"&gt;&lt;/span&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>