Div element size changes when printing in Chrome

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;
}