I have a template which i used for sending emails written purely in hand made with css, and then i tested in Firefox/InternetExplorer/Chrome browser. But when i send that email to My boss PC as he is always Microsoft outlook user.
He always gets the alignment broken, texts broken all problems start. My question is how do you really write then? None of the web browser showing my template wrong.
I searched a lot, but most answers are not deeply and correctly well answered about this. I would really appreciate some experts input on this.
Thanks
outlook uses an older version of Trident, the CSS rendering engine. Depending on what Outlook your boss is on, the worse it can get. Outlook 2010 actually reverted to an older version of Trident because of Microsoft losing the Anti-trust case with the EU, so whatever version was before 2010 actually renders better, however they are both quite subpar @ best. you're going to want to literally stop developing with modern html/css and fall back on old school table layouts. i know, its gross, but you're going to have to do it for email. the best tests are native, but if you don't have access to both versions (not many do) you should check out EmailOnAcid.com, they provide a plethora of email clients you can test on. constantcontact.com, mailchimp.com and campaignmonitor.com all offer more than testing services if you need anything else.
Outlook 2007 is the bad guy. Any newer or older is much better. In Outlook 2007 lots of CSS commands don't work.
See this page: http://www.email-standards.org/ for details.
However, try sending your emails to Gmail.com and see how it gets displayed in Gmail web interface - Gmail is quite restrictive and as a rule of thumb, if it displays nicely, it should look good in other web clients too.
Some advice regarding HTML emails:
width
for Outlook, otherwise the CSS may crash. padding
for <div>
s / <p>
s, float
and various other things. height
to min-height
so using height is useless. However min-height
of <td>
is not respected by the browsers, so internal <div>
s inside <td>
s can be used to assure that min-height was applied. <div>
and set background color and color of this outer div
, and provide alt
(alternative text) for image (note also that images with empty src
do not preserve width and height while rendered by the browser).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.