I am writing a page for printing, and the styling is different from the rest of the pages in my application. In fact, I'm trying to create a wallet card with login information so that the user can print, cut and save with them.
I just tried to print my entry card with chrome and IE. IE getting this is great, but chrome unfortunately makes the map too big. Not sure if this is important (I'm not a CSS expert), but I tried to use different units; inches, pixels and dots.
When I use the developer tools in chrome, I see that the pixels are calculated correctly. I checked this to see if the browser adds extra padding inside the div.
Here is what I have for entry 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 Name:</span> <span class="fieldValue" id="spnContactsName"></span> </div> </div> </div>
Here is my CSS style. I am trying to achieve a physical size of 3.5 "x 2", which is the standard size of a US business card.
#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 when I don't need to use a lot of browser-style rules, but in this case it may not be possible.
Do I need some CSS reset for its correct size for printing in any browser?
UPDATE
Chrome displays my html as a PDF document when it prints. I noticed that the chrome print dialog is just a modal window on top of the page. I checked the elements in the developer tools, and print preview is a pdf document. Html provides the source URL (chrome: //my_path/print.pdf), which is the complete document that is printed by the printer.
SO, a long story; my problem seems to be how chrome outputs my html in pdf format. Is there a way to control how it renders html or maybe some chrome-friendly CSS that I could use?