HTML Email, CSS and all that jazz.

[bno]

I realise I am opening a potential can of worms here but I am not looking to get into a debate about the ethics of the issue.

I have been asked to design a content managed html email, its a christmas card, so time is of the essence. My client has asked that the message be customisable as simply as possible. I have designed a web interface using php and its functions that takes user values and sends out the email in HTML format. Its not that part that is the problem,

Its the HTML & CSS layout, I have looked around and it is obviously very hard to get right for everybody (maybe even impossible) but it should still look eligible in HTML format. The design is an image with the customised writing at the bottom (but still on top of the image) CSS z-index and positioning is the obvious solution to this and the content looks fine in outlook and apple mail and other desktop programs like thunderbird, its the webmail applications I am having trouble with (Hotmail, Yahoo - both newest and elder versions).

The obvious thing I have found from my trials is that its all about positioning and webmails lack of support for it. But is there any other way of working around it.

The code I am currently working with as my HTML email body is...

<div style="background-color:#c69c6d;">
    <span style="z-index:1;"><img src="http://testzone.manifestcomms.co.uk/sandtoft/XmasCard/bg.jpg" /></span>
    <span style="z-index:2; position:absolute; left:150px; top:500px;">
    <table width="450" height="100">
    <tr style="font-weight:bold; font-size:18px;  font-family:Arial, Helvetica, sans-serif; color:#FFFFFF;"><td>RECIPIENT</td></tr><tr></tr><tr></tr><tr></tr>
    <tr style="font-family:Arial, Helvetica, sans-serif; color:#FFFFFF;"><td>INSERT MESSAGE HERE</td></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr>
    <tr style="font-weight:bold; font-size:18px;  font-family:Arial, Helvetica, sans-serif; color:#FFFFFF;"><td>SENDER</td></tr>
    </table>
    </span>
</div>
 

All and any help is much appreciated and obliged.

[phvfl]

Hi,

Due to wanting to prevent people from changing the layout of the page webmail providers (GMail, Yahoo!, etc.) disable various amounts of CSS and styles. Some will remove any styles from within the head element of a HTML document and some will strip styles from the body.

A good article on this can be found at http://www.xavierfrenette.com/articl...rt-in-webmail/

Hope this helps