EDIT: I only bumped this thread to take the links out, ignore this thread. Quite new to HTML emails and having a little trouble getting it to look right. It's 6 images with 2 images at the bottom needing text over them. Looks good in Safari on Mac & iPhone, doesn't look too bad in Outlook but looks terrible in Hotmail. I think its the DIVs in the <td> tags. Any ideas? Thanks. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> Trouble viewing this email? <a href="#" style="color: #00adee;">Click here</a> <table cellspacing="0" cellpadding="0" height="1273px"> <tr> <td align="left"></td> <td align="middle"></td> <td align="right"></td> </tr> <tr> <td align="left" style="position:relative;"><div style="z-index: 2; position: relative; height: 60px; text-align: left; padding-top:23px; padding-left: 45px; line-height: 20px; width: auto;" align="left"></div></td> <td align="middle"></td> <td align="right" style="position:relative;"> <div style="z-index: 2; position: relative; height: 73px; text-align: left; padding-top:10px; padding-left: 5px; line-height: 23px; width: auto;" align="left"><br /><br /></div> </td> </tr> </table> <style type="text/css"> body { background-color: #cccccc !important; font-family: arial !important; size: 1 !important; color: #00adee !important; } a:hover { color: #3399ff !important; } a:visited { color: #00adee !important; } table { border-collapse: collapse; } </style> </body> </html> HTML:
Looks a little outdated to be honest with you. Why not use a service such as http://mailchimp.com/ They have a fantastic email layout creator, which makes the job of creating an email template so much easier and then you can create a mailing list so all emails are sent in one go. Really great service that I use a lot.
Most email clients don't support background images. I think that may be why you are using absolute positioning and z-index, but unfortunately most email clients don't support that either. The best solution may be to make the overlaying text be part of the image. Be sure to put that text in the image alt attribute too so that the user can see the text if images are turned off (at least in most email clients) here is a good reference for email support in email: http://www.campaignmonitor.com/css/ Don't delete your code and start over. You are on the right track. Tables may be out of date for web, but they are necessary for email.
Nothing is necessary - or guaranteed - for email except text. Many email clients throw HTML away. Some shot it as code. Many people who have been on the web for a few decades have HTML-filtering in their email clients - if it has HTML it's deleted before being read. The only thing you can be guaranteed will be read correctly by every single email client in the world (neglecting differences in alphabets) is plain text. If you're using HTML in emails, at least make it opt-in. Plain text emails unless the user asks for HTML emails. Sending only HTML emails, unless you have tight control over your users (as you would in an intranet) will lose at least half your recipients. (Some studies show that as much as 80% of HTML email that isn't specifically asked for is deleted or ignored.) General rule - if you can't do it in text, send a text email linked to an HTML web page.
Pretty much irrelevant to what I asked. Still pretty much irrelevant. Still irrelevant but this is a 100% opt-in campaign. Not notice the "click here" link at the top?