Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Need Workaround for Outlook 2007 HTML Email Rendering Bug (Horizontal Gaps)

My HTML email newsletter design doesn't render properly in Outlook 2007. There is a white horizontal gap towards the bottom which breaks borders and backgrounds. I've had this happen before and have no idea how to work around it. Any suggestions? I've posted the source here. It renders just fine except in Outlook 2007 (Word 2007).

By the way, you can preview the problem without Outlook, by opening the source with Word 2007.

like image 407
jalperin Avatar asked Mar 10 '10 18:03

jalperin


People also ask

How does Outlook render HTML?

It uses Webkit as the rendering engine. This means it's usually on par with Apple Mail and iOS as far as email rendering is concerned. If it looks good in your browser, there's a decent chance it will look good in Outlook for Mac and you'll have less chance of your html email not displaying properly.

How do I test HTML code in Outlook?

In Microsoft Outlook, double-click to open an email. You'll see an “Actions” menu under the “Message” tab. Click on that menu and select the “Other Actions,” then click on “View Source” to see the HTML code. Regardless of what your default text editor is, the HTML file will open as a .


4 Answers

I can't see the original source, but the workaround is to insert a 100% width table somewhere in the design just above where it's breaking. This can be a 1px high transparent line. This allows Outlook to insert a page break.

Outlook is using Word 2007's rendering engine, so if it reaches the end of a sheet of A4 in printing size, it has to insert a page break somewhere. If there's an image in the place where it would otherwise insert that page break, it will just force that image down to the next page - that's the space you are seeing.

Using the 100% table allows Outlook to insert the page break there instead.

like image 191
Dan Blows Avatar answered Oct 04 '22 14:10

Dan Blows


Here is a good explaination of what can cause that bug and how you may be able to fix it: http://www.emailonacid.com/blog/details/C13/horizontal_spacing_issues_in_outlook_2007_and_2010

like image 38
scube Avatar answered Oct 04 '22 15:10

scube


Microsoft, in their infinite wisdom uses Word to render HTML? So I let Microsoft write the HTML for me.

  • Publish email as a web page
  • Copy web page into an Outlook email
  • Send the email to yourself
  • Get the source code of the email you receive from yourself

That HTML will now work fine.

Don't even bother to decipher the HTML Microsoft creates. I'll give you a headache.

Next, I had to copy the HTML back into Dreamweaver to fix a few things:

  • img src= was all screwed up
  • background color you can fix in the Outlook email you send, or in the HTML

By the way, I found if I tried at put the image map hyperlinks back in, the problem resurfaced. So I just linked the whole image.

like image 34
scott_see Avatar answered Oct 04 '22 13:10

scott_see


I currently have exactly the same problem, as far as i'm aware this is something to do with Outlook 2007 using Word 2007 as a rendering engine. Because of this, Outlook 2007 puts (what are effectively) page breaks throughout your email (at certain intervals).

I may be completely wrong, but this is how I see it...

Any answers would be rather good!

like image 23
Barrie Reader Avatar answered Oct 04 '22 14:10

Barrie Reader