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!
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>
I actually Just had this exact same problem. Here is a solid solution I came up with:
<tr>
<td align="left">
<table>
<tr>
<td valign="center" align="left" style="padding: 2px 2px 0 0;">
<span style="padding: 2px 4px; border: 1px solid #dddddd; border-radius: 6px; -webkit-border-radius: 6px;">
hashtag
</span>
</td>
</tr>
</table>
</td>
</tr>
Phillyoo, Outlook doesn't render 'display' style attributes. Even though the code above works, it will not render properly in Outlook.
Check out https://www.campaignmonitor.com/css/ - it's a good guide for designing emails.
You should be able to achieve your desired goal by using tables, rows, and td's. Use inline styling and apply 'align="left"' to your nested td's.
Example:
<table width="100%">
<tr>
<td>
<table>
<tr>
<td align="left" style="">#hashtag</td>
</tr>
</table>
<table>
<tr>
<td align="left" style="">#hashtag</td>
</tr>
</table>
</td>
</tr>
</table>
You could also try having the TD tags in the same nested table and see how that works for you.
Best
Related
I have a simple 2 column layouts using a hybrid fluid design. I want the columns to stack on top of each other on mobile screens. I have a two-columns class table that wraps around my column class tables. On my column class tables i have style="display: inline-block; vertical-align: top; width: 100%; max-width: 300px; border-spacing:0; background-color: #D93644;". This table holds my img tag on this one column. My other column holds the writing content.
This section alone should be should be responsive already due to the inline-block, width and max width styling but it doesn't stack on top of each other on smaller screens and I cannot for the life of me figure out why and its probably something so so simple. Really need help with this.
<!-- START 1ST TWO COLUMN -->
<tr>
<td>
<table width="100%" style="border-spacing: 0;" role="presentation">
<tr>
<td class="two-columns" style="padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; font-size: 0; text-align: center;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%" style="border-spacing:0;" role="presentation">
<tr>
<td width="300" valign="top" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;">
<![endif]-->
<table class="column" role="presentation" style="display: inline-block; vertical-align: top; width: 100%; max-width: 300px; border-spacing:0; background-color: #D93644;">
<tr>
<td class="padding" style="background-color: #D93644; padding-top: 0; padding-right: 0px; padding-bottom: 0; padding-left: 0px; font-size: 0;">
<table class="content" role="presentation" style="border-spacing: 0; text-align: left;">
<tr>
<td style="background-color: #D93644;">
<img class="two-col-img" width="280" style="max-width: 280px;" height="215.7" src="http://ibb.co.com/images/c81e0cd1b8b486f30644ee03f4a1988e.png" alt="airplane" border="0" title="airplane with red background">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td><td width="300" valign="middle" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;">
<![endif]-->
<table class="column" role="presentation" style="display: inline-block; vertical-align: top; width: 100%; border-spacing:0; max-width: 300px;" >
<tr>
<td class="padding" style="padding-top: 0; padding-right: 15px; padding-bottom: 0; padding-left: 15px; font-size: 0;">
<table class="content" role="presentation" style="border-spacing: 0; text-align: left;">
<tr>
<td>
<p style="font-size: 20px; font-weight: bold; color: #808080;">We Can Give
Your Career Wings</p>
<p style="font-size: 12px; color: #808080;">Ascent Aviation Services hold one of only two Class IV CFR Part 145 license that allows us to specialize in the operation of every aspect of aircraft maintenance (Narrow and wide body, small to large, regional to long-haul).</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
<!-- END 1ST TWO COLUMN -->
I am new to email designing. I've an image, some text and a button in a row. When viewed on a mobile device, the image has to be static and the button need to come below the text. So the Image and the text + button has to be side by side. I've used divs and nested divs. Its working as expected on Mobile device. However, the layout is breaking on some web based mail clients such as AOL, Yahoo and Gmail. Working fine on comcast and outlook web. Not sure what I am doing wrong. Please help.
Correctly rendered on comcast web.
Incorrectly rendered on Yahoo web based mail.
Here is the code I've used :
#media screen and (max-width: 480px) {
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* What it does: Forces table cells into 1/3-width rows. */
.stack-column-half,
.stack-column-center-half {
display: inline-block !important;
width: 140px !important;
max-width: 140px !important;
direction: ltr !important;
}
/* What it does: Forces table cells into 2/3-width rows. */
.stack-column-2half,
.stack-column-center-2half {
display: inline-block !important;
width: 190px !important;
max-width: 190px !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
/* What it does: Adjust typography on small screens to improve readability */
.email-container p {
font-size: 17px !important;
}
<tr>
<!-- dir=ltr is where the magic happens. This can be changed to dir=rtl to swap the alignment on wide while maintaining stack order on narrow. -->
<td dir="ltr" height="100%" valign="top" width="100%" style="font-size:0; padding: 10px 0; background-color: #ffffff;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600" style="width: 600px;">
<tr>
<td valign="top" width="200" style="width: 200px;">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; max-width: 200px; min-width:80px; vertical-align:top; width:100%;" class="stack-column-half">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="padding: 0 10px 10px 10px;">
<img src="https://aishvaryarastogi.worldsecuresystems.com/waze-newsletter-images/Waze_Newsletter_Modules_Desktop_22.png" width="180" height="" border="0" alt="alt_text" class="center-on-narrow" style="width: 100%; max-width: 180px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555; border-radius: 10px;">
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td valign="top" width="400" style="width: 400px;">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; max-width: 400px; min-width:160px; vertical-align:top; padding-top: 40px; " class="stack-column-2half mobile-padding1">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="font-family:'Open Sans', Arial, sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 10px 0px 0; text-align: left;" class="center-on-narrow fallback-text mobile-padding1">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="400">
<tr>
<td valign="middle" width="200">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; width:100%; min-width:80px; max-width:200px; vertical-align:top; padding: 0 0px;" class="stack-column" align="left">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 0 20px;" class="mobile-padding1">
<h2 style="margin: 0 0 10px 0; font-family:'Open Sans', Arial, sans-serif; font-size: 15px; line-height: 18px; color: #333333; font-weight: bold;">John Smith</h2>
<p style="margin: 0 0 10px 0;">Title, title</p>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td valign="middle" width="200">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; width:100%; min-width:80px; max-width:200px; vertical-align:top; padding-top:0 0px; " class="stack-column mobile-padding1">
<!-- Button : BEGIN -->
<!--[if mso]>
<v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="https://google.com/" style="height:45px;v-text-anchor:middle;width:150px;" arcsize="50%" stroke="false" fillcolor="#32C2EE">
<w:anchorlock/>
<center style="color:#333333;font-family:'Open Sans', Arial,sans-serif;font-size:15px;">Contact</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]> <!-->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" style="float:none;" align="left">
<tr>
<td class="button-td button-td-primary" style="border-radius: 30px; background: #ffffff;">
<a class="button-a button-a-primary fallback-text" href="https://google.com/" style="background: #32C2EE; border: 0px solid #000000; font-family:'Open Sans', Arial, sans-serif; font-size: 15px; font-weight: bold; line-height: 15px; text-decoration: none; padding: 18px 55px; color: #333333; display: block; border-radius: 30px;">Contact</a>
</td>
</tr>
</table>
<!-- <![endif]-->
<!-- Button : END -->
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- Thumbnail Left, Text Right : END -->
I had a play with your code and it seems you are missing width:100%; on the following line:
<div style="display:inline-block; margin: 0 -1px; max-width: 400px; min-width:160px; vertical-align:top; padding-top: 40px;" class="stack-column-2half mobile-padding1">
Once added, the contact link went back into the same line as John Smith and Title, title.
You can try the code below to see if it works for you. I had to add table codes around the table rows to get the rendering to work.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<!-- dir=ltr is where the magic happens. This can be changed to dir=rtl to swap the alignment on wide while maintaining stack order on narrow. -->
<td dir="ltr" height="100%" valign="top" width="100%" style="font-size:0; padding: 10px 0; background-color: #ffffff;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600" style="width: 600px;">
<tr>
<td valign="top" width="200" style="width: 200px;">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; max-width: 200px; min-width:80px; vertical-align:top; width:100%;" class="stack-column-half">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="padding: 0 10px 10px 10px;">
<img src="https://aishvaryarastogi.worldsecuresystems.com/waze-newsletter-images/Waze_Newsletter_Modules_Desktop_22.png" width="180" height="" border="0" alt="alt_text" class="center-on-narrow" style="width: 100%; max-width: 180px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555; border-radius: 10px;">
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td valign="top" width="400" style="width: 400px;">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; max-width: 400px; min-width:160px; vertical-align:top; padding-top: 40px;width:100%;" class="stack-column-2half mobile-padding1">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="font-family:'Open Sans', Arial, sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 10px 0px 0; text-align: left;" class="center-on-narrow fallback-text mobile-padding1">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="400">
<tr>
<td valign="middle" width="200">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; width:100%; min-width:80px; max-width:200px; vertical-align:top; padding: 0 0px;" class="stack-column" align="left">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 0 20px;" class="mobile-padding1">
<h2 style="margin: 0 0 10px 0; font-family:'Open Sans', Arial, sans-serif; font-size: 15px; line-height: 18px; color: #333333; font-weight: bold;">John Smith</h2>
<p style="margin: 0 0 10px 0;">Title, title</p>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td valign="middle" width="200">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; width:100%; min-width:80px; max-width:200px; vertical-align:top; padding-top:0 0px; " class="stack-column mobile-padding1">
<!-- Button : BEGIN -->
<!--[if mso]>
<v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="https://google.com/" style="height:45px;v-text-anchor:middle;width:150px;" arcsize="50%" stroke="false" fillcolor="#32C2EE">
<w:anchorlock/>
<center style="color:#333333;font-family:'Open Sans', Arial,sans-serif;font-size:15px;">Contact</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]> <!-->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" style="float:none;" align="left">
<tr>
<td class="button-td button-td-primary" style="border-radius: 30px; background: #ffffff;">
<a class="button-a button-a-primary fallback-text" href="https://google.com/" style="background: #32C2EE; border: 0px solid #000000; font-family:'Open Sans', Arial, sans-serif; font-size: 15px; font-weight: bold; line-height: 15px; text-decoration: none; padding: 18px 55px; color: #333333; display: block; border-radius: 30px;">Contact</a>
</td>
</tr>
</table>
<!-- <![endif]-->
<!-- Button : END -->
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- Thumbnail Left, Text Right : END -->
</tbody>
</table>
My email signature works perfectly fine on iOS Mail in the default Light Mode.
However if you switch to Dark Mode and send an email with it, the background of the full message becomes white. The content is also touching the edge on the left hand side, which doesn't look good.
Ideally I would like the background in Dark Mode to be transparent, dark text to switch to white etc.
I have tried various things such as setting all the fonts/ backgrounds to #000000, however that didn't change anything.
Please see my code below, together with a screenshot taken in Dark Mode:
<table width="320" cellspacing="0" cellpadding="0" border="0" style="width: 320px; max-width: 320px; background-color: transparent;">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="font-weight: bold; font-family: Arial, sans-serif; font-size: 16px; line-height: 19px; color: #000000;">
Joe Bloggs
</td>
</tr>
<tr>
<td style="font-family: Arial, sans-serif; line-height: 19px; font-size: 14px; color: #3d3c3f;">
Project Manager
</td>
</tr>
<tr>
<td width="320" style="font-size:1px; line-height: 8px;"> </td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="line-height: 18px; border-spacing: 0;">
<tbody>
<tr>
<td style="padding-right: 3px; font-size: 13px;" align="center" valign="middle">
<img alt="Mobile" border="0" width="12" height="12" style="border: 0; height: 12px; width: 12px;" src="https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/phone.png" />
</td>
<td style="padding-right: 3px; font-size: 13px;" align="left" valign="middle">
<a href="tel:+4407777777777" style="font-family: Arial, sans-serif; color: #888888; color: #888888 !important; text-decoration: none !important; text-decoration: none;">
+44 (0)7777 777777
</a>
</td>
</tr>
<tr>
<td style="padding-right: 3px; font-size: 13px;" align="center" valign="middle">
<img alt="Email" border="0" width="12" height="12" style="border: 0; height: 12px; width: 12px;" src="https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/email.png" />
</td>
<td style="padding-right: 3px; font-size: 13px;" align="left" valign="middle">
<a href="mailto:test#gmail.com" title="Email me" style="font-family: Arial, sans-serif; color: #0b9cab; color: #0b9cab !important; text-decoration: none !important; text-decoration: none;">
test#gmail.com
</a>
</td>
</tr>
<tr>
<td style="padding-right: 3px; font-size: 13px;" align="center" valign="middle">
<img alt="Website" border="0" width="12" height="12" style="border: 0; height: 12px; width: 12px;" src="https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/www.png" />
</td>
<td style="padding-right: 3px; font-size: 13px;" align="left" valign="middle">
<a
href="#"
title="Visit our website"
target="_blank"
style="font-family: Arial, sans-serif; color: #0b9cab; text-decoration: none !important; text-decoration: none;"
>
website-address.co.uk
</a>
</td>
</tr>
<tr>
<td style="padding-right: 3px; font-size: 13px;" align="center" valign="middle">
<img alt="Address" border="0" width="12" height="12" style="border: 0; height: 12px; width: 12px;" src="https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/address.png" />
</td>
<td style="padding-right: 3px; font-size: 13px;" align="left" valign="middle">
<span style="font-size: 13px; font-family: Arial, sans-serif; color: #888888; color: #888888 !important; padding-left: 2px; text-decoration: none !important; text-decoration: none;">
19 London Road, London,
</span>
<br />
</td>
</tr>
<tr>
<td style="font-size: 13px;" align="left" valign="middle"></td>
<td style="font-size: 13px; padding-left: 3px;" align="left" valign="middle">
<span style="font-size: 13px; font-family: Arial, sans-serif; color: #888888; color: #888888 !important; text-decoration: none !important; text-decoration: none;">
LE43 0RR, United Kingdom
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="320" style="font-size:1px; line-height: 10px;"> </td>
</tr>
<tr>
<td width="320" style="font-size:1px; line-height: 2px; background-color: #0b9cab;"> </td>
</tr>
<tr>
<td width="320" style="font-size:1px; line-height: 10px;"> </td>
</tr>
<tr>
<td>
<table width="320" cellspacing="0" cellpadding="0" border="0" width="320px" style="background-color: #000000; border-spacing: 0;">
<tr>
<td valign="middle" width="90" style="width: 90px; font-family: Arial, sans-serif; font-size: 13px; color: #ffffff; padding-left: 10px;">
Follow us:
</td>
<td height="32" valign="middle" style="height: 32px;">
<table cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0;">
<tr>
<td valign="middle">
<a href="#" target="_blank" style="text-decoration: none;">
<img
alt="Facebook icon"
title="Instagram"
border="0"
width="16"
height="16"
style="display: block; border: 0; height: 16px; width: 16px;"
src="https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/fb-2ef13da0.png"
/>
</a>
</td>
<td valign="middle" style="padding-left: 10px;">
<a href="#" target="_blank" style="text-decoration: none;">
<img
alt="Instagram icon"
title="Instagram"
border="0"
width="16"
height="16"
style="display: block; border: 0; height: 16px; width: 16px;"
src="https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/insta-3478a59b.png"
/>
</a>
</td>
<td valign="middle" style="padding-left: 10px;">
<a href="#" target="_blank" style="text-decoration: none;">
<img
alt="Pinterest icon"
title="Pinterest"
border="0"
width="16"
height="16"
style="display: block; border: 0; height: 16px; width: 16px;"
src="https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/pin.png"
/>
</a>
</td>
<td valign="middle" style="padding-left: 10px;">
<a href="#" target="_blank" style="text-decoration: none;">
<img
alt="Website icon"
title="Visit our website"
border="0"
width="14"
height="14"
style="display: block;border: 0; height: 16px; width: 16px;"
src="https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/web.png"
/>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="320" style="font-size:1px; line-height: 7px; background-color: #0b9cab;"> </td>
</tr>
I'm trying to achieve an email design where there's text over an image, but that table is on top of 2 background colors. I used a white space image for that effect but I think the outlook hack is not working because I'm using 2 background images.
Does anyone have an idea what I can do? Maybe a CSS trick for the white space?
This is what I want to see:
(https://ibb.co/fQzPSDV)
But my results are all over the place.
<table class="mktoModule module_wrapper m_header mktoModule module_wrapper m_header" id="header2" style="border-spacing: 0; border-collapse: collapse;" align="center" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="module" style="mso-line-height-rule: exactly;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;word-break: break-word;background-image:https://campaign.yougov.com/rs/060-QFD-941/images/whitespace.png;padding-left: 0;background-position:top center;background-size:auto;background-color:#9078d7;padding-top: 0;padding-right: 0;padding-bottom: 0;background-repeat: repeat-x ;background:https://campaign.yougov.com/rs/060-QFD-941/images/whitespace.png;" valign="top" bgcolor="#9078d7" background="https://campaign.yougov.com/rs/060-QFD-941/images/whitespace.png">
<center>
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:800px;height:120px">
<v:fill type="frame" src="https://campaign.yougov.com/rs/060-QFD-941/images/whitespace.png" color="#9078d7" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<div><div style="font-size: 0;line-height: 0;margin: 0;border: 0">
<![endif]-->
<table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td class="module" style="mso-line-height-rule: exactly;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;word-break: break-word;background-image:https://campaign.yougov.com/rs/060-QFD-941/images/templatebg.jpg;padding-left: 0;background-position:top center;background-size:auto;background-color:#7C64C3;padding-top: 0;padding-right: 0;padding-bottom: 0;background-repeat: repeat-x ;background:https://campaign.yougov.com/rs/060-QFD-941/images/templatebg.jpg;" valign="top" bgcolor="#7C64C3" background="https://campaign.yougov.com/rs/060-QFD-941/images/templatebg.jpg">
<center>
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="false" stroke="false" style="width:600px;height:300px">
<v:fill type="frame" src="https://campaign.yougov.com/rs/060-QFD-941/images/templatebg.jpg" color="#7C64C3" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<div><div style="font-size: 0;line-height: 0;margin: 0;border: 0">
<![endif]-->
<table>
<tbody>
<tr>
<td class="bgImgSpace" style="word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse; mso-line-height-rule: exactly; line-height: 155px; font-size: 155px;" height="155"> </td>
</tr>
<tr>
<td>
<table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" align="center" border="0" cellpadding="0" cellspacing="0" width="500">
<tbody>
<tr>
<td class="primary-font title" style="-moz-hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-ms-text-size-adjust: 100%;hyphens: none;text-align: left;font-family: Arial, sans-serif;font-weight: bold;font-size: 24px;border-collapse: collapse;line-height:26px;color:#ffffff;">
<div class="mktoText" id="heroText2">
Make money online through advertising
</div> </td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td class="bgImgSpace" style="word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse; mso-line-height-rule: exactly; line-height: 35px; font-size: 35px;" height="35"> </td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]></div></div>
</v:textbox>
</v:rect>
<![endif]-->
</center> </td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]></div></div>
</v:textbox>
</v:rect>
<![endif]-->
</center> </td>
</tr>
</tbody>
</table>
Thanks for anyone who can help.
So I'm trying to build my first responsive email, and everything is going pretty well except for my two navigation areas. The first one, I have four buttons that I would like to rearrange from running across, to stacking two ontop of two. It worked in my initial testing, but then when I sent it through my email provider, the first two tds rendered properly (both 50%) but the two that were supposed to lay underneath were all squished up to the side. Same for the second navigation I was trying to do (except, I wanted the three to switch to 100% on top of each other)
Any suggestions on how to fix this would be greatly appreciated! Here is my code (which, is working fine here, but breaks in on all mobile when I actually send it out):
/* Stacked Top Links Navigation Pattern CSS */
#media only screen and (max-width: 400px) {
td[class="main_nav"] {
padding: 0;
}
td[class="main_nav"] td {
display: inline-block;
/*float: left;*/
padding: 0 !important;
width: 50%;
}
td[class="main_nav"] a {
display: block;
padding: 10px 0;
background: #565656;
}
td[class="main_nav"] .nav1 a,
td[class="main_nav"] .nav2 a {
border-bottom: 1px solid #777;
}
td[class="main_nav"] .nav1 a,
td[class="main_nav"] .nav3 a {
border-right: 1px solid #777;
}
}
/* Stacked Top Links Navigation Pattern CSS */
#media only screen and (max-width: 400px) {
td[class="secondary_nav"] {
padding: 0;
}
td[class="secondary_nav"] td {
display: inline-block;
/*float: left;*/
padding: 0 !important;
width: 100%;
}
td[class="secondary_nav"] a {
display: block;
padding: 10px 0;
background: #005c5b;
text-align: center;
}
td[class="secondary_nav"] .nav1 a,
td[class="secondary_nav"] .nav2 a {
border-bottom: 1px solid #fff;
}
}
<!-- BEGINNING OF NAVIGATION -->
<table cellpadding="0" cellspacing="0" bgcolor="#565656">
<tr>
<td class="main_nav" width="600" bgcolor="#565656">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#565656" style="width:100%!important">
<tr>
<td class="nav1" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
Nav 1
</td>
<td class="nav2" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
Nav 2
</td>
<td class="nav3" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
Nav 3
</td>
<td align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
Nav 4
</td>
</tr>
</table>
</td>
</tr>
</table>
<br/>
<!-- END OF NAVIGATION -->
<!-- BEGINNING OF SECONDARY STORY NAVIGATION -->
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td class="secondary_nav" width="600">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#005c5b">
<tr>
<td class="nav1" width="33.33%" align="center" style="padding: 20px 10px 20px 30px; text-align:left;border-right:solid 1px #ffffff;">
Secondary nav 1
</td>
<td class="nav2" width="33.33%" align="center" style="padding: 20px 10px 20px 30px; font-family: arial,sans-serif; font-size: 11px; text-align:left;border-right:solid 1px #ffffff;">
Secondary nav 2
</td>
<td class="nav3" width="33.33%" align="center" style="padding: 20px 10px 20px 30px; font-family: arial,sans-serif; font-size: 11px; text-align:left;">
Secondary nav 3
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END OF SECONDARY STORY NAVIGATION -->
I would suggest swapping out your inline cells for aligned tables. Cells won't play nice with 50%, you always need to go just under that. In saying that, your cells will never align correctly, which you'll see in my version below.
One draw back to using aligned tables so close is that you'll need to add in ghost tables around your tables, to ensure Outlook respects the close alignment you want and doesn't add the 20px margin it requires between tables.
I only made a tweak to your original cell width, to 49% in the header CSS and then I created my aligned tables version in a new row underneath your original code, with a new main_nav_inner class inside of my wrapping table.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
/* Stacked Top Links Navigation Pattern CSS */
#media only screen and (max-width: 400px) {
td[class="main_nav"] {
padding: 0;
}
td[class="main_nav"] td {
display: inline-block;
/*float: left;*/
padding: 0 !important;
width: 49%;
}
td[class="main_nav2"] .main_nav_inner table {
width: 50%!important;
}
td[class="main_nav"] a {
display: block;
padding: 10px 0;
background: #565656;
}
td[class="main_nav"] .nav1 a,
td[class="main_nav"] .nav2 a,
td[class="main_nav2"] .main_nav_inner .nav1,
td[class="main_nav2"] .main_nav_inner .nav2 {
border-bottom: 1px solid #777;
}
td[class="main_nav"] .nav1 a,
td[class="main_nav"] .nav3 a,
td[class="main_nav2"] .main_nav_inner .nav1,
td[class="main_nav2"] .main_nav_inner .nav3 {
border-right: 1px solid #777;
}
}
/* Stacked Top Links Navigation Pattern CSS */
#media only screen and (max-width: 400px) {
td[class="secondary_nav"] {
padding: 0;
}
td[class="secondary_nav"] td {
display: inline-block;
/*float: left;*/
padding: 0 !important;
width: 100%;
}
td[class="secondary_nav"] a {
display: block;
padding: 10px 0;
background: #005c5b;
text-align: center;
}
td[class="secondary_nav"] .nav1 a,
td[class="secondary_nav"] .nav2 a {
border-bottom: 1px solid #fff;
}
}
</style>
</head>
<body style="min-width: 100%; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px" yahoo="fix">
<!-- BEGINNING OF NAVIGATION -->
<table cellpadding="0" cellspacing="0" bgcolor="#565656" width="100%">
<tr>
<td class="main_nav" bgcolor="#565656">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#565656" style="width:100%!important">
<tr>
<td class="nav1" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
Nav 1
</td>
<td class="nav2" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
Nav 2
</td>
<td class="nav3" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
Nav 3
</td>
<td class="nav4" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
Nav 4
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="main_nav2" bgcolor="#565656">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#565656" style="width:100%!important">
<tr>
<td class="main_nav_inner">
<!--[if gte mso 9]>
<table border="0" cellpadding="0" cellspacing="0" style="width:600px;">
<tr>
<td valign="top" style="width:150px;">
<![endif]-->
<table align="left" class="nav1" border="0" cellpadding="0" cellspacing="0" style="width:25%;">
<tr>
<td align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
Nav 1
</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
<td valign="top" style="width:150px;">
<![endif]-->
<table align="left" class="nav2" border="0" cellpadding="0" cellspacing="0" style="width:25%;">
<tr>
<td align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
Nav 2
</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
<td valign="top" style="width:150px;">
<![endif]-->
<table align="left" class="nav3" border="0" cellpadding="0" cellspacing="0" style="width:25%;">
<tr>
<td align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
Nav 3
</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
<td valign="top" style="width:150px;">
<![endif]-->
<table align="left" class="nav4" border="0" cellpadding="0" cellspacing="0" style="width:25%;">
<tr>
<td align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
Nav 4
</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
<br/>
<!-- END OF NAVIGATION -->
<!-- BEGINNING OF SECONDARY STORY NAVIGATION -->
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td class="secondary_nav" width="600">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#005c5b">
<tr>
<td class="nav1" width="33.33%" align="center" style="padding: 20px 10px 20px 30px; text-align:left;border-right:solid 1px #ffffff;">
Secondary nav 1
</td>
<td class="nav2" width="33.33%" align="center" style="padding: 20px 10px 20px 30px; font-family: arial,sans-serif; font-size: 11px; text-align:left;border-right:solid 1px #ffffff;">
Secondary nav 2
</td>
<td class="nav3" width="33.33%" align="center" style="padding: 20px 10px 20px 30px; font-family: arial,sans-serif; font-size: 11px; text-align:left;">
Secondary nav 3
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END OF SECONDARY STORY NAVIGATION -->
</body>
</html>