CSS in email html, layout not showing same as web browser does

[jason310771]

I have created my email layout in Dreamweaver using html with doctype, html, head and body tags and it shows ok in IE and Firefox and in Windows Live Mail I have placed all of the CSS inside the email code inside the head tags.

 

When this is emails to someone with Outlook, Outlook completely changed the html and the CSS section ?!

 

How do I prevent this from happening or better still how to code this so that Outlook does not have to change anything.

 

 

[raindropz12]

you need to use inline stylesheet, don't place your css file inside head tag

[jason310771]

so i need to remove all the class="**" and replace with style="****" and put the css code in here instead ?

 

or could i just place all the css in an external files and link it in the email code ?

[cssfreakie]

To layout an email one needs to apply all bad practices there are.

Use tables and inline style.(only with emails) maybe want to have a look at the standard templates of mailchimp to get the idea. There are quite some articles on designing emails. just google it.

[stevengreen22]

Would you mind elaborating why?  Is it the way the email client renders / reads the files?

[cssfreakie]

indeed!

I can elaborate, on it, but like i said if you want a quick a working way, download a template from mailchimp and follow the guide/tips.

As far as the mail format: this what your looking for: http://www.faqs.org/rfcs/rfc2822.html

 

[Philip]

I frequently create marketing emails, so I can give a few more tips:

• Keep the design simple, trust me, it'll make your life easier later down the road
  
• Use tables (ugh, I know) and inline CSS
  
• Don't bother with things like p, h1, h2, etc tags in the table. It'll just complicate your life more and adds no value to the code
  
• Don't bother with paddings / margins. You should use spacer images instead (again, ugh)
  
• For hotmail & images you'll notice there are probably some spacing issues (extra padding above and below the image). You can easily fix it by doing the following on all images:
  

Before...
<td><img src="http://mysite.com/images/logo.jpg" width="100" height="50" alt=""></td>

After...
<td style="line-height:0;"><img src="http://mysite.com/images/logo.jpg" width="100" height="50" alt="" style="display:block;"></td>

• Be sure to place height/width attributes on images
  
• Do not place height/width attributes on td/tr/tables.. Use inline css height/width.
  
• http://premailer.dialect.ca/ is an AMAZING tool. Use it!
  
• I can't believe I'm actually referring someone here, but: http://litmus.com is a good tool to use to preview across different email clients. It's a bit pricey if you're a solo developer ($50/month), and to be honest the service isn't terribly reliable - it provides the proper screenshots, but the access to the different email clients is very unstable IMO.
  

 

If you have any specific questions, or need more tips for certain clients let me know!

[Philip]

I just wrote an article that goes into a bit more depth on creating emails. You can find it over here

[cssfreakie]

I just wrote an article that goes into a bit more depth on creating emails. You can find it over here

Nice one!

[stevengreen22]

Awesome!  Well worth bookmarking, I may not need to use it btu uit's a fantastic resource to be aware of and informative too!!!