Solved

HTML email not displaying correctly in Outlook 2010

Posted on 2013-11-20
7
3,177 Views
Last Modified: 2013-12-20
Hello,

I am creating an HMTL email for a client. It displays correctly in every email client except the customer's, and they are using a Win 7 PC with Outlook 2010 Pro Plus.

The width of the table cells <td width="550"> are being ignored, and it looks very condensed - almost like they are viewing it on a phone screen. (See image1)

When I did some research, I read that adding a <style> tag to the <td> would force Outlook to to actually display a 550px table width. I added in a style width <td style="width:550px;"> to the table cells, but then my header image (which has a height and width specified, of 550x250) shrinks and doesn't fill the space. (See image2)

Here's a link to view the email itself:
http://secure.pledgemine.com/emails/etmp_50.asp?id_prf=767199&secure_src=60857

Any ideas why

1) Outlook is displaying my email so condensed? or

2) Outlook shrinks my image (which has a height and width specified)?

Thanks for any help on this,

Josh
image1.jpg
image2.jpg
0
Comment
Question by:skimox
  • 2
  • 2
7 Comments
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 200 total points
ID: 39662995
Outlook 2007 or newer use Microsoft Word for their HTML engine.  Trouble is, Microsoft Word's HTML is stuck at about the year 1999.  This page http://www.campaignmonitor.com/css/ shows many things that do not work in different clients.

PS: I should have added that many email clients do not recognize any version of HTML past HTML 4.0.  You're using XHTML on that page.
0
 

Author Comment

by:skimox
ID: 39663642
Dave -

I have looked at that campaign monitor page, and I've tired to be careful about not using code that Outlook can't read - or at least provide a backup which Outlook can use.

Do you see something specific that would cause Outlook do display incorrectly - either the width issue or the image size issue - based on the code I'm using?

Regarding your PS. I'm using the same doctype that Campaign monitor suggests using.
http://www.campaignmonitor.com/blog/post/3317/correct-doctype-to-use-in-html-email/
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39663677
Open a copy of your email code in Word.  That's what is used to display it in Outlook since 2007.  Don't save it from Word though, it does horrible things to HTML.
0
 
LVL 17

Expert Comment

by:nanharbison
ID: 39665895
Don't use this:
<td width="550" style="text-align:center;background-color:#fff;"><

try the ancient way:
<td width="550" align ="center" bgcolor="white">

And do change the DTD to html.
0
 
LVL 17

Expert Comment

by:nanharbison
ID: 39665924
Have you thought of using a email marketing company like Constant Contact to send emails? They allow you to format email correctly for email clients.
0

Featured Post

VMware Disaster Recovery and Data Protection

In this expert guide, you’ll learn about the components of a Modern Data Center. You will use cases for the value-added capabilities of Veeam®, including combining backup and replication for VMware disaster recovery and using replication for data center migration.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Outlook 2010 not responding 14 44
Exchange 2010 offline Address Book (OAB) not updating 10 40
Setting Up two accounts in outlook 2010 3 26
outlook calendar 2 20
PHP contact form that lets the user to contact the company through email contact form. A button is fixed at the bottom of site, on clicking a new window will open where a user can send the email.
In this step by step procedure, you will come to know the details of creating an Outlook meeting in 2007, 2010, 2013 & 2016.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Many of my clients call in with monstrous Gmail overloading issues with Outlook. A quick tip is to turn off the All Mail and Important folders from synching. Here is a quick video I made to show you how to turn off these and other folders in Gmail s…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question