CSS Noob and HTML Email Disaster

[nicktod]

I’m so annoyed.
I’m the first to admit that I have no idea what I’m doing, but doing HTML emails and using CSS in them has me so frustrated.
I’m sure this is my crappy custom coding from a ThemeForest template, but I was wondering if someone would look at this and tell me why I’m getting these two issues. I have attached the results from an gmail account and the wonderful Outlook 2010 result.
[Here’s the page for the email.. Don’t laugh](http://www.ngkfportland.com/email/first_main.html “HTML email attempt”)
[Gmail Result](http://www.grubb-ellis-portland.com/img/gmail_issue.png “Gmail Result”)
[Outlook Result](http://www.grubb-ellis-portland.com/img/outlook_issue.png “Outlook Result”)
Note: The HTML email template has the the CSS rules WITHIN the body tag.. is this weird?

Thanks In Advance

[scottnix]

I am totally out of practice with coding eblasts, it is a pain.

The only way to even do a good job at creating your own is to pay for testing software like http://www.emailonacid.com/

Also http://www.campaignmonitor.com/templates/ probably also has really good templates, since they are pretty respectable (but I haven’t used it).

[Ricky55]

HTML email is just a nightmare. If you’ve no experience with HTML or CSS you’d be far better using a service such as mail chimp.

[lKeithStone]

I work for a magazine fulfillment company and lets just say I’ve done my fair share of building emails for eblasts. Here are some tips:

1. USE TABLES and only TABLES.
2. Inline style everything.
3. All email clients strip CSS and Javascript.

Here is a good site to reference what tags can and can not be used.
http://www.campaignmonitor.com/css/

[Senff]

To fix the Gmail issue, you might have to make the image within the A tag a block-level element. Just add style="display:block;" to the IMG tag and see if that fixes it.

[Author]

Posts