overlapping images not lining up properly

Hi,

I’m writing a plugin that shows dates as an ‘iPhone’ style calendar graphic – I have this working on a regular (non wordpress) website….

gig page

The calendar image is made up of three images; a background, a month name and a date number – I use php to dynamically select the file names. All three images are the same size and I use z-index to overlap them.

I’ve copied the same code into a wordpress plugin to show the images in a widget box using a shortcode – but when I run the page, the images don’t line up properly…..

Not lined up

It should look like this….

Correct

This is the code….

"<img height=\"79px\" width=\"79px\" valign=\"top\" alt=\"calendarpic\"  style=\"position:absolute;  z-index:1;\" src=\"https://localhost/wordpress/wp-content/plugins/Gig_bible/calpics/background.png\" hspace=\"6\" vspace=\"6\" align=\"left\"\"/>
<img height=\"79px\" width=\"79px\" valign=\"top\" alt=\"calendarpic1\"  style=\"position:absolute;  z-index:2;\" src=\"https://localhost/wordpress/wp-content/plugins/Gig_bible/calpics/{$row['day']}.png\" hspace=\"6\" vspace=\"6\" align=\"left\"\"/>
<img height=\"79px\" width=\"79px\" valign=\"top\" alt=\"calendarpic2\"  style=\"position:absolute;  z-index:3;\" src=\"https://localhost/wordpress/wp-content/plugins/Gig_bible/calpics/{$row['month']}.png\" hspace=\"6\" vspace=\"6\" align=\"left\"\"/>".

I guess i’m either using methods that aren’t supported by wordpress or i’ve got some css elswhere that’s over-riding the code??