Solved

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

Posted on 2013-05-30
4
555 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Are you irritated by repeating emails issue in Microsoft Outlook 2016 after recent update ?  Lets’ see how to resolve and prevent duplicate emails in the Outlook 2016 using some simple techniques.
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…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Suggested Courses

632 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