/    Sign up×
Community /Pin to ProfileBookmark

Outlook is driving me mad!

Copy linkTweet thisAlerts:
Oct 17.2009

Hi

I’m building a web page to be sent as html email. I work on a mac and it looks perfect as I test. But as I send to the client – who uses outlook and explorer – it goes all over the place.
I’ve lost all the css positioning and used tables, and I’ve embedded my styles in the body of the page, but I’m still getting all kind of strange spacing and things going on.

Any advice much appreciated, I’m starting to feel like an idiot after telling the client I could get this working.

Is there a site somewhere I can render the code to see how it’s going to look on outlook?

to post a comment
HTML

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@jamesplamondonOct 17.2009 — lets see it
Copy linkTweet thisAlerts:
@sticklebackauthorOct 17.2009 — sorry...

http://www.livingstone-estates.com/newsletter/oct09/index1.html

on the version I'm trying to send out I've moved all the css styles into the body area - same result....
Copy linkTweet thisAlerts:
@criterion9Oct 18.2009 — Outlook 2007 doesn't render block level css reliably. I always use inline styles to overcome that and unfortunately you are also forced to use tables whenever possible.
Copy linkTweet thisAlerts:
@kiwibritOct 18.2009 — With HTML email you have to be aware of how email handlers will look at it - including Outlook and Thunderbird. Generally speaking, I have found it pays to throw away CSS and get down and dirty with tables layout, and look at deprecated tags such as Font. As a steer, have a look at the code of HTML newsletters that get through to you. If you have a Mac, be aware that the majority of your newsletter readers will almost certainly be using a PC. Go get yourself a cheap PC or windows-based notebook, and download the common email handlers to it. Or just play at sending newsletters.
Copy linkTweet thisAlerts:
@donatelloOct 18.2009 — When creating HTML mail, you have to code like it's 1995.

Use tables, no CSS...

Go and visit MailChimp, they have a great primer on how to code HTML mail... 600px wide, centered, use inline simple old html... <font> tags, <center> tags...

all the things you should NOT do on a real webpage, you SHOULD do for HTML mail.

http://www.mailchimp.com

Here's where they have all the info you need: http://www.mailchimp.com/articles/#designcoding
Copy linkTweet thisAlerts:
@sticklebackauthorOct 23.2009 — thanks for these replies.

just in case anyone reads this thread looking for answers - here's what I found out.

Outlook 2007 ADDED a whole load of code as it received the email - this is what created the spacing that was the main issue.

I went back to tables. I stripped out most of the CSS formatting I had been using (even though I had it embedded in the file most of it wouldn't take in Outlook 2007)

I had to style each piece of text in line with it's own font tags. Strangely some of the formatting was OK - eg I used font variant small caps on the h1 tag and that was OK. Anything I had put on the h3 tag, however, was lost.

From the starting point - a very nice (even though I say so myself) clean CSS page which presented beautifully in Firefox, I ended up with a very clunkily coded, aesthetically inferior page - in all mail clients - because the boys at Microsoft can't keep up.

this is a sad state of affairs. Now we have Windows7 to look forward to - or maybe we will be looking back...
Copy linkTweet thisAlerts:
@kiwibritOct 24.2009 — Don't hold your breath. [url=http://blogs.zdnet.com/microsoft/?p=229]Outlook 2007 uses Word's rendering engine[/url].
×

Success!

Help @stickleback spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.1,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...