I'm trying to create a report (with information pulled from a database) which generates a bunch of certificates. My idea was to have the variable text (student name, date, lesson, etc.) placed on top of the certificate image -- fill in the blanks, per-say. Because this is being printed and browsers like to hide background images, I made the certificate an image tag instead of a div background. Now I'm running into a problem with IE 6/7 -- the text appears to the side of the certificate.
I essentially have something like this:
<div style="width: 500px; height: 500px; position: relative; margin: 20px auto;"> <img src="..." /> <span style="position: absolute; top: 100px; display: block; width: 100%; text-align: center;">My text</span> <!-- more spans with more text --> </div> <!-- more certificates -->
It works under Chrome/Firefox/IE 8 just fine, and I'm assuming the design idea is okay. But I'm wondering how to fix it for old IE... do I need to use z-index and/or some other positioning strategy?
Okay, try setting a left position as well as a top position for the absolutely positioned text. Also set the width of the span in px not % for safety.
if that doesn't work, set the image as position:absolute and set a z-index on each of the elements - the wrapper div, the image and the span.
If that doesn't work try using p's (natively block elements) instead of spans(in-line)
You'll be much better off using a server side script to generate a PDF from a template and the database information.
If you're using PHP, then this might get you off to a good start:
A PDF will be much more cross browser friendly than a web page to be printed - you have no control over the user's page settings, which may include headers, footers and large margins.
Learning how to create PDF's will be a good investment!