Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 566
  • Last Modified:

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
0
garethtnash
Asked:
garethtnash
  • 2
3 Solutions
 
COBOLdinosaurCommented:
Outlook 2007 / 2010  does not support most HTML/CSS and renders incorrectly for most of what it does support.

Cd&
0
 
COBOLdinosaurCommented:
This support matrix might help you:
http://www.campaignmonitor.com/css/

Cd&
0
 
jrm213jrm213Commented:
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

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now