Question

I have been navigating the briar patch that is e-mail newsletter design and coding. One problem keeps on coming up: the line-height of my headings is inconsistent between different e-mail clients.

One set gives a lot of space to a heading, among them Gmail and iPhone:

The other group, mainly Outlook, renders headings with way less leeway:

My code is as follows:

<table width="540" cellpadding="0" cellspacing="0" border="0">
<tr>
    <td colspan="5" width="270" height="7" style="line-height: 7px;"><img src="img/shading-top-orange.gif" width="270" height="7" style="display:block;"></td>
    <td rowspan="3" width="270" height="199"><img editable width="270" height="199" style="display:block;"></td>
</tr>
<tr bgcolor="#f68b1f" >
    <td width="10" height="185"><img src="img/shading-left-large.gif" width="10" height="185" style="display:block;"></td>
    <td width="15" height="185" bgcolor="#f68b1f"></td>
    <td width="223" height="185" bgcolor="#f68b1f" align="left" valign="top"><a name="item2" style="text-decoration: none;"><h2 style="font-family: Arial, Verdana, sans-serif; font-size: 15px; color: white !important; color:white;"><singleline label="Title" repeatertitle="true" style="color: white;">Lorem ipsum</singleline></h2></a><multiline><p style="font-family: Arial, Verdana, sans-serif; font-size: 12px; color: white;">Lorem ipsum dolor sit amet</p></multiline></td>
    <td width="15" height="185" bgcolor="#f68b1f"></td>
    <td width="7" height="185"><img src="img/shading-right-small.gif" width="7" height="185" style="display: block;"></td>
</tr>
<tr>
    <td colspan="5" width="270" height="7" style="line-height: 7px;"><img src="img/shading-bottom-orange.gif" width="270" height="7" style="display:block;"></td>
</tr>

with the newletter application filling in the text as needed.

How can I code this piece in such a way that all (or most) clients render the title as in Gmail? I have tried lots of things like adding another nested table for just the heading, giving it an orange top border, etc. These fixes also influence the Gmail rendering and that’s not what I want.

Answer 1

As you’re seeing, you don’t want to rely on line-height in HTML emails because the support between clients is pretty bad and inconsistent. The way to go about this is to, unfortunately, just refactor your code to nest the heck out of some tables.

Check out this Fiddle here, where I basically just nested another table within a td in your second tr. This table has an entire td who’s only job is to be a specific height and create some padding above your headline:

<tr bgcolor="#f68b1f" >
    <td width="10" height="185"><img src="img/shading-left-large.gif" width="10" height="185" style="display:block;"></td>
    <td colspan="3">  
        <table> <!--the new nested table-->
            <tr>
                <td bgcolor="#f68b1f" colspan="3" height="15"></td>
            </tr>

Unfortunately it’s these kinds of table-based layout hacks that you’ll have to rely on in the world of HTML emails, instead of actual CSS like line-height.