Coded HTML Emails display incorrectly - MS Outlook

Hi Everyone,

I'm hoping someone can help me with this I've been trying for days to find a solution and google'd around a fair bit.

My boss has asked me to send a marketing email to our previous clients and it looks perfect online, in gmail, yahoo but MS outlook shunts part of the email to the right. It also does the same if I try and paste it into word? I need to get this going otherwise my boss will not be happy yikes!

I am basically opening the html document so I can view it in firefox then copying and pasting into Outlook or Gmail or Yahoo. All work fine but Outlook :(

I have attached the code and what it should look like plus what it looks like in Outlook. If one of you amazing guys could help me I would be forever in your debt.

Many thanks in advance!
index-wheredidyougo.html
MS-outlook-view.png
gmail-yahoo-and-web-view.png
BastienCtrlITAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Kim WalkerWeb Programmer/TechnicianCommented:
In your internet search you may have learned that Outlook uses Word as the rendering engine for html emails. In many cases, you can predict what the email will look like in Outlook by opening it up in Word.

Try taking out the "px" from the height and width values. The height and width attributes, though deprecated in HTML 4.01, are still important to Outlook but only accept numbers or percent.
<td height="300">

Open in new window

or
<td height="20%">

Open in new window

0
BastienCtrlITAuthor Commented:
Just trying this now will let you know in a few seconds :) Thanks for your help so far :)
0
BastienCtrlITAuthor Commented:
Hi Xmediaman,

Tried that with no success unfortunately. Is there anything else I could try?

Thanks again for you help :)
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

COBOLdinosaurCommented:
Outlook does not handle HTML in a standard way, and does not support many of the CSS features of web mail clients.

This matrix of CSS support in email might help you determine what you can't do with Outlook.

Cd&
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Kim WalkerWeb Programmer/TechnicianCommented:
After looking at this closer, I'm amazed that it looks good in the browser. You're using CSS to change the display behavior of the table rows and some of the table cells to "display: block" and then relatively positioning them and floating them. This likely will be ignored in Outlook which will continue to display them as table-row and table-cell which are unaffected by the relative position and float values.

You need to punt and regroup. One table row is split into two cells and the row immediately following in the same table is split into three cells. You need to make those rows separate tables or split both rows into three cells. Avoid using css on table rows, apply the css to the individual cells within the row instead.
0
COBOLdinosaurCommented:
While I expected that the page would not validate; I did not expect to find 44 errors with most of them referring to obsolete and structural issues:

http://validator.w3.org/check?uri=http%3A%2F%2Ffiledb.experts-exchange.com%2Fincoming%2F2013%2F10_w42%2F682746%2Findex-wheredidyougo.html&charset=%28detect+automatically%29&doctype=Inline&group=0

I think xmediaman is correct in suggesting you re-group. That layout is never going to work across different email clients.

Cd&
0
BastienCtrlITAuthor Commented:
Hi Guys,

I'm confused is it possible you could give me an example or fix up the example I provided? I've been at this for days and I don't feel any closer.

Kind Regards
0
BastienCtrlITAuthor Commented:
All the problems found are my attempts to fix this issue. The original validates is much neater but still doesnt work in outlook.
0
Kim WalkerWeb Programmer/TechnicianCommented:
Do you understand how tables work with columns and rows, kind of like Microsoft Excel? You can have a cell from one row span across two or more columns and/or two or more rows, similar to merging cells in Excel. But you can't have a cell from one row be 1.5 columns wide or 1.5 rows tall or any fractions of rows or columns. You need to redesign your table so that all the cells in a column are the same width. In your case that means slicing the image differently.

I should also point out to you that your email will likely be filtered as spam because it doesn't contain any content. It only has images. Even though the images show words, the spam detectors can't determine that. So the deliverability is very low.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Outlook

From novice to tech pro — start learning today.