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:\[code\]<table width="540" cellpadding="0" cellspacing="0" border="0"><tr> <td colspan="5" width="270" height="7" style="line-height: 7px;"><img src="http://stackoverflow.com/questions/12728263/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="http://stackoverflow.com/questions/12728263/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="http://stackoverflow.com/questions/12728263/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="http://stackoverflow.com/questions/12728263/img/shading-bottom-orange.gif" width="270" height="7" style="display:block;"></td></tr>\[/code\]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.