Absolute positioning for Absolute Control!

Faced with (re)creating 2 IRS tax forms (PDF) as HTML web-pages with user-inputs backed by a CGI backend for a client, a daunting task if one attempts to recreate all the text, fonts, and checkboxes, etc. into HTML, I researched and discovered “absolute pixel positioning in HTML via CSS”! (Generally HTML discourges attempts to micromanage element placement)…

I ended up converting the PDF forms into jpeg images, using an IMG tag to display the form’s jpeg, then carefully positioning the form inputs precisely over their corresponding inputs on the form! I verified that this works properly in both IE & FFox. Combined with my hacked version of CAM::PDF (see recent posts), users can now enter their tax information online (on real tax forms) and we can save it in a database and generate a filled-in PDF version saved as a file! This also works if displaying more than one form on a page. Here’s what works! (Example shows a text field and a checkbox):

<div style=”position:relative; “>
<img style=”position:relative; left:0px; top:0px; ” src=”images/fw9.jpg” width=”1024″ height=”1324″>
<input style=”position:absolute; left:125; top:156; height: 22; width: 800; font-family: Arial, Sans-Serif; font-size: 12px; padding: 0px; background-color: #DDDDFF; ” name=”name” type=”text” size=”60″>
<input style=”position:absolute; left:254; top:225; background-color: #DDDDFF; ” name=”business_type_cb” type=”radio” value=”I”>

The DIV tag seems to be necessary. It and the IMG tag are positioned “relative” – that is to whatever is displayed before them. Then the INPUT fields are positioned using “absolute” coordinates that are relative to the surrounding “parent” element (the DIV) tag, thus “overlaying” the image which becomes a background to the input forms. WARNING: the final template page starts with “<?xml version=”1.0” …><!DOCTYPE html…> and i had to add a “<BR>&nbsp;\n” line at the top above that in order for it to still work properly – I don’t know why? (comments welcome!)

Advertisements

One Trackback

  1. […] overlaying it a while back for another project (details in my September 2010 blog-post “Absolute Positioning for Absolute Control“).  I was able to layer the input fields over the background image with precise relative […]

Feel Free to Comment (Name/Email/Website optional):

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: