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

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
garethtnashAsked:
Who is Participating?
 
COBOLdinosaurConnect With a Mentor Commented:
Outlook 2007 / 2010  does not support most HTML/CSS and renders incorrectly for most of what it does support.

Cd&
0
 
COBOLdinosaurConnect With a Mentor Commented:
This support matrix might help you:
http://www.campaignmonitor.com/css/

Cd&
0
 
jrm213jrm213Connect With a Mentor Commented:
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
 
garethtnashAuthor Commented:
Outlook 2007 / 2010  does not support most HTML/CSS and renders incorrectly...... Totally Agree - Thanks Microsoft....
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.