Formatting Problems in Gmail and Outlook

Hi.  First time posting.  Please excuse any total noob errors.  Having a challenging time getting email to appear well/consistently across Outlook/Gmail. 

Email appears as desired in IE:
http://www.mmaltzan.com/htmlemail/troubleshooting/htmlemail-internetexplorer.jpg
It looks OK with a few problems in Outlook:
http://www.mmaltzan.com/htmlemail/troubleshooting/htmlemail-outlook.jpg

My thoughts (the text at the top allows it to be custom delivered if we're not mass-emailing):

Outlook problems:
1.  Blue title bar height not consistent with IE.  Using nested table there so that the text can be changed and the bar fits around content + 50px.  Other thoughts on a better way to do this?
2.  Spacing between links and the surrounding lines varies wildly.  How to fix?
3.  In three places, I am using an admittedly ghetto method to space out content, using a white gif to vertically space content -- see code below (I can't use top padding or margin for the following element because the email is designed so multiple pieces of code can be repeated to stack more content).  I tried a blank TD and an empty table--both didn't seem to work.  Thoughts?
4.  The horizontal alignment of the four TDs in the footer get all out of whack in Outlook from how they appear (correctly) in IE.  How to fix?

And looks like crap in Gmail:
http://www.mmaltzan.com/htmlemail/troubleshooting/htmlemail-gmail.jpg

GMail Problems:
1.  I am getting horrible white spaces vertically between all image elements, making the Gmail layout a mess.  I have found reference to using style="display:block;" ... I attempted this to no avail.  The Campaign Monitor templates seem to suffer this somehwhat (their vertical spacing being a little taller/more spread out in Gmail than in Outlook) ... Help?
2.  Text-decoration: none seems to not work in Gmail.  Further, the underlines are Gmail blue, not colored per the layout.  The Campaign Monitor templates seem to suffer a similar fate.  Thoughts on how to eliminate or at least color the Gmail underlines?

Many thanks if you can shed light on any or all of the above.

Here's the code if you want to take a look:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Michael Maltzan Architecture / October 2010</title> 

<style type="text/css" media="screen"> 
body {
    background-color: #ffffff;
}
td.introduction { 
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #000000;
    margin: 0px;
    padding: 0px;
    text-align: left;
}
td.header { 
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 10px; 
    font-weight: normal;    
    color: #00aeef;
    margin: 0px;
    padding: 4px 0px 0px 0px;
    text-align: left;
}
td.header a { 
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 10px; 
    font-weight: normal;    
    color: #00aeef;
    margin: 0px;
    padding: 4px 0px 0px 0px;
    text-decoration: none;
    text-align: left;
}
td.line1 { 
    line-height: 0px;
    padding: 3px 0px 0px 0px;
    margin: 0px;
}
table.titleblock1 {
    background-color: #00aeef;
    margin: 0px 0px 0px 0px;
    padding: 0px;
}
td.titleblock { 
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px; 
    font-weight: normal;    
    color: #fff;
    margin: 0px;
    padding: 1px 50px 0px 8px;
    text-align: left;
}
td.image {
    background-color: #ffffff;
    padding: 4px 0px 0px 0px;
    margin: 0px;
}
td.bodytext { 
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 12px; 
    font-style: italic;
    font-weight: normal;    
    color: #000000;
    margin: 0px 0px 0px 2px;
    padding: 0px;
    line-height: 16px;
}
td.line2 { 
    margin: 0px;
    padding: 10px 0px 0px 0px;
}
td.line3 { 
    margin: 0px;
    padding: 1px 0px 2px 0px;
}
td.line4 { 
    margin: 0px;
    padding: 2px 0px 2px 0px;
}
td.links a { 
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 11px; 
    font-weight: bold;    
    color: #00aeef;
    margin: 0px;
    padding: 0px 0px 0px 0px;
    text-decoration: none;
    text-align: left;
}
td.press { 
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 11px; 
    font-weight: normal;    
    color: #00aeef;
    margin: 0px;
    padding: 0px 0px 0px 0px;
    text-align: left;
}
td.press a { 
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 11px; 
    font-weight: normal;    
    color: #00aeef;
    margin: 0px;
    padding: 25px 0px 0px 0px;
    text-decoration: none;
    text-align: left;
}
td.line5 { 
    margin: 0px;
    padding: 2px 0px 0px 0px;
}
td.footer { 
    font-family: Verdana, Helevetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
    color: #00aeef;
    text-align: left;  
    vertical-align: bottom;
    margin: 0px;
    padding: 0px;
    height: 60px;
}
td.footer a { 
    font-family: Verdana, Helevetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
    color: #00aeef;
    text-align: right;  
    vertical-align: bottom;
    text-decoration: none;
    margin: 0px;
    padding: 0px;
}
img {display: block;}
</style> 

</head> 

<body> 

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="background1"> 
    <tr> 
        <td align="center"> 
            <table width="600" border="0" cellspacing="0" cellpadding="0"> 

<!--INTRODUCTION--> 
                    <tr> 
                        <td class="introduction"> 
                              Firstname Lastname:<br/><br/>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dignissim, dui quis sagittis elementum, enim nunc elementum enim, at tincidunt ligula tellus non nunc. Praesent non consequat leo. Nulla eu turpis eu lectus aliquam ornare bibendum at neque. Donec id purus quis dui sollicitudin dictum a et magna. Aenean quis neque ipsum. Vivamus dignissim tempus commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce eu venenatis elit. Ut ut lacus ac augue imperdiet mollis eu posuere diam. Morbi laoreet consequat justo, eu rutrum purus cursus quis.
                        <br/><br/>Jen Lathrop<br/>Director of Business Development & Communications<br/><br/>
                         </td> 
                    </tr>
<!--HEADER-->
                    <tr> 
                    <td>    
                        <img src="http://www.mmaltzan.com/htmlemail/common/line.gif" alt="" width="600" height="1" style="display:block;"/> 
                    </td>  
                    </tr>                            
                    <tr> 
                        <td class="header"> 
                        Email not appearing correctly? &nbsp;&nbsp;<a href="http://www.mmaltzan.com/htmlemail/october2010/email.html">View it online.&nbsp;&#62</a> 
                           </td> 
                    </tr>
                    <tr> 
                    <td class="line1">    
                        <img src="http://www.mmaltzan.com/htmlemail/common/line.gif" alt="" width="600" height="1" style="display:block;"/>
                    </td> 
                </tr>
                <tr>
                    <td>    
                        <img src="http://www.mmaltzan.com/htmlemail/common/white.gif" alt="" width="600" height="8" style="display:block;"/>                                                            
                    </td>  
                    </tr>    
<!--TITLE--> 
                <tr> 
                      <td align="left"> 
                        <table border="0" cellspacing="2" cellpadding="0" class="titleblock1" height="32px"> 
                            <tr> 
                                    <td class="titleblock"> 
                                          GRAND OPENING // CENTRAL PARK AT PLAYA VISTA
                                     </td> 
                                </tr> 
                        </table>
                    </td>
                </tr>
<!--IMAGE-->
                <tr> 
                    <td class="image"> 
                        <img src="http://www.mmaltzan.com/htmlemail/2010-10/playavistaphoto.jpg" alt="Playa Vista Photograph" width="600" height="300" style="display:block;"/>
                         </td> 
                   </tr> 
<!--BODY TEXT--> 
                <tr> 
                    <td>    
                        <img src="http://www.mmaltzan.com/htmlemail/common/white.gif" alt="" width="600" height="10" style="display:block;"/>                                        
                    </td>  
                    </tr>
                    <tr> 
                        <td class="bodytext" align="left"> 
                              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                         </td> 
                    </tr> 
<!--LINKS--> 
                <tr> 
                    <td class="line2" align="left">     
                        <img src="http://www.mmaltzan.com/htmlemail/common/line.gif" alt="" width="345" height="1" style="display:block;"/> 
                    </td>  
                    </tr>    
                    <tr> 
                    <td class="line3" align="left">     
                        <img style="display: block;" src="http://www.mmaltzan.com/htmlemail/common/line.gif" alt="" width="345" height="1" style="display:block;"/>
                    </td>  
                    </tr>    
                    <tr> 
                        <td class="links" align="left"> 
                              <a href="http://www.link1.com">&#62 PROJECT PAGE / CENTRAL PARK AT PLAYA VISTA</a>
                         </td> 
                    </tr> 
                    <tr> 
                    <td class="line4" align="left">     
                        <img src="http://www.mmaltzan.com/htmlemail/common/line.gif" alt="" width="345" height="1" style="display:block;"/>
                    </td>  
                    </tr>    
<!--LINK 2-->    
                    <tr> 
                        <td class="links" align="left"> 
                              <a href="http://www.link1.com">&#62 SECOND LINK IS THE SECOND LONGEST</a> 
                         </td> 
                    </tr> 
                    <tr> 
                    <td class="line4" align="left">     
                        <img src="http://www.mmaltzan.com/htmlemail/common/line.gif" alt="" width="270" height="1" style="display:block;"/>
                    </td>  
                    </tr>    
<!--LINK 3--> 
                    <tr> 
                        <td class="links" align="left">  
                              <a href="http://www.link1.com">&#62 AND A THIRD LINK HERE</a>  
                         </td> 
                    </tr> 
                    <tr> 
                    <td class="line4" align="left">     
                        <img src="http://www.mmaltzan.com/htmlemail/common/line.gif" alt="" width="180" height="1" style="display:block;"/>
                    </td>  
                    </tr>    
<!--END OF LINKS-->
                <tr> 
                    <td>    
                        <img src="http://www.mmaltzan.com/htmlemail/common/white.gif" alt="" width="600" height="15" style="display:block;"/>                                        
                    </td>  
                    </tr>
<!--FOOTER--> 
                <tr> 
                        <td class="press"> 
                        For more information contact:&nbsp;&nbsp;<a href="mailto:press@mmaltzan.com">&#62press@mmaltzan.com</a>
                           </td> 
                </tr> 
                    <tr> 
                    <td class="line5">    
                        <img style="display: block;" src="http://www.mmaltzan.com/htmlemail/common/line.gif" alt="" width="600" height="1" style="display:block;"/> 
                    </td>  
                    </tr> 
                <tr> 
                      <td align="left"> 
                        <table width="600" border="0" cellspacing="0" cellpadding="0"> 
                            <tr> 
                                <td class="footer"> 
                                    <img src="http://www.mmaltzan.com/htmlemail/common/mma_logo.gif" alt="MICHAEL MALTZAN ARCHITECTURE" width="145" height="52" style="display:block;"/> 
                                </td> 
                                <td class="footer" width="255px"> 
                                    2801 Hyperion Avenue<br/>Studio 107<br/>Los Angeles, California 90027&nbsp;&nbsp;
                                </td> 
                                <td class="footer" width="155px"> 
                                    T 323 913 3098<br/>F 323 913 5932&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                </td> 
                                <td class="footer"> 
                                    <a href="http://www.mmaltzan.com">www.mmaltzan.com</a>
                                </td> 
                            </tr> 
                        </table> 
                      </td> 
                   </tr> 
<!--END-->
            </table>
          </td> 
       </tr> 
</table> 
 
</body> 
</html>
jerallyn jerallyn, 6 years ago

Hi carson,

Outlook problems
1. If cellspacing and cellpadding isn't working for you, add <tr><td height="10" colspan="xx"></td></tr> above and below the text.
2. Make each border + some whitespace into an image and insert in between the text links. Separate the images and text with line breaks. You could use a minimum of 3 table rows for this section.
3. To space out content you need to add a width to every td cell in each table. The td cells must add up correctly to the table width.
4. Add a width to each cell. Just use width="50" not width="50px".

Gmail problems
1. Add margin:0;padding:0; to the images as well. Yes CM templates add a <p> around text. Add p{margin:0;padding:0} to your styles.
2. text-decoration:none; does work in Gmail. eg. <a href="#" target="_blank" style="text-decoration:none;color:#3399ff;">your link</a>

PS your html has validation errors - particularly with the images.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098