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 -->

<!-- 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?

2 answers

This was chosen as the best answer

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)

Answered over 7 years ago by Tony Crockford
  • Looks like it only needed "left: 0px;" I should have thought of that... now I know. Kevin Seitz over 7 years ago

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!

Answered over 7 years ago by Tony Crockford
  • I looked at FPDF and pdflib when I was generating larger documents with user-supplied information, but I became a bit overwhelmed with some aspects and tried using wkhtmltopdf instead -- it ended up working quite well for what we needed. I'm trying to move our website over to PHP, but the system we rely on (and where these certificates are being generated) is forever stuck in Classic ASP land. I'm not all that familiar with Classic ASP, but I do intend to learn ASP.NET/VB/C# at some point in the future. Given that every other report in our system either returns HTML or a CSV download, I'm trying to stick with those formats. I see the merits of generating a PDF, but it might be more trouble than it's worth for our clients. They all use IE, so if I make the HTML/CSS work properly in IE 6/7, I have my bases covered. Kevin Seitz over 7 years ago