471,605 Members | 1,442 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,605 software developers and data experts.

HTML Email, CSS and all that jazz.

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

Expand|Select|Wrap|Line Numbers
  1. <div style="background-color:#c69c6d;">
  2.     <span style="z-index:1;"><img src="http://testzone.manifestcomms.co.uk/sandtoft/XmasCard/bg.jpg" /></span>
  3.     <span style="z-index:2; position:absolute; left:150px; top:500px;">
  4.     <table width="450" height="100">
  5.     <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>
  6.     <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>
  7.     <tr style="font-weight:bold; font-size:18px;  font-family:Arial, Helvetica, sans-serif; color:#FFFFFF;"><td>SENDER</td></tr>
  8.     </table>
  9.     </span>
  10. </div>
All and any help is much appreciated and obliged.
Nov 22 '07 #1
1 1519
173 Expert 100+

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
Nov 22 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

88 posts views Thread by Mike | last post: by
54 posts views Thread by Howard Kaikow | last post: by
3 posts views Thread by Jimmy Jazz | last post: by
reply views Thread by altami0762 | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by MichaelMortimer | last post: by
reply views Thread by CCCYYYY | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.