1 reply [Last post]
ttsprez's picture
Last seen: 4 years 10 weeks ago
Timezone: GMT-6
Joined: 2018-11-13
Posts: 1
Points: 2

Here is a link to my CSS/HTML file I'm working with

This file is used by PHP code to generate a form image on an 8.5 x 11 page with absolute position div's that contain field names which are replaced with customer data.

On one of my machines using Chrome, the page presents to the browser and in print preview as I intended, with the form centered to proper margins and field names aligned to each area.

On another machine using Chrome also, the image on the page presents as intended in both the browser and print preview, but the absolute position field name present as if they are smaller or like the image is oversized.

I understand each machine, browser and display image is different, so I'm wondering if it is possible to use CSS to establish a standard presentable size, like a full page view centered in the browser window, for all browsers and then somehow lock in or coincide the absolute positioning with that so that it presents the same no matter what browser and prints to an 8.5 x 11 as intended. I have seen where some pdf docs present like this to the browser. Just not sure what it takes to do it or if it will work with what I'm needing.

Here are a few screenshots of examples that have presented on my machines. Like I said on one of my machines, this file works great. Chrome seems to work best. I've matched the resolution and chrome versions on both of these machines, however, the displays are different. One is my 55" tv and the other is the display on my laptop. I'm sure the difference in size has a lot to do with how this is working, but thus the reason for wanting to standardize this. So it looks and works the way it should no matter what the customer views it on.

Good Presentation and printing

Bad Presentation and Printing

Here is a copy of the CSS/HTML code I'm using in the URL at the beginning of the post:

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="generator" content="losttitleconnection">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
.formData {
    padding-top: 90px;
    text-align: center;
.stl_01 {
	position: absolute;
	white-space: nowrap;
.stl_04 {
	width: 100%;
        height: 100%;
	clip: rect(0em,250em,250em,0em);
        position: absolute;margin-top: 0px;margin-left:0px;
	pointer-events: none;
.pageBreak {page-break-after: always;}
<body style="margin:0;">
<div class="stl_04">
<img height="1465"  width="1110" alt="" src="https://pdforms.losttitleconnection.net/TITLAPP-1.png"/>
<div class="stl_01" style="top:2.8em; left:07.41em;">
<div class="formData">VehVin</div>
<div class="stl_01" style="top:2.8em; left:20.81em;">
<div class="formData">VehYr</div>
<div class="stl_01" style="top:2.8em; left:26.39em;">
<div class="formData">VehMk</div>
<div class="stl_01" style="top:2.8em; left:32.5em;">
<div class="formData">VehBdy</div>
<div class="stl_01" style="top:2.8em; left:37.9em;">
<div class="formData">VehMod</div>
<div class="stl_01" style="top:5.321em; left:3.41em;">
<div class="formData">VehPlt</div>
<div class="stl_01" style="top:5.321em; left:12.41em;">
<div class="formData">VehMil</div>
<div class="stl_01" style="top:8.321em; left:3.41em;">
<div class="formData">VehWght</div>
<div class="stl_01" style="top:8.321em; left:12.41em;">
<div class="formData">VehCry</div>
<div class="stl_01" style="top:10.80em; left:16.41em;">
<div class="formData">IDNum</div>
<div class="stl_01" style="top:12.321em; left:18.41em;">
<div class="formData">IDOrgn</div>
<div class="stl_01" style="top:12.321em; left:38.41em;">
<div class="formData">PassOrgn</div>
<div class="stl_01" style="top:17.321em; left:3.41em;">
<div class="formData">Own1st</div>
<div class="stl_01" style="top:17.321em; left:18.41em;">
<div class="formData">OwnMid</div>
<div class="stl_01" style="top:17.321em; left:29.41em;">
<div class="formData">OwnLst</div>
<div class="stl_01" style="top:19.321em; left:12.41em;">
<div class="formData">OwnEnty</div>
<div class="stl_01" style="top:19.321em; left:42.41em;">
<div class="formData">OwnCnty</div>
<div class="stl_01" style="top:24.21em; left:5.41em;">
<div class="formData">OwnAdd</div>
<div class="stl_01" style="top:24.21em; left:24.41em;">
<div class="formData">OwnCty</div>
<div class="stl_01" style="top:24.21em; left:38.41em;">
<div class="formData">OwnSt</div>
<div class="stl_01" style="top:24.21em; left:48.41em;">
<div class="formData">OwnZp</div>
<div class="stl_01" style="top:26.321em; left:5.41em;">
<div class="formData">PreOwn</div>
<div class="stl_01" style="top:26.21em; left:24.41em;">
<div class="formData">PreCty</div>
<div class="stl_01" style="top:26.21em; left:34.51em;">
<div class="formData">PreSt</div>
<div class="stl_01" style="top:26.21em; left:41.01em;">
<div class="formData">DealerNum</div>
<div class="stl_01" style="top:34.921em; left:1.541em;">
<div class="formData">LienDt</div>
<div class="stl_01" style="top:34.921em; left:13.41em;">
<div class="formData">LienHld</div>
<div class="stl_01" style="top:37.1em; left:5.41em;">
<div class="formData">LienAdd</div>
<div class="stl_01" style="top:37.1em; left:24.41em;">
<div class="formData">LienCty</div>
<div class="stl_01" style="top:37.1em; left:38.41em;">
<div class="formData">LienSt</div>
<div class="stl_01" style="top:37.1em; left:48.41em;">
<div class="formData">LienZp</div>
<div class="stl_01" style="top:45.1em; left:22.41em;">
<div class="formData">Sales</div>
<div class="stl_01" style="top:49.885em; left:22.41em;">
<div class="formData">Tax</div>
<div class="stl_01" style="top:53.791em; left:22.41em;">
<div class="formData">Tax</div>
<div class="stl_01" style="top: 61.5em; left:31.52em;">
<div class="formData">Own1st OwnMid OwnLst</div>
<img  height="1465" width="1110" alt="" src="https://pdforms.losttitleconnection.net/TITLAPP-2.png"/>

Any and all help in solving this is greatly appreciated... and I'm glad to learn, read or research any and all suggestions in an effort to get this done. Thanks in advance for your time and assistance.

gary.turner's picture
Last seen: 1 year 48 weeks ago
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858


What is your intent here? It sounds like you want to produce a printed document. If so, it is a poor choice to html/css/js/img to do it. As you describe it, your form will not be accessible nor device independent.

It will certainly be better to give the user an editable .pdf document. Google for editable pdf.

An alternative you might try is to give the user a regular html form, which will be usable by anyone and on any type browser. Insert the form's data into a LaTEX document and compile server-side. Then export to a pdf and deliver to the user.


If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.