Solved

Responsive HTML Email Design (2 Column) Outlook 2007 / 10 Bug

Posted on 2013-05-30
4
528 Views
Last Modified: 2013-07-03
Hello,

I'm hoping that someone can help with a bug that I have with a responsive HTML email that I'm designing.

The HTML works fine in most email clients and responds gracefully to mobile phones. But doesn't work to well in Outlook 2007 or 2010 (which according to the figures I have is 9%)

So here is the section of the code in question --

<table border="0" cellspacing="0" cellpadding="0" width="100%" class="contenttable">
                                <tr>
                                    <td valign="top">
                                        <table width="100%" cellpadding="20" cellspacing="0" border="0">
                                            <tr>
                                                <td class="contentcell" style="padding:15px 20px 25px;">
                                                    <table width="100%" border="0" cellpadding="0" cellspacing="0" class="headline">
                                                    <tr>
                                                    <td align="left" valign="top"><h2 style="color:#1D95C9;">
<singleline label="Title">Title</singleline></h2></td></tr></table>
                                                    <table width="100%" border="0" cellpadding="0" cellspacing="0" class="innercontent">
                                                        <tr>
                                                            <td>
                                                                <table width="268" border="0"  align="left" cellpadding="0" cellspacing="0" class="articletable">
                                                                    <tr>
                                                                        <td align="left" valign="top">
                                                                            <img alt="" width="268" class="articleimage" editable="true" /></td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td align="left" valign="top" class="inset10" style="padding-top:10px;">
                                                                            <h3>
                                                                            <singleline label="Title">Title</singleline>
                                                                            </h3>
                                                                          <multiline label="Description"><p>Description</p></multiline>
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                                <table width="268" border="0" align="right" cellpadding="0" cellspacing="0" class="articletable">
                                                                    <tr>
                                                                        <td align="left" valign="top">
                                                                            <img alt="" width="268" class="articleimage" editable="true" /></td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td align="left" valign="top" class="inset10" style="padding-top:10px;">
                                                                            <h3>
                                                                            <singleline label="Title">Title</singleline>
                                                                            </h3>
                                                                          <multiline label="Description"><p>Description</p></multiline></td>
                                                                    </tr>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>

Open in new window


You can probably see, that it is two nested tables (with graphic, headline & text) one left aligned the other right aligned.

My CSS for mobile devises targets these classes like so --

	table[class="articletable"] a,  table[class="black_read_more"] a{
	font-family: 'Metrophobic', sans-serif !important;
	font-variant:small-caps !important;
	}
	table[class="table"], td[class="cell"] { 
	width: 300px !important;
	}
	table[class="contenttable"], td[class="contentcell"]{
  	width: 325px !important;
	margin-bottom:0 !important;
	}
	td[class="contentcell"]{
		padding:10px !important;
	}
	table[class="innercontent"]{
			width:305px;	
	}
	table[class="imagetable"], table[class="articletable"], table[class="headline"], table[class="imagetable"] td, table[class="articletable"] td,  table[class="headline"] td{
		width:305px !important;
	}
	table[class="imagetable"] td, table[class="headline"] td, table[class="articletable"] td{
		padding:10px 8px !important;
	}
	img[id="screenshot"]{
	width:100% !important;
	height:auto !important;
	}
	img[class="articleimage"]{
	width:100% !important;
	height:auto !important;
	padding:0 !important;
	margin:0 !important;
	}

Open in new window


The emails look great in webmail, outlook 2013 applemail etc.. BUT Outlook 2007 / 2010 doesn't work, it pushed the second table down resulting in a white gap above the image..

I've spent hours trying to find a solution....

Help

Thank you
0
Comment
Question by:garethtnash
  • 2
4 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 334 total points
ID: 39208726
Outlook 2007 / 2010  does not support most HTML/CSS and renders incorrectly for most of what it does support.

Cd&
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 334 total points
ID: 39208740
This support matrix might help you:
http://www.campaignmonitor.com/css/

Cd&
0
 
LVL 17

Assisted Solution

by:jrm213jrm213
jrm213jrm213 earned 166 total points
ID: 39259407
I don't know if it is an option but I don't bother creating email html anymore it is too difficult/time consuming and client's don't want to pay for all that time or the testing required.

I use mailchimp.com to build the html emails now. They have numerous templates you can use to start your design from and a lot of configuration you can do including font's, background colors, etc.. and I don't know if they all are now but the majority of their templates seem to be done with responsive design.

It looks like they end up putting some msoffice type proprietary tags in their tables to handle the issues you are talking about with outlook. The biggest issue I have run into lately with Outlook is that they completely removed support for "margin" in CSS. At least outlook for the web/the new hotmail did.
0
 

Author Closing Comment

by:garethtnash
ID: 39296866
Outlook 2007 / 2010  does not support most HTML/CSS and renders incorrectly...... Totally Agree - Thanks Microsoft....
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
paypal ipn url 5 57
CSS: How do I override in-line styling 11 15
tiny glitch in my main slider 3 23
Index on a Table 6 11
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
This video shows how to remove a single email address from the Outlook 2010 Auto Suggestion memory. NOTE: For Outlook 2016 and 2013 perform the exact same steps. Open a new email: Click the New email button in Outlook. Start typing the address: …

776 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