How to Code Newsletters with CSS

This method works in following clients:

Yahoo! Mail: all images show
Google Mail: all images show
Outlook/Hotmail: if you allow it, all images show. If not, the text/HTML based newsletter shows!

At work, I had to code newsletters given by designers.

I wanted every possible way of not touching their artwork,
as it is my goal to code for perfection.

I read these good tutorials:
http://www.sitepoint.com/article/code-html-email-newsletters/2
http://www.reachcustomersonline.com/content/2004/11/11/09.27.00/index.php


My goal in coding this was to provide readability to as much people as possible over
various methods of reading emails.

That meant for those that can, show the newsletter in its original image form, and
for those who block any and all images, show the text-based version, which would be
gracefully replace the images automatically, by them filtering the images.

Let's think about that a moment.
What kind of methods are there to accomplish replacing images with text? Via presentation
filtering images? I will just lay out all the ones that failed first. Let me know if you want to know
how I tried only to fail. For those reasons I won't go into detail.

1. Position:absolute inside a Position:relative block, layering the image on top of text
2. "margin-top:-width" method to cover the text by pulling up the image by its height
3. Variations on these (image tag before div tage, vice versa) to make them work.

I couldn't do it! I mean if I get it working in YahooMail, GoogleMail wouldn't show anything. Outlook/Hotmail always displayed no images, but they showed the text all right. I only focused on those 4 methods of mail-viewing as I assumed they grasped the major market of mail-viewers.

Well, I tried floating the image.

So here are the basic steps I found out after couple tests.
1. Follow the link and read about the basic setup of a newsletter.

2. Follow and make/copy the code so you get rid of all the style tags and make it still work with inline CSS.

3. Basically you'll be using TABLEs to represent content. In a is where you'd show the sliced up newsletter images. Now that has no info whatsoever, and that same place is where you put the text-based content as well.

4. Inside that :

1. Make a DIV tag, which will be wrapper for your content.
   
   
   
2. Inside it, place your image first. Float it, block it.
   you don't need to give it dimension.
   
   
3. After the IMG tag, Make a
   as same height as your image, and put content in.
   **make sure the text based content won't be taller than the image. It's gonna show gaps if so.
   
   
4. THAT'S IT!!!!!!!!!!!

Here's how it looks:



TESTING:
I use this site to send me some test letters: http://www.mailchimp.com

It's a pretty good site, and they are very informative on things.


EVALUATION:

This method works in following clients:
Yahoo! Mail: all images show
Google Mail: all images show
Outlook/Hotmail: if you allow it, all images show. If not, the text/HTML based newsletter shows!