More often that not when I'm working on an email using some random template I receive from a client, I see different techniques for creating spacing between blocks of text and objects in an email.
Some us CSS padding and margin settings. Some use tables with heights set with spacer.gifs etc. Some just us <P> tags.
My experience that using padding and margin is mixed especially in Outlook. Using stand alone tables works but I found for some reason in outlook it will make transparent gifs visible by making them gray if you have a height set on the gif. <P> tags are not consistent across email clients either.
So what is a poor soul to do? What do you do?
I use nested table cells to create horizontal spacing, and <div>'s to create vertical spacing. (set the line-height in the <div>, and the vertical space is based on that line-height.)
Tables and <div>'s are the absolute most reliable spacing you can provide.
I use <div>'s for not only spacing, but also for all text formatting and line spacing (I only use <p>'s for CM's description tag requirement). Yes, its a bit more code, but copy and paste works quite well. :-)
In addition, I place <font> tags outside the <div>'s for Outlook Web Access support. (OWA doesn't support style tags). Any browsers that don't recognize styles will default to the <font> tag settings.
To keep vertical spacing as consistent as possible, I use the following conversion table for styles to <font>:
4px - 10px : size="1"
11px - 13px : size="2"
14px - 16px : size="3"
17px - 21px : size="4"
22px - 29px : size="5"
30px - 36px : size="6"
36px+ : size="7"
Got any code samples?
<table width="100" cellpadding="0" cellspacing="0" border="0"> <tr> <td width="10"> </td> <td width="80"> <font size="2" face="Arial,sans-serif" color="#000000"> <div style="font-size:12px; line-height:15px;"> </div> <div align="left" style="font-size:12px; line-height:15px; font-family:Arial,sans-serif; color:#000000;">Text between line spaces</div> <div style="font-size:12px; line-height:15px;"> </div> <div align="left" style="font-size:12px; line-height:15px; font-family:Arial,sans-serif; color:#000000;">More text between line spaces</div> <div style="font-size:12px; line-height:15px;"> </div> </font> <font size="1"><div style="font-size:8px; line-height:11px;"> </div></font> </td> <td width="10"> </td> </tr> </table>
I just tried that to replace a spacer.gif pattern on a layout. I have a strange problem. when I build the email, it works fine. But when we run test form our template builder (not CM) the transparent gifs shows up almost everywhere.
This technique works really well but for hotmail on explorer where the divs are squashed. Do you have the same issue?
Post your code, lets take a look at it!
Second to Alex, a screenshot would be great, too. If you're using another service's template builder, there's a chance that it may be adding some additional code, so it's worth keeping that in mind, too.
the best way to create spacing in email is to use empty <td>.
It's a boring way, but it's very difficult to use <div> with css and have a homogeneous result on the different webmails of software...
And a screenshot would be great :)
From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that drive real business results.Get started for free