Thursday, March 11, 2010

CSS support in email clients

Today my coworker was struggling with the background image not being displayed properly on her Apple email client while doing a test email blast. She came over to me to ask over for help and I said, "Aah.. Dont worry, will be done in a minute", not knowing what was getting unfolded.

I soon figured there was no way to edit HTML or enter any HTML Tags in the outbound email. So I created a ASP.NET form with 2 input parameters; one for the email and the second one for the HTML. Picked up the custom Method from the library for sending the mail. And did the test Blast. Hmm, outlook made the image completely disappear. "Thats strange!", I said. After a lot of tweaks and several email blasts, I thought maybe now its time to do some research.

And then I got this neat table explaining everything:

Makes sense now. Darn! Should have looked into this earlier!

As for my co-worker, she now has to end up shrinking the image to accommodate the content side by side.

Lesson Learnt: Text cannot be over the image in the HTML Emails; forget the z-index's too.

No comments: