Div element size changes when printing in Chrome

Question

I'm writing a page that is meant to be printed and styling is different from the rest of the pages in my application. Essentially I'm trying to create a wallet card with login information for a user to print out, cut, and keep with them.

I've only tried printing my login card with chrome and IE. IE get's it perfectly but chrome unfortunately makes the card too big. Not sure if it matters (I'm not a CSS expert) but I tried using different units; inches, pixels, and points.

When I use the developer tools in chrome, I see that the pixels are calculated correctly. I checked that to see if the browser was adding additional padding inside the div.

Here's what I have for the login card elements.

<div id="divLoginCard">
    <div id="divLoginCardHeader">
        <h3>User Login - <span id="spnUserName"></span></h3>
    </div>
    <div id="divLoginCardContent">
        <div class="fieldRow">
            <span class="fieldLabel">Website:</span>
            <span class="fieldValue">http://www.xxx.zzz</span>
        </div>
        <div class="fieldRow">
            <span class="fieldLabel">ID:</span>
            <span class="fieldValue" id="spnUserID"></span>
        </div>
        <div class="fieldRow">
            <span class="fieldLabel">Contact's Name:</span>
            <span class="fieldValue" id="spnContactsName"></span>
        </div>        
    </div>
</div>

Here is my CSS styling. I'm trying to achieve a physical size of 3.5" x 2" which is a standard US business card size.

#divLoginCard
{
    margin:0 auto;
    width:252pt;
    height:144pt;
    border-style:dashed;
    border-color:gray;
}

#divLoginCardHeader
{
    text-align:center;
}

#divLoginCardContent
{
    margin-left:25px;
    margin-right:15px;
    padding-top:15px;
}

.fieldRow
{
    margin-bottom: 3px;
    display: table;
    width: 100%;
}

.fieldLabel
{
    font-weight: bold;
    width: 96px;
    text-align: left;
    display: table-cell;
}

.fieldValue
{
    min-width: 100%;
    display: table-cell;
    word-wrap: break-word;
    width: 200px;
}

body
{
    font-family:Arial;
}

Naturally, I would prefer to have a cross browser solution for this where I don't have to use a lot of browser specific style rules but that may not be possible in this case.

Do I need some sort of CSS reset in order to properly size this for printing with any browser?

UPDATE

Chrome renders my html as a PDF document when it is printed. I noticed that the print dialog in chrome is simply a modal window on top of the page. I checked out the elements in developer tools and the print preview is a pdf document. The html provides the source URL (chrome://my_path/print.pdf) which is the full document that is printed by a printer.

SO, long story short; my issue seems to be how chrome renders my html as pdf. Is there a way to control how it renders the html or maybe some chrome friendly CSS that I could use?

Answer 1

Try the @media print specification in your CSS. Chrome is probably overriding your on-screen CSS with print CSS that sizes the elements to fit the printed page.

@media print { 
   /* put your fixes here */
}

I think this is more likely to be the issue than that Chrome is translating to pdf.