Printing Labels With CSS

Cant you just resize the image before setting it as a background? I've attached an image resized it to screen resolution 72dpi and 8.5x11 in... does this help?
form.jpg

Is this just for testing purposes?  If it is not and you want it to be a permanent solution I would look to setting up an HTML form that mimics your page exactly.  
As blacksix said above, resize the image first.  If you try to resize it using HTML or CSS it's not going to give you the results you want.  I would definitely give try to mimic the exact from in HTML though.  You would have to slice up your image a little bit, but it shouldn't be difficult.

That's a good idea.  Thank you very much.  Here's shot of my print preview screen.  It looks like the height is correct, but the width is not.  
form3.JPG

Can you post your HTML and CSS code?

You're right, LZ1.  That would be the correct way to do it. I've ran out of time on this project, and I was looking for quick solution.  It's totally my fault that I'm trying  to make it work in this awkward way haha.  Thanks a lot for looking into this.  I'm attaching the php file as well as a sample of the html.  
html.txt
php.txt

No offense taken about the inline code.  This was an old project that I did last year, and when I first opened it up for this go-around, I was like "oh....no...".  In the case of the form, this is something that they buy from the state(I think), and they are using another piece of software to manage the actual data.  I did a quick-and-dirty export from one system / import into a mysql db.  Thanks again for checking into it, I'm sorry for the sloppy code.

Don't worry about the sloppy code, we've all been there.  I just think it's going to take a lot of time in order to get everything sorted out and aligned properly.  I dont' think tables would be the way to go in this case.  Still working

I seriously can't thank you enough for helping me on this.  That's really cool of you.

I agree with LZ1 on that - trying to match everything up is going to be a real pain, considering that browsers render things differently too, a difference in padding  or margin calculation between two browsers could throw your whole form off. You're much better off making a form in html that way at least if something is a hair off its still functional. You can still make it resemble the original form so people are still comfortable with it...

I would love to just recreate the form and print it out that way, but these forms are on special paper.  We have to order the forms elsewhere, and the place where we buy them from does not offer any printing solution.  As for the browser, I will be able to control which one is being used.

Ok, I wasn't going to offer this as a solution but it did work for special forms for an old company I used to work for.  Also, I think you need a 100% browser solution, but if I'm wrong, feel fere to let me know.
We used Excel and through trial and error we got everything put into the forms.  It was a pain to align at first, but in the end it worked out fine.
 

I'd like to stick with the browser solution if that's at all possible. The method you used in the excel sheet is pretty much how I was trying to do it with css.  I actually had pretty good results doing it that way, but here's where everything went south:

My "test page" was actually just a copy of the original form.  I aligned everything trial-and-error-style to the test page, and it printed out fine.  I then went to print on one of the real forms, and the alignment was messed up.   So, I took one of the real forms, scanned it, and you know the rest from there.  

Where are these forms being printed?  If it's in your office under your control, you might consider just collecting the data in the web browser and exporting it to program more suited to printing like Microsoft Word or PDF.

They are being printed in a place where I could supervise everything, but I think I would run into alignment issues with any method I used.  The reason that I would like to keep it browser based is because I would like to eventually tie it in with the source data(MSSQL).  I would also like to tack on a simple UI with a few different options.  

I put up a test page at http://www.dibsplace.com/ft/Formalign.html .  Because it's been my experience that different combinations of browsers, monitors and adaptors cause things not to align the same, you might want to take a look at this page on the different systems you're expecting to use your page.  I do know that IE8 and Firefox 3.6 align slightly differently.

lines up for me in chrome...

Wow, thank you very much. I'm going to try to adapt that to my php script right now.

I think I can make that work.  I'm going to hold off on assigning the points right now, because I think LZ1 might still be working on something.  Thank you to all who chipped in!

I don't know why I didn't think of this when I first saw your example, Dave, but I noticed that the form image is centered in the middle of the page.  The form's height is actually an entire 8.5 x 11 sheet of paper.  What I want to do is line everything up on the dummy background image, and then remove the image and print on the real forms.  To fix the images height and width, I just need to resize the actual image, right?

I really doubt that you can use the same page and image for printing.  Things aren't measured the same for screen and paper.  And most browsers don't print the back ground image unless you tell them to.

Have you tried printing what I gave you yet?

I did a print preview on the page that you made, but the background image appeared to be in the center of the page.  What I am trying to do is use the scanned form as a background image just for alignment purposes.  I do not want to actually print the scanned form.  I just want to print the text, because I will have the real forms in the printer at time.  In order to do this, the scanned image has to scale exactly to 8.5 x 11. It seems like if the scanned form were the same scale as the actual form, then lining up the text on the scanned form should print well on the actual form.  I think I've explained myself poorly, and I apologize for that.  Please let me know if I need to go into greater detail.  Thanks again.  

There isn't any direct correlation between the screen and the paper.   In IE, "Print background images and colors" is in Internet Options on the Advanced Tab.  In Firefox, it's under "Page Setup" on the File menu.

Are you saying that as long as I stop the image from printing, the actual text will still align correctly on the real form?

Here's the basic idea of what I wanted to do:

I have a set of real, tangible sheets of paper that I need to print on

I scanned one of the real sheets of paper, hoping to use it as a background image to align my text on

I was then going to remove the background image and print my text on the real forms.  

If the alignment was done correctly on the screen, then I thought everything would print correctly on the real form.

If I'm understanding you correctly, you are saying that there is no exact way to make the scanned sheet mimic the real sheet inside of a browser.    If that's the case, it's ok.  I'll just got back to the trail and error method of alignment that I was using before.  I was just thinking that there would be a more exact way of doing it.  

I tweaked my original, sloppy script a bit, and I was able to make everything line up correctly. We printed around 270 sheets this morning, and everything went off without a hitch.  Thanks again to everyone who chimed  in on this discussion.  

Glad to hear it worked for you.  At least you didn't have to make it work on a typewriter.  A What?

haha!  Some of the people that were hanging around the printer this morning had mentioned how they used to use a typewriter to fill those exact same forms out.  They said it would take them 2-3 days to get it all done.