Menu
I'm trying to create an HTML newsletter template that will show a list of tags at some point in that email. The number of elements of that list is dynamic. Instead of having a comma/space-separated list, I would like to style those tags with a border around each of the tags, for example.
Formatting as a table will probably not work, because generating one for each tag will create a table too wide to display properly within its parent table. On the other hand, generating one will not result in an inline list.
I thought of either doing it using with their css set to display:inline; or a set to display:inline; as well:
<span class="hashtag-span">#hashtag</span>
<span class="hashtag-span">#anotherone</span>
or alternatively
<ul class="hashtag-list">
<li>#hashtag</li>
<li>#anotherone</li>
</ul>
Probably the trickiest part: this has to be Outlook-compatible :(
You can see what I'd like to achive in my jsfiddle: http://jsfiddle.net/wo64xLnf/3/
Thanks for your help, crowd!
506
This is not an easy task at all and requires quite a bit of reiterate code. Your best bet is to use MSO conditional with tables to make it work for Outlook and divs with display:inline-block for most other clients. Span tags as objects has very spotty support in many clients, span is best used just for styling fonts in HTML email.
See below for programmatic HTML block:
<!--[if ( gte mso 9) | (IE)]><table align="left"><tr><td align="center" valign="top" style="padding: 0 4px 5px 0;"><![endif]-->
<div style="display: inline-block; vertical-align: top; margin: 0 4px 5px 0;">
<table bgcolor="#eaeaea" valign="top" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; background: #eaeaea;">
<tr>
<td align="center" bgcolor="#eaeaea" style="padding: 3px 5px 3px 3px; font-size: 12px; border: #666666 1px solid;">#hashtag</td>
</tr>
</table>
</div>
<!--[if (mso) | (IE)]></td></tr></table><![endif]-->
And this is a full version using your HTML from the fiddle:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<!--[if ( gte mso 9) | (IE)]><table align="left"><tr><td align="center" valign="top" style="padding: 0 4px 5px 0;"><![endif]-->
<div style="display: inline-block; vertical-align: top; margin: 0 4px 5px 0;">
<table bgcolor="#eaeaea" valign="top" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; background: #eaeaea;">
<tr>
<td align="center" bgcolor="#eaeaea" style="padding: 3px 5px 3px 3px; font-size: 12px; border: #666666 1px solid;">#hashtag</td>
</tr>
</table>
</div>
<!--[if (mso) | (IE)]></td></tr></table><![endif]-->
<!--[if ( gte mso 9) | (IE)]><table align="left"><tr><td align="center" valign="top" style="padding: 0 4px 5px 0;"><![endif]-->
<div style="display: inline-block; vertical-align: top; margin: 0 4px 5px 0;">
<table bgcolor="#eaeaea" valign="top" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; background: #eaeaea;">
<tr>
<td align="center" bgcolor="#eaeaea" style="padding: 3px 5px 3px 3px; font-size: 12px; border: #666666 1px solid;">#anotherone</td>
</tr>
</table>
</div>
<!--[if (mso) | (IE)]></td></tr></table><![endif]-->
<!--[if ( gte mso 9) | (IE)]><table align="left"><tr><td align="center" valign="top" style="padding: 0 4px 5px 0;"><![endif]-->
<div style="display: inline-block; vertical-align: top; margin: 0 4px 5px 0;">
<table bgcolor="#eaeaea" valign="top" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; background: #eaeaea;">
<tr>
<td align="center" bgcolor="#eaeaea" style="padding: 3px 5px 3px 3px; font-size: 12px; border: #666666 1px solid;">#anotherAwesomeHashtag</td>
</tr>
</table>
</div>
<!--[if (mso) | (IE)]></td></tr></table><![endif]-->
<!--[if ( gte mso 9) | (IE)]><table align="left"><tr><td align="center" valign="top" style="padding: 0 4px 5px 0;"><![endif]-->
<div style="display: inline-block; vertical-align: top; margin: 0 4px 5px 0;">
<table bgcolor="#eaeaea" valign="top" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; background: #eaeaea;">
<tr>
<td align="center" bgcolor="#eaeaea" style="padding: 3px 5px 3px 3px; font-size: 12px; border: #666666 1px solid;">#thiswillgoviral</td>
</tr>
</table>
</div>
<!--[if (mso) | (IE)]></td></tr></table><![endif]-->
<!--[if ( gte mso 9) | (IE)]><table align="left"><tr><td align="center" valign="top" style="padding: 0 4px 5px 0;"><![endif]-->
<div style="display: inline-block; vertical-align: top; margin: 0 4px 5px 0;">
<table bgcolor="#eaeaea" valign="top" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; background: #eaeaea;">
<tr>
<td align="center" bgcolor="#eaeaea" style="padding: 3px 5px 3px 3px; font-size: 12px; border: #666666 1px solid;">#hashtagcraziness</td>
</tr>
</table>
</div>
<!--[if (mso) | (IE)]></td></tr></table><![endif]-->
<!--[if ( gte mso 9) | (IE)]><table align="left"><tr><td align="center" valign="top" style="padding: 0 4px 5px 0;"><![endif]-->
<div style="display: inline-block; vertical-align: top; margin: 0 4px 5px 0;">
<table bgcolor="#eaeaea" valign="top" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; background: #eaeaea;">
<tr>
<td align="center" bgcolor="#eaeaea" style="padding: 3px 5px 3px 3px; font-size: 12px; border: #666666 1px solid;">#thisRocks</td>
</tr>
</table>
</div>
<!--[if (mso) | (IE)]></td></tr></table><![endif]-->
<!--[if ( gte mso 9) | (IE)]><table align="left"><tr><td align="center" valign="top" style="padding: 0 4px 5px 0;"><![endif]-->
<div style="display: inline-block; vertical-align: top; margin: 0 4px 5px 0;">
<table bgcolor="#eaeaea" valign="top" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; background: #eaeaea;">
<tr>
<td align="center" bgcolor="#eaeaea" style="padding: 3px 5px 3px 3px; font-size: 12px; border: #666666 1px solid;">#yetanotherone</td>
</tr>
</table>
</div>
<!--[if (mso) | (IE)]></td></tr></table><![endif]-->
<!--[if ( gte mso 9) | (IE)]><table align="left"><tr><td align="center" valign="top" style="padding: 0 4px 5px 0;"><![endif]-->
<div style="display: inline-block; vertical-align: top; margin: 0 4px 5px 0;">
<table bgcolor="#eaeaea" valign="top" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; background: #eaeaea;">
<tr>
<td align="center" bgcolor="#eaeaea" style="padding: 3px 5px 3px 3px; font-size: 12px; border: #666666 1px solid;">#onemore</td>
</tr>
</table>
</div>
<!--[if (mso) | (IE)]></td></tr></table><![endif]-->
<!--[if ( gte mso 9) | (IE)]><table align="left"><tr><td align="center" valign="top" style="padding: 0 4px 5px 0;"><![endif]-->
<div style="display: inline-block; vertical-align: top; margin: 0 4px 5px 0;">
<table bgcolor="#eaeaea" valign="top" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; background: #eaeaea;">
<tr>
<td align="center" bgcolor="#eaeaea" style="padding: 3px 5px 3px 3px; font-size: 12px; border: #666666 1px solid;">#lastone</td>
</tr>
</table>
</div>
<!--[if (mso) | (IE)]></td></tr></table><![endif]-->
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
