Page breaking (?) in Outlook 2007

Hi,

I'm preparing for the first B2B newsletter for a new client, using tables and inline CSS to render properly in Outlook 2007. So far, so good (and so regressive..!) but there's one thing we can't get around, a white line that crosses the email at a certain height in Outlook 2007 -

http://www.degasguruve.com/mailings/toolsgroup/images/TG_screenprint.jpg

Has anyone come across this and know how to get around it?

Thanks

ps Clicking on 'Preview' actually posted the message. Is there image support for the forum?

pH pH, 9 years ago

Re: http://www.degasguruve.com/mailings/toolsgroup/images/TG_screenprint.jpg

I wonder if it would be more helpful to see your code in addition to that image...
Is the line in the same place every time?

Show us your code.

Mathew Mathew, 9 years ago

You can insert images using the BBCode image tag

[!img]http://www.google.com/intl/en_ALL/images/logo.gif[!/img] (without the exclamation marks)

pH is right - without seeing the actual code it is tricky to tell what is happening. Can you post it up somewhere?


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Degas, 9 years ago

Thanks Mathew for the [img] info

I've been through and dissected the code, and found the problem was applying a margin rule to the body.

The original css looked to override the default margin settings to lose some of the white space at the top of the nessage

body {
    font-family: verdana,"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    margin-top: 2px;
    margin-bottom: 10px;
}

Leaving this alone now sees the line-break gone in Outlook 2007, with the tradeoff of a larger top margin in Outlook 2003

body {
    font-family: verdana,"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
}

Hope this might help anyone else trying the same (!)

Dave Dave, 9 years ago

Thanks for the follow up Degas and great find. I hadn't heard of that bug before either, so I'm sure it will help save other people's sanity too. For those interested, we posted a few more email client quirks relating to tables in the blog a few minutes ago.

Degas, 9 years ago

I've just come back to this to try and think of a way for Outlook 2007 to ignore my margin override, and success!

Including

* html body {
    margin-top: 5px;
}

after

body {
    font-family: verdana,"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
}

is ignored in Outlook 2007 but accepted in Outlook 2003. For other clients,

Thunderbird 2.0.0.4  - Ignored (as it should be)
Googlemail - Ignored
Yahoo! Mail beta - Accepted

The mail now looks good in both Outlook 2003 and 2007 so should suit most B2B clients. I'm not sure my original problem has anything to do with my layout - tables (aimed at Outloook 2007) with inline css (except for body and a tags), hand coded as cleanly as possible, just a couple of tables within tables...

Mathew Mathew, 9 years ago

Nicely done Degas. What's your normal testing process?


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Degas, 9 years ago

I hand code in Dreamweaver, so browser check whilst setting the main layout then send to test addresses for each email client (ie thunder@, @gmail.com, etc) to fine tune.

The issue above came about after adding more content,  with the white line suddenly appearing in an otherwise stable design.

Mathew Mathew, 9 years ago

Thanks for the insight. Have you ever tried any of the testing services out there?


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
stickstone, 9 years ago

Outlook 2007 uses MS Word 2007 to display HTML emails (for shame!) instead of Internet Explorer, like Outlook 2003 does. The result is significantly less support for some tags and styles which is why it looks different. Don't even begin to think you can use floating divs with paddings & margins.

In my personal opinion, the best way to get a mailer to appear correctly in the variety of email applications that exist today is to code like you were in 1997. Use tables, cellpadding/spacing, embedded tables etc. *hurl* As ugly as it seems, I also stick to using inline styles when regular html tags can't pull off the look I want.

Don't even get me started on Windows Live Mail.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098