I'm creating a HTML email, it works fine on all the mail clients I tested except on Outlook 2016 software (works fine on Outlook website)
I tried to use td side-by-side instead of table but it's breaking my responsiveness. Tables are supposed to side-by-side splitting the email in 2 parts. In Outlook software, there is a big gap above the second table making if shifted and not aligned with the first one.
Here is my code:
<tr>
<td align="center" bgcolor="#EEEEEE">
<table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="ee_element ee_textelement" data-title="Text" style="width: 700px; table-layout: auto;" width="700">
<tbody>
<tr>
<td align="center" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="em_wrapper" style="width:700px;table-layout: auto;" width="100%">
<tbody>
<tr>
<td align="left" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="em_wrapper" style="width:350px;table-layout: auto;" width="350">
<tbody>
<tr>
<td align="center" class="em_pad_top" valign="top">
<table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="sbs_block h_auto" style="width: 350px; background-color: rgb(255, 255, 255);table-layout: auto;height:400px" width="350">
<tbody>
<tr>
<td bgcolor="#00865B" class="col" style="vertical-align: middle;" width="350">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td>
<p style="color: #FFFFFF; margin: 0;font-size:16px">Lorem Ipsum</p>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" class="em_wrapper" style="width:350px;table-layout: auto;" width="350">
<tbody>
<tr>
<td align="center" class="em_pad_top" valign="top">
<table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="sbs_block h_auto" style="width: 350px; background-color: rgb(255, 255, 255);table-layout: auto;height:400px" width="350">
<tbody>
<tr>
<td bgcolor="#00865B" class="col" style="vertical-align: middle;" width="350">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td>
<p style="color: #FFFFFF; margin: 0;font-size:16px">Lorem Ipsum</p>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
I'm expecting to have my 2 tables properly aligned side-by-side like I have them on all other email clients.
welcome to SO!
To do this - you will need to place the following snippet between your 2 left aligned tables:
<!--[if mso]>
</td>
<td valign="top" align="center">
<![endif]-->
Due to the nature of MSO - it doesn't support table floating, so this effectively lies to MSO and turns them into 2 columns.
<td align="center" bgcolor="#EEEEEE">
<table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="ee_element ee_textelement" data-title="Text" style="width: 700px; table-layout: auto;" width="700">
<tbody>
<tr>
<td align="center" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="em_wrapper" style="width:700px;table-layout: auto;" width="100%">
<tbody>
<tr>
<td align="left" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="em_wrapper" style="width:350px;table-layout: auto;" width="350">
<tbody>
<tr>
<td align="center" class="em_pad_top" valign="top">
<table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="sbs_block h_auto" style="width: 350px; background-color: rgb(255, 255, 255);table-layout: auto;height:400px" width="350">
<tbody>
<tr>
<td bgcolor="#00865B" class="col" style="vertical-align: middle;" width="350">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td>
<p style="color: #FFFFFF; margin: 0;font-size:16px">Lorem Ipsum</p>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]>
</td>
<td valign="top" align="center">
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="em_wrapper" style="width:350px;table-layout: auto;" width="350">
<tbody>
<tr>
<td align="center" class="em_pad_top" valign="top">
<table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="sbs_block h_auto" style="width: 350px; background-color: rgb(255, 255, 255);table-layout: auto;height:400px" width="350">
<tbody>
<tr>
<td bgcolor="#00865B" class="col" style="vertical-align: middle;" width="350">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td>
<p style="color: #FFFFFF; margin: 0;font-size:16px">Lorem Ipsum</p>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
Just one of the many quirks with mso :)
Related
Here's what it's supposed to look like:
Here's what it looks like in Outlook:
For some reason the "call us" table is being pushed to the next line below instead of staying in-line. I tried placing "white-space:nowrap" on tr's/td's and that didn't seem to solve my problem.
Below is the markup:
<tr>
<td>
<table id="border-1" align="left" style="border-top: 4px solid #444; border-left: 4px solid #444;" border="0" cellpadding="0" cellspacing="0" class="100p" width="50%"> <!--- Email Us Housing -->
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="50%" >
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="white-space: nowrap;">
<td style="padding: 10px; text-align: center; white-space: nowrap;">
<img width="50" src="mail.png" alt="Send Us An Email">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table align="right" border="0" cellpadding="0" cellspacing="0" width="50%">
<tr style="white-space: nowrap;">
<td style="white-space: nowrap; font-size:24px; color:#414042; font-family: Open Sans, Helvetica, Arial, sans-serif; text-transform: uppercase;" class="link-bump" height="70">email us</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table id="border-2" align="right" style="border-top: 4px solid #444; border-right: 4px solid #444;" border="0" cellpadding="0" cellspacing="0" class="100p" width="50%"> <!--- call Us Housing -->
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="50%" >
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="white-space: nowrap;">
<td style=" white-space: nowrap; padding: 10px; text-align: center;">
<img width="50" src="call.png" alt="Call Us">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table align="right" border="0" cellpadding="0" cellspacing="0" width="50%">
<tr>
<td style="font-size:24px; color:#414042; font-family: Open Sans, Helvetica, Arial, sans-serif; text-transform: uppercase;" class="link-bump" height="70"> call us</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr><!---- top footer end --->
</table>
You could try using out Outlook conditional code since this is solely an Outlook windows issue. And then target it to whatever your dimensions are.
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="640"> <tr><td align="center" valign="top" width="318">
<![endif]-->
Side 1
<!--[if (gte mso 9)|(IE)]>
</td><td>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->
You could try what Richard has suggested by adding a ghost column
<!--[if (gte mso 9)|(IE)]></td><td><![endif]-->
Or you can try doing something similar to below:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td bgcolor="#444444" style="padding:4px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td bgcolor="#ffffff">
<table id="border-1" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" border="0" cellpadding="0" cellspacing="0" class="100p" width="50%"> <!--- Email Us Housing -->
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="50%" >
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="white-space: nowrap;">
<td style="padding: 10px; text-align: center; white-space: nowrap;">
<img width="50" src="mail.png" alt="Send Us An Email">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table align="right" border="0" cellpadding="0" cellspacing="0" width="50%">
<tr style="white-space: nowrap;">
<td style="white-space: nowrap; font-size:24px; color:#414042; font-family: Open Sans, Helvetica, Arial, sans-serif; text-transform: uppercase;" class="link-bump" height="70">email us</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table id="border-2" align="right" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" border="0" cellpadding="0" cellspacing="0" class="100p" width="50%"> <!--- call Us Housing -->
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="50%" >
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="white-space: nowrap;">
<td style=" white-space: nowrap; padding: 10px; text-align: center;">
<img width="50" src="call.png" alt="Call Us">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table align="right" border="0" cellpadding="0" cellspacing="0" width="50%">
<tr>
<td style="font-size:24px; color:#414042; font-family: Open Sans, Helvetica, Arial, sans-serif; text-transform: uppercase;" class="link-bump" height="70"> call us</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I have added table with 4px padding around the two blocks you have and added CSS to the table which allows you to place tables side by side in outlook:
border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;
If this doesnt work you can decrease the width of the two columns to 49% and it should work properly.
Note: decrease the width if you are using my code above.
Hope the above helps.
My media queries are not being recognized by Gmail for mobile.
Does anybody how can this be fixed? I'd like my cells to stack, it all works fine on Mail iOS, Outlook iOS, but not Gmail ...
Thanks for your advice!
Gmail doesn't support media queries (or the <style> tag), so in order to have table cells stack on narrow widths you have to code a hybrid email.
These patterns by Fabio Carniero demonstrate this principle in action. I would strongly recommend looking at these scaffolds, as they achieve column stacking in mobile Gmail as well as other email clients that don't support media queries.
Here is an example of a 2-column layout that stacks without using media queries (adapted from Fabio's files):
<!-- // 2-COLUMN SCAFFOLD [CENTERING, FLUID] -->
<tr>
<td align="center" height="100%" valign="top" width="100%">
<!--[if mso]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="660">
<tr>
<td align="center" valign="top" width="660">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:660px;">
<tr>
<td align="center" valign="top" style="font-size:0;">
<!--[if mso]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="660">
<tr>
<td align="left" valign="top" width="330">
<![endif]-->
<div style="display:inline-block; max-width:50%; min-width:240px; vertical-align:top; width:100%;">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:330px;">
<tr>
<td align="center" valign="top">
LEFT
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="330">
<![endif]-->
<div style="display:inline-block; max-width:50%; min-width:240px; vertical-align:top; width:100%;">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:330px;">
<tr>
<td align="center" valign="top">
RIGHT
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- 2-COLUMN SCAFFOLD [CENTERING, FLUID] // -->
trying to get the shipping details and order details tables to line up next to each other in the same row. i have them in a wrapper table, and set the widths to 50%, but they still line up in a block format. making one of the widths less than 50% didn't change anything.
----this is an email
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Climatic Corporation</title>
<style type="text/css">
/*RESET STYLES*/
body {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;font-family: Tahoma, Verdana, Segoe, sans-serif;}
table{border-collapse:collapse;}
img, a img{border:0; outline:none; text-decoration:none;}
h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
/*CLIENT SPECIFIC STYLES*/
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div{line-height:100%;}
table,td{mso-table-lspace:0pt; mso-table-rspace:0pt;}
#outlook a{padding:0;}
img{-ms-interpolation-mode: bicubic;}
body, table, td, p, a, li, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;}
/*Custom Styles*/
#mainTable{
border:4px solid black;
}
/*Mobile Styles*/
#media only screen and (max-width:479px) {
}
</style>
</head>
<body>
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="620" id="containerTable">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="headerTable">
<tr>
<td align="left" valign="top">
<img src="CClogo.png" alt="Climatic Corporation Logo">
</td>
<td align="right" valign="top">
800-845-4555
<br>
csr#climaticcorp.com
<br>
climatichomeproducts.com
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="mainTable">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="messageTable">
<tr>
<td align="left" valign="top" width="100%">
<h1>THANK YOU!</h1>
</td>
</tr>
<tr>
<td align="left" valign="top" width="100%">
<p>Hello ##Shopper - thanks for shopping with us.</p>
</td>
</tr>
<tr>
<td align="left" valign="top" width="100%">
<p>Order ##OrderNumber has been placed. We appreciate your business.</p>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="detailsWrapper">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="50%" id="shippingTable">
<tr>
<td align="left" valign="top">
<h3>Shipping Details</h3>
<p>##ShippingAddress</p>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="50%" id="orderTable">
<tr>
<td align="left" valign="top">
<h3>Order Details</h3>
<p>##PONumber</p>
<p>##NumItems units</p>
<p>##OrderValue dollars</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>
here is the fiddle https://jsfiddle.net/baLn4ucj/
To make cells within a table align next to each other, they need to be in different "td" elements. If they are in the same "td" they will be part of a normal flow.
I demonstrated this for you here, by modifying your example.
<tr>
<td> left </td>
<td> right </td>
</tr>
https://jsfiddle.net/DonatoBorrello/baLn4ucj/1/
This is the code that is broken in outlook 2013 and 2010 works fine in 2003 and everything else. I am wondering what might be causing the issue. The page is just white and I cant find any of the email template in litmus. If anyone could help that would be great.
<!-- Wrapper 2 (Header) -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="100%" valign="top" bgcolor="#ffffff">
<!-- 1px Height Border -->
<table class="fullWidth" width="740" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="100%" height="1" bgcolor="#dedede"></td>
</tr>
</table>
<!-- Mobile Wrapper -->
<table width="100%" height="300" class="fullWidth" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="100%" bgcolor="f6f6f6" background="beachBg.png" style="background-size: 100%; background-position-y: -100px;">
<a href="http://www.something.com">
<div>
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:740px;height:300px;">
<v:fill type="tile" src="beachBg.png" color="#000000" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="scaleForMobile" height="300">
<tr align="right" class="socialNav">
<td width="100%">
<table width="35" border="0" cellpadding="0" cellspacing="0" align="right" class="clearing">
<tbody><tr>
<td width="375" valign="top">
<img alt="rss" src="rss.png"/>
</td>
</tr>
</tbody></table>
<table width="35" border="0" cellpadding="0" cellspacing="0" align="right" class="clearing">
<tbody><tr>
<td width="375" valign="top">
<img alt="vimeo" src="vimeo.png"/>
</td>
</tr>
</tbody></table>
<table width="35" border="0" cellpadding="0" cellspacing="0" align="right" class="clearing">
<tbody><tr>
<td width="50" valign="top">
<img alt="instagram" src="instagram.png"/>
</td>
</tr>
</tbody></table>
<table width="35" border="0" cellpadding="0" cellspacing="0" align="right" class="clearing">
<tbody><tr>
<td width="375" valign="top">
<img alt="tumblr" src="tumblr.png"/>
</td>
</tr>
</tbody></table>
<table width="35" border="0" cellpadding="0" cellspacing="0" align="right" class="clearing">
<tbody><tr>
<td width="375" valign="top">
<img alt="youtube" src="youtube.png"/>
</td>
</tr>
</tbody></table>
<table width="35" border="0" cellpadding="0" cellspacing="0" align="right" class="clearing">
<tbody><tr>
<td width="375" valign="top">
<img alt="facebook" src="facebook.png"/>
</td>
</tr>
</tbody></table>
<table width="35" border="0" cellpadding="0" cellspacing="0" align="right" class="clearing">
<tbody><tr>
<td width="375" valign="top">
<img alt="linkedin" src="linkedin.png"/>
</td>
</tr>
</tbody></table>
</tr>
<tr class="beachLogo">
<td style="width:740;" ><img style="margin-left:80px;" src="beachLogo.png"></td>
<td width="400"></td>
</tr>
</table>
<div>
</div>
</div>
</td>
</tr>
</table><!-- End Header -->
</td>
</tr>
</table><!-- End Mobile Wrapper -->
<!-- Space -->
<table bgcolor="ffffff" width="740" border="0" cellpadding="0" cellspacing="0" align="center" class="mobileCenter">
<tr>
<td width="740" height="0">
</td>
</tr>
</table>
</td>
</tr>
</table><!-- End Wrapper 2 -->
A couple of syntax issues I'm seeing.
<a href="http://www.something.com"> is missing a closing tag.
You probably shouldn't be wrapping everything in just 1 <a> tag like that.
The </tr> before <tr class="beachLogo"> is missing a </td>
Fix those issues and see if you get better results in Outlook.
Unfortunately the program I use to send out email does not allow for #media queries nor .css lists at the top of said code. This is problematic seeing as I am building an email template based around floating columns. I would like for the two columns to be next to one another while viewing on a tablet or desktop, but have the list drop underneath the content panel while viewing on a mobile device.
Here is the base of what I have:
<div style="width: 100%; max-width: 650px; margin-left: auto; margin-right: auto;">
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="1" style="width: 100%;">
--banner image here--
</td>
</tr>
</tbody>
</table>
<table style="width: 100%;">
<tbody>
<tr>
<td align="left" valign="top" width="320px;" style="padding-left: 10px; padding-right: 10px;">
--content goes here--
</td>
<td align="left" valign="top" width="180px;" style="padding-left: 10px; padding-right: 10px;">
--list of links--
</td>
</tr>
</tbody>
</table>
</div>
It's doable. Without media queries you will be limited to how involved you get. This would work well if your columns were of equal width. I'm not sure how your design is, but without a media query it will be challenging to make even columns. Here is some roughed out HTML to get you going.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 650px;">
<tr>
<td width="650">
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="1" style="width: 100%;"> --banner image here-- </td>
</tr>
</table>
<table align="left" width="320">
<tr>
<td align="left" valign="top" width="320" bgcolor="#00CC99" style="padding-left: 10px; padding-right: 10px;"> --content goes here-- </td>
</tr>
</table>
<table align="left" width="180">
<tr>
<td align="left" valign="top" width="180" bgcolor="#99CC33" style="padding-left: 10px; padding-right: 10px;"> --list of links-- </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>