Unable to send embedded image in email using FluentEmail - email

I'm using FluentEmail in ASP.NET core 2.0 class library which will be sending the Email notification.
Below is the sample code I have tried till now:
using FluentEmail.Core;
using FluentEmail.Razor;
using FluentEmail.Smtp;
using System;
using System.IO;
using System.Net.Mail;
using System.Net.Mime;
namespace FluentEmail
{
public class EmailNotification : IEmailNotification
{
public bool SendEmailNotification()
{
try
{
//Setup Default sender befault sending the email.
SmtpClient smtpClient = new SmtpClient
{
Host = "smtp.office365.com",
Port = 587,
EnableSsl = true,
Credentials = new System.Net.NetworkCredential("username", "Password")
};
Email.DefaultSender = new SmtpSender(smtpClient);
Email.DefaultRenderer = new RazorRenderer();
string imagePath = #"C:\Users\pratik.soni\Downloads\FluentLogo.png";
Stream stream = new FileStream(imagePath, FileMode.Open, FileAccess.Read);
stream.Flush();
stream.Seek(0, SeekOrigin.Begin);
var attachment = new Core.Models.Attachment()
{
Data = stream,
ContentType = "image/png",
Filename = "FluentLogo.png",
IsInline = true
};
var email = Email
.From("pratik.soni#1rivet.com")
.To("pratik.soni10#gmail.com")
.Subject("Test")
.Body("<html>Inline image here: <img src=\"cid:FluentLogo.png\">" +
"<p>You should see an image without an attachment, or without a download prompt, dependig on the email client.</p></html>", true);
email.Attach(attachment);
email.Send();
return true;
}
catch (Exception ex)
{
return false;
}
}
}
}
My HTML file is as follow:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>FluentEmail - Test with template and attachment</title>
</head>
<body style="margin: 0; padding: 0; background-color: #e5e5e5;" marginheight="0" topmargin="0" marginwidth="0" leftmargin="0">
<!--100% body table-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#d8e7ea" style="background-color: #e5e5e5;">
<!--intro-->
<table width="620" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle" width="11" height="100"></td>
<td valign="middle" height="100">
<!--break-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="25"></td>
</tr>
</table>
<!--/break-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="59%" height="100">
<table width="280" border="0" cellspacing="0" cellpadding="20">
<tr>
<td bgcolor="#333333">
<h1 style="font-family: Arial, Helvetica, sans-serif; font-size: 42px; margin: 0; padding: 0; color: #fff;">Typographic</h1>
<p style="text-transform: uppercase; font-size: 14px; color: #fff; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif;">
<currentdayname>
<currentday>
<currentmonthname>
<currentyear>
</p>
</td>
</tr>
</table>
</td>
<td width="41%" height="100" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="bottom" height="70">
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333; text-transform: uppercase; margin: 0; padding: 0;"> Email not looking beautiful?<br>
<webversion style="text-decoration: none; color: #cc0000">View it in your browser</webversion>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--break-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="25"></td>
</tr>
</table>
<!--/break-->
</td>
</tr>
</table>
<!--/intro-->
<!--content section-->
<table width="620" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="82" width="11" valign="middle"></td>
<td height="82" bgcolor="#FFFFFF" valign="middle">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle" height="37" bgcolor="#fef041">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#ffffff" width="25" height="37"></td>
<td width="15" height="37"></td>
<td>
<h2 style="color: #333333 !important; font-size: 21px; font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; text-shadow: 1px 1px 1px #fff;"> #Model.Title</h2>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top"></td>
<td bgcolor="#FFFFFF" valign="top">
<table width="560" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<p style="font-size: 14px; color: #333333; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif;"> Dear #Model.Name, You are totally #Model.Compliment. </p>
<br>
<table bgcolor="#000000" width="540" border="0" cellspacing="10" cellpadding="0">
<tr>
<td>
<img src=\"cid:#Model.ImgSrc\">
</td>
</tr>
<tr>
<td width="540" height="158"><img style="margin: 0; padding: 0; display: block;" border="0" src="C:\Users\pratik.soni\Downloads\2016-fluent-logo-design-digital-marketing-20nine-4.png" width="540" height="158" alt="img1"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--/100% body table-->
</body>
</html>
I have also tried with only passing image path to the imgsrc in html but that is also not working.
Please let me know what I'm missing in here.
Also, is there any such package like FluentEmail which can provide such all facility with ASP.NET Core 2.0?


You have to use a LinkedResource; have a look at this
using (LinkedResource image = new LinkedResource(#"c:\assets\image.jpg", "image/jpeg") { ContentId = "myimage" })
using (MailMessage mail = new MailMessage())
using (SmtpClient smtpClient = new SmtpClient())
{
smtpClient.Host = "smtp.alfki.com";
String body = #"
<html>
<head></head>
<body>
<img src=""cid:myimage"" />
</body>
</html>
";
AlternateView view = AlternateView.CreateAlternateViewFromString(body, null, "text/html");
view.LinkedResources.Add(image);
mail.IsBodyHtml = true;
mail.AlternateViews.Add(view);
mail.From = new MailAddress("John.Doe#alfki.com");
mail.To.Add("Jane.Doe#alfki.com");
mail.Subject = "An email with an inline image";
smtpClient.Send(mail);
}
Edit:
It works in .NET Core/Standard.
I can not speak for FluentMail; maybe you can do without?

Related

Mail template changes after sending

my problem is that after sending template mail/ saving template in chrome
e.g. to myself, when I opens it, it looks good, but after a few seconds it looks like it is loosing some css (in this particular case it is loosing borders in bottom table).
Here is the code, it was written in MJML
What is weird, if i send this template not through gmail it looks good even in gmail
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>
</title>
<!--[if !mso]> -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a {
padding: 0;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass * {
line-height: 100%;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 13px 0;
}
</style>
<!--[if !mso]><!-->
<style type="text/css">
#media only screen and (max-width:480px) {
#-ms-viewport {
width: 320px;
}
#viewport {
width: 320px;
}
}
</style>
<!--<![endif]-->
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
<style type="text/css">
#import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
</style>
<!--<![endif]-->
<style type="text/css">
#media only screen and (min-width:480px) {
.mj-column-per-100 {
width: 100% !important;
}
.mj-column-px-300 {
width: 300px !important;
}
.mj-column-per-50 {
width: 50% !important;
}
}
</style>
<style type="text/css">
</style>
</head>
<body>
<div>
<div class="mj-column-per-100 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:verdana;font-size:20px;line-height:1;text-align:center;color:black;">
Tytul
</div>
</td>
</tr>
<tr>
<td vertical-align="top" style="font-size:0px;padding:20px 0;word-break:break-word;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td>
<!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="Margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
style="vertical-align:top;width:300px;"
>
<![endif]-->
<div class="mj-column-px-300 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<table 0="[object Object]" 1="[object Object]" 2="[object Object]" border="0" style="cellspacing:0;color:#000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;">
<tr style="text-align: left;">
<th>
<h3>Desktop</h3>
</th>
</tr>
<tr style="text-align: left;">
<th style="padding: 5px;">TAG</th>
<th style="padding: 5px;">STATUS</th>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Homepage</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">Category</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Search</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">Offer</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Basket</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">StartOrder</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Confirmation</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">Placebo</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td>Comment:</td>
<td></td>
</tr>
<tr>
<td>Comment here</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
<td
style="vertical-align:top;width:300px;"
>
<![endif]-->
<div class="mj-column-px-300 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<table 0="[object Object]" 1="[object Object]" 2="[object Object]" border="0" style="cellspacing:0;color:#000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;">
<tr style="text-align: left;">
<th>
<h3>Mobile</h3>
</th>
</tr>
<tr style="text-align: left;">
<th style="padding: 5px;">TAG</th>
<th style="padding: 5px;">STATUS</th>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Homepage</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">Category</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Search</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">Offer</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Basket</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">StartOrder</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Confirmation</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">Placebo</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td>Comment:</td>
<td></td>
</tr>
<tr>
<td>Comment here</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td vertical-align="top" style="font-size:0px;padding:20px 0;word-break:break-word;">
<!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="Margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
style="vertical-align:top;width:300px;"
>
<![endif]-->
<div class="mj-column-per-50 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<table 0="[object Object]" 1="[object Object]" 2="[object Object]" border="0" style="cellspacing:0;color:#000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;">
<tr style="text-align: left; border-bottom: 1px solid black;">
<td style="padding: 5px; width: 82px;">Rate card:</td>
<td style="padding: 5px;">RC here</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px; width: 82px; ">Budget:</td>
<td style="padding: 5px;">text</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
<td
style="vertical-align:top;width:300px;"
>
<![endif]-->
<div class="mj-column-per-50 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<table 0="[object Object]" 1="[object Object]" 2="[object Object]" border="0" style="cellspacing:0;color:#000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;">
<tr style="text-align: left; border-bottom: 1px solid black;">
<td style="padding: 5px; width: 82px;">Optimization:</td>
<td style="padding: 5px;">text</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px; width: 82px;">Banners:</td>
<td style="padding: 5px;">text</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
</div>
</body>
</html>

Try to sent via another method. Im using Litmus, its working fine or just try to sent via mailjet - i think it should work either and its for free.
You code seems to be correct (checked via https://www.w3schools.com/Html/tryit.asp?filename=tryhtml_form_mail )

Email template center align text next to logo

I am creating the header shown below for an email template. As you can see, the text is slightly offset from the center of the email. This happens because I have two table cells: one for the logo and another for the text. I can center the text within its cell, but that cell isn't 100% of the width due to the the logo cell taking up 74 pixels. I can shift the header to the left using margin-left in most email clients, but Outlook and Gmail both don't support margins, and I need to support both clients. How can I go about getting the text centered in Outlook and Gmail?
<body style="padding:0; margin:0">
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0; padding-top: 25px;" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0; min-height:76px;" width="600px" class="100p">
<tr>
<td background="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/header.png" bgcolor="#39B491" width="600px" valign="top" class="100p">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:76px;">
<v:fill type="tile" src="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/header.png" color="#39B491" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="100p">
<tr>
<td width="74px" align="center" style="padding-top: 10px;">
<div style="width:44px">
<img src="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/my-id-care-logo.png" height="52px" width="44px" class="100p" />
</div>
</td>
<td width="*%" align="center">
<h3 style="color: white; font-size: 14px; margin: 0px; margin-left: -44px; margin-top: 10px; padding: 0px;"><font face="'Roboto', Arial, sans-serif">Welcome to MyIDCare</font></h3>
<h1 style="color: white; font-size: 20px; margin: 0px; margin-left: -44px; padding: 0px;"><font face="'Roboto', Arial, sans-serif">LET'S GET STARTED</font></h1>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>

Took me a little while to understand your question but i think i got it. You want to center the text within the outer table regardless of the logo being there, right? If thats a yes, then its just a matter of adding another 74px block on the right of the text.
Have a look at the code to see what i did:
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0; padding-top: 25px;" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0; min-height:76px;" width="600px" class="100p">
<tr>
<td background="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/header.png" bgcolor="#39B491" width="600px" valign="top" class="100p">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:76px;">
<v:fill type="tile" src="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/header.png" color="#39B491" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="100p">
<tr>
<td width="74px" align="center" style="padding-top: 10px;">
<div style="width:44px">
<img src="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/my-id-care-logo.png" height="52px" width="44px" class="100p" />
</div>
</td>
<td width="*%" align="center">
<h3 style="color: white; font-size: 14px; margin: 0px; margin-top: 10px; padding: 0px;"><font face="'Roboto', Arial, sans-serif">Welcome to MyIDCare</font></h3>
<h1 style="color: white; font-size: 20px; margin: 0px; padding: 0px;"><font face="'Roboto', Arial, sans-serif">LET'S GET STARTED</font></h1>
</td>
<td width="74px" align="center">
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
Cheers

How to prevent inline bloc from my email to stack on iPad?

I originally created an email using MJML and adapted the code to improve the mobile version.
1) I haven't any problem while checking the email with chrome and testing it with all desktop client with litmus, but the ipad version of the email stack inline blocks.
2) Some elements only displayed on mobile using media queries are not visible when testing the email whereas I can see them with chrome.
Here is the preview of the issues:
enter image description here
Here is the link of the html file:
Html file
Here is the beginning of the code:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>Invitiation à l'avant-première "Quoi de neuf au moyen âge ?"</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--[if !mso]><!-->
<style type="text/css">
#media (max-width:660px) {
#-ms-viewport { width: 320px; }
#viewport { width: 320px; }
}
</style>
<!--<![endif]-->
<style type="text/css">
#outlook a { padding: 0; }
.ReadMsgBody { width: 100%; }
.ExternalClass { width: 100%; }
.ExternalClass * { line-height: 100%; }
body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; }
p { display: block; margin: 13px 0; }
.hidden-desktop {display: none!important; max-height: 0; font-size: 0; overflow: hidden; line-height: 0; mso-hide: all;}
#media (min-width:660px) {
.mj-column-per-100, * [aria-labelledby="mj-column-per-100"] { width: 100%!important; }
.mj-column-px-200, * [aria-labelledby="mj-column-px-200"] { width: 200px!important; }
.mj-column-px-30, * [aria-labelledby="mj-column-px-30"] { width: 30px!important; }
.mj-column-px-430, * [aria-labelledby="mj-column-px-430"] { width: 430px!important; }
.mj-column-px-410, * [aria-labelledby="mj-column-px-410"] { width: 410px!important; }
.mj-column-px-20, * [aria-labelledby="mj-column-px-20"] { width: 20px!important; }
}
#media (max-width:659px) {
.mj-column-per-100, * [aria-labelledby="mj-column-per-100"] { width: 280px!important; display: block!important; margin: 0 auto; }
.mj-column-px-200, * [aria-labelledby="mj-column-px-200"] { width: 280px!important; display: block!important; margin: 0 auto; }
.mj-column-px-30, * [aria-labelledby="mj-column-px-30"] { width: 0px!important; }
.mj-column-px-430, * [aria-labelledby="mj-column-px-430"] { width: 280px!important; display: block!important; margin: 0 auto; }
.mj-column-px-410, * [aria-labelledby="mj-column-px-410"] { width: 280px!important; display: block!important; margin: 0 auto; }
.mj-column-px-20, * [aria-labelledby="mj-column-px-20"] { width: 0px!important; }
.invitation-desktop { display: none!important; }
.image-expo { height: 400px!important; background-repeat: no-repeat!important; }
.hidden-desktop{ display: block!important; max-height: none!important; font-size: 12px; line-height: 1.5!important; overflow: visible!important; }
.mobile-space{ height: 20px; }
.mobile-auto-height{ height: auto!important; }
.hidden-mobile{ display: none!important }
.logo-table { width: 80px!important; float: left; }
.logo-padding { padding: 7px!important; }
.logo { width:66px!important;height:66px!important; }
.invitation-mobile-title{ width: 200px; float: left; height: 80px;}
.social-mobile{ width: 80px!important; height: 80px; display: inline-block!important; }
.social-space-mobile { width: 20px!important; }
}
</style>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,500,700" rel="stylesheet" type="text/css">
<!--<![endif]-->
</head>
<body style="background: #e8e8e8;">
<div style="background-color:#e8e8e8;">
<!--[if mso | IE]>
<table border="0" cellpadding="0" cellspacing="0" width="660" align="center" style="width:660px;">
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0 auto;max-width:660px;">
<table cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0">
<tbody>
<tr>
<td style="text-align:center;vertical-align:top;font-size:0px;padding:0px;">
<!--[if mso | IE]>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align:top;width:660px;">
<![endif]-->
<div aria-labelledby="mj-column-per-100" class="mj-column-per-100" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;">
<table cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td style="word-break:break-word;font-size:0px;padding:15px;" align="center">
<div style="cursor:auto;color:#a6a6a6;font-family:'Lato', Arial, sans-serif;font-size:11px;font-weight:300;line-height:13px;text-transform:none;">
Vous avez des problèmes d’affichage ?
<a href="#" style="font-weight: 300; font-size: 11px; text-transform: none; font-family:'Lato', Arial, sans-serif; color:#a6a6a6">
Visualiser cet email en ligne
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
<!--[if mso | IE]>
<table border="0" cellpadding="0" cellspacing="0" width="660" align="center" style="width:660px;">
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0 auto;max-width:660px;">
<table cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0">
<tbody>
<tr>
<td style="text-align:center;vertical-align:top;font-size:0px;padding:0px;">
<!--[if mso | IE]>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align:top;width:200px;">
<![endif]-->
<div aria-labelledby="mj-column-px-200" class="mj-column-px-200" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:200px;">
<table class="logo-table" cellpadding="0" cellspacing="0" style="vertical-align:top;background:#fff;" width="100%" border="0">
<tbody>
<tr>
<td class="logo-padding" style="word-break:break-word;font-size:0px;padding:25px;" align="center">
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="center" border="0">
<tbody>
<tr>
<td style="width:150px;">
<img class="logo" alt="" title="" height="150px" src="http://bank.digital-expression.fr/universcience/logo-cite.png" style="border:none;display:block;outline:none;text-decoration:none;width:100%;height:150px;" width="150">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if !mso]><!-->
<table class="hidden-desktop invitation-mobile-title" cellpadding="0" cellspacing="0" width="200px" border="0" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td width="20px">
</td>
<td width="180px">
<table cellpadding="0" cellspacing="0" style="vertical-align:top;" width="100%" border="0">
<tbody>
<tr>
<td style="word-break:break-word;font-size:0px;padding:11px 0px;background-color:#d81921;" align="center">
<div style="cursor:auto;color:#ffffff;font-family:'Lato', Arial, sans-serif;font-size:28px;font-weight:400;line-height:28px;text-transform:uppercase;">Invitation</div>
</td>
</tr>
<tr>
<td style="word-break:break-word;font-size:0px;padding:0px 0px;background-color:#000" align="center">
<div style="cursor:auto;color:#ffffff;font-family:'Lato', Arial, sans-serif;font-size:15px;font-weight:400;line-height:30px;text-transform:uppercase;">
<span style="letter-spacing: 3px">
avant-première
</span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div style="clear:both;"></div>
<!--<![endif]-->
</div>
<!--[if mso | IE]>
</td>
<td style="vertical-align:top;width:30px;">
<![endif]-->
<!--[if !mso]><!-->
<div class="mobile-space hidden-desktop" style="font-size:1px;line-height:30px;"> </div>
<!--<![endif]-->
<div aria-labelledby="mj-column-px-30" class="mj-column-px-30" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:30px;">
<table cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
<td style="vertical-align:top;width:430px;">
<![endif]-->
<div aria-labelledby="mj-column-px-430" class="mj-column-px-430" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:430px;">
<table cellpadding="0" cellspacing="0" style="vertical-align:top;" width="100%" border="0">
<tbody>
<tr>
<td style="word-break:break-word;font-size:0px;padding:0px;" align="left">
<div class="image-expo" style="margin:0 auto;height:200px;max-width:430px;background:#f2b3b7 url(http://bank.digital-expression.fr/universcience/bg-expo.jpg) bottom right / 430px 200px no-repeat;">
<!--[if mso | IE]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:430px;">
<v:fill origin="0.5, 0" position="0.5,0" type="tile" src="http://bank.digital-expression.fr/universcience/bg-expo.jpg" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<table class="image-expo" cellpadding="0" cellspacing="0" height="200px" style="font-size:0px;width:100%;height:200px;background:#f2b3b7 url(http://bank.digital-expression.fr/universcience/bg-expo.jpg) bottom right / 430px 200px no-repeat;" align="center" border="0" background="http://bank.digital-expression.fr/universcience/bg-expo.jpg">
<tbody>
<tr>
<td style="text-align:center;vertical-align:top;font-size:0px;padding:0px;">
<!--[if mso | IE]>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align:top;width:410px;">
<![endif]-->
<div aria-labelledby="mj-column-px-410" class="mj-column-px-410" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;">
<table cellpadding="0" cellspacing="0" style="vertical-align:top;" width="100%" border="0">
<tbody>
<tr>
<td style="word-break:break-word;font-size:0px;padding:0px;">
<div style="font-size:1px;line-height:20px;"> </div>
</td>
</tr>
<tr>
<td style="word-break:break-word;font-size:0px;padding:0px 0px 0px 20px;" align="left">
<div style="cursor:auto;color:#ffffff;font-family:'Lato', sans-serif;font-size:30px;font-weight:700;line-height:30px;text-transform:uppercase;">
Quoi de neuf<br> au moyen âge ?
</div>
</td>
</tr>
<tr>
<td style="word-break:break-word;font-size:0px;padding:0px;">
<div style="font-size:1px;line-height:20px;"> </div>
</td>
</tr>
<tr>
<td style="word-break:break-word;font-size:0px;padding:0px 0px 0px 20px;" align="left">
<div style="cursor:auto;color:#ffffff;font-family:'Lato', sans-serif;font-size:14px;font-weight:400;line-height:16px;text-transform:uppercase;">
TOUT CE QUE L’ARCHEOLOGIE<br> NOUS RÉVÈLE
</div>
</td>
</tr>
<tr>
<td style="word-break:break-word;font-size:0px;padding:0px;">
<div style="font-size:1px;line-height:10px;"> </div>
</td>
</tr>
<tr>
<td style="word-break:break-word;font-size:0px;padding:0px 0px 0px 20px;" align="left">
<div style="cursor:auto;color:#ffffff;font-family:'Lato', sans-serif;font-size:40px;font-weight:700;line-height:40px;text-transform:uppercase;">
+
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
<td style="vertical-align:top;width:20px;">
<![endif]-->
<div aria-labelledby="mj-column-px-20" class="mj-column-px-20" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;">
<table cellpadding="0" cellspacing="0" style="vertical-align:top;" width="100%" border="0">
<tbody>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]>
</v:textbox>
</v:rect>
<![endif]-->
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
<!--[if mso | IE]>
<table border="0" cellpadding="0" cellspacing="0" width="660" align="center" style="width:660px;">
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div class="mobile-space" style="font-size:1px;line-height:30px;"> </div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
...I can't put the complete code on my post to be under 30000 signs.
</div>
</body>
</html>
Thank you for helping,

Well that's a common issue with iOs 9 and blank space between div. Even if font-size is set to 0px it acts like if it still here.
You'll have to minify your HTML to make it look nice again.
I did it for you : http://pastebin.com/0RX92bat and here's how it looks on Litmus on iPad Retina with Mail http://imgur.com/DfziId3
You can use https://github.com/kangax/html-minifier to get the same result with these options :
{ collapseWhitespace: true,
removeEmptyAttributes: true,
minifyCSS: true }

I've run into this problem many times and the easiest fix I've found is to add a margin: 0 -2px; to each display: inline-block;:
`<div style="display: inline-block; margin: 0 -2px;">`
The same problem exists on the web, as outlined in Fight the Space Between Inline-Block Elements on CSS Tricks. This article includes a few other examples in case you don't like the negative margin hack.

How to eliminate white lines in HTML emails mostly seen on iPhone

I'm trying to get rid of these white lines that iPhone users are seeing in these emails. This can be reproduced by viewing the email in chrome when re-sizing the browser. Whether the white lines appear or not depends on the size of the window. It only happens to the image slices of the left-most data-cell in a table-row.
Here is the code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<title></title>
<style type="text/css">
/***START, CSS targeting client bugs***/
body {
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
/* Prevents Webkit and Windows Mobile platforms from changing default font sizes. */
}
.ExternalClass {
width: 100%;
/* Forces Hotmail to display emails at full width */
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
/* Forces Hotmail to display normal line spacing */
}
body {
margin: 0;
padding: 0;
/* Resets all body margins and padding to 0 for good measure */
}
p {
margin: 1em 0;
}
table td {
border-collapse: collapse;
/*This resolves the Outlook 07, 10, and Gmail td padding issue */
}
#-ms-viewport {
width: device-width;
}
/***END, CSS targeting client bugs***/
/***START, Reset styles***/
p {
margin: 0;
padding: 0;
margin-bottom: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: black;
line-height: 100%;
}
/***END, Reset styles***/
#media only screen and (max-width: 480px) {
a[href^="tel"],
a[href^="sms"] {
text-decoration: underline;
color: #0063ba;
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"],
.mobile_link a[href^="sms"] {
text-decoration: underline;
color: #0063ba !important;
pointer-events: auto;
cursor: default;
}
body {
overflow-x: hidden !important;
text-align: center !important;
background-color: #ffffff !important;
}
body[yahoo] .container {
width: 320px !important;
display: block !important;
}
body[yahoo] .drop {
width: 100% !important;
display: block !important;
text-align: center !important;
padding: 2px 0 !important;
}
body[yahoo] .hide_this {
display: none !important;
}
body[yahoo] .respond_to_width {
width: 100% !important;
display: block !important;
}
body[yahoo] .mobile_image {
width: 100% !important;
height: auto !important;
}
body[yahoo] .pushto100 {
width: 100% !important;
}
body[yahoo] .centerthis {
text-align: center !important;
display: inline-block !important;
}
}
</style>
</head>
<custom name="opencounter" type="tracking">
<body style="margin: 0px; padding:0px; -webkit-text-size-adjust:none; -ms-text-size-adjust: none;" yahoo="fix">
<!--CENTER EMAIL_start-->
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="respond_to_width">
<tr>
<td align="center" valign="top">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="left" valign="top" style="font-size:11px;font-family:arial,sans-serif;color:#333333;padding:10px 0;">
Click to view this message in a browser
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="640" class="respond_to_width">
<tr>
<td colspan="2" align="left" valign="top">
<a conversion="TRUE" alias="body_header" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/84aa6e6.png" width="640" height="143" alt="email header" title="start shopping"></a>
</td>
</tr>
<tr>
<td align="left" valign="top">
<a conversion="TRUE" alias="body_zone1" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/87ba827.png" width="321" height="192" alt="clickzone 1" title="shop Halloween costmes"></a>
</td>
<td align="left" valign="top">
<a conversion="TRUE" alias="body_zone2" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/8b26eb0.png" width="319" height="192" alt="clickzone 2" title="shop Halloween costmes"></a>
</td>
</tr>
<tr>
<td align="left" valign="top">
<a conversion="TRUE" alias="body_zone3" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/8c23711.png" width="321" height="159" alt="clickzone 3"></a>
</td>
<td align="left" valign="top">
<a conversion="TRUE" alias="body_zone4" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/8d3de4a.png" width="319" height="159" alt="clickzone 4" title="shop Halloween costmes"></a>
</td>
</tr>
<tr>
<td align="left" valign="top">
<a conversion="TRUE" alias="body_zone5" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/8e4baa8.png" width="321" height="191" alt="clickzone 5" title="shop Halloween costmes"></a>
</td>
<td align="left" valign="top">
<a conversion="TRUE" alias="body_zone6" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/9053862.png" width="319" height="191" alt="clickzone 6" title="shop Halloween costmes"></a>
</td>
</tr>
<tr>
<td colspan="2" align="left" valign="top">
<a conversion="TRUE" alias="body_footer" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/9226e55.png" width="640" height="181" alt="email footer" title="contact us, etc"></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="top" style="font-size:0%;padding:10px 0 0 0;display:none;">
%%=ContentAreaByName("Divider_Green")=%%
</td>
</tr>
<!--SOCIAL BUTTONS/-->
<tr>
<td align="center" valign="top">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top">
FaceBook
</td>
<td align="left" valign="top"> | </td>
<td align="left" valign="top">
<a href="https://plus.google.com/" alias="Google+" target="_blank">
Google+
</a>
</td>
<td align="left" valign="top"> | </td>
<td align="left" valign="top">
<a href="https://instagram.com/" alias="Instagram" target="_blank">
InstaGram
</a>
</td>
<td align="left" valign="top"> | </td>
<td align="left" valign="top">
<a href="http://www.pinterest.com/" alias="Pinterest" target="_blank">
Pintrest
</a>
</td>
<td align="left" valign="top"> | </td>
<td align="left" valign="top">
<a href="https://twitter.com/" alias="Twitter" target="_blank">
Twitter
</a>
</td>
</tr>
</table>
</td>
</tr>
<!--EMAIL, PHONE NUMBER/-->
<tr>
<td align="center" valign="top">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="drop" align="left" valign="top" style="font-size:14px;font-family:arial,sans-serif;color:#6ebe43;padding:0 20px 0 0;">
customerservice#arbitraryLink.com
<span style="font-size:14px;font-family:arial,sans-serif;color:#000001">
| 1.888.777.6666
</span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td class="drop" align="center" valign="middle">
<!--CTA BUTTON/-->
<br>
<br>
<table cellpadding="0" cellspacing="0" border="0" class="pushto100">
<tr>
<td align="left" valign="middle" style="padding:0 10px">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="center" valign="top" style="font-size:12px;color:#88ab00;font-family:arial,sans-serif;font-weight:bold;">
<span style="text-decoration: none;color:#88ab00;">
sign up for emails</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--<br><br>-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="640" align="center" valign="top" style="font-size:11px;font-family:arial,sans-serif;color:#6ebe43;padding:16px 4px;">
<span style="color:#333333; width:640px;">
*Terms and conditions apply
<br><br>
This email was sent by: %%member_busname%%, %%member_addr%% %%member_city%%, %%member_state%% %%member_postalcode%% %%member_country%%</span>
<br>
<span style="color:#333333;">
This email was sent to: <strong>%%emailaddr%%</strong></span><span style="color:#333333;">. We respect your right to privacy -</span> privacy policy
<br>
<br>
One-Click Unsubscribe
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--CENTER EMAIL_end-->
%%[ var #additionalattribute1, #additionalattribute2, #additionalattribute3, #additionalattribute4 Set #additionalattribute1 = __AdditionalEmailAttribute1 Set #additionalattribute2 = __AdditionalEmailAttribute2 Set #additionalattribute3 = __AdditionalEmailAttribute3 Set #additionalattribute4 = __AdditionalEmailAttribute4 ]%%
<img src="http://track.securedopen-q.com/?sv_cid=0215_01811&sv_emopen=true&sv_svem=%%emailaddr%%&cm_source=tracking_pixel_stuff" height="1" width="1" />
</body>
</html>
You can see the white lines in my jFiddle when resizing the browser in chrome. http://jsfiddle.net/stormbloom/4s0sqkbb/
Please ignore the AMP script unless you think in could be causing rendering problems (which I doubt). I just left it in there so you can see what the entirety of the code looks like.

I discovered if I add an in-line style: outline 1px solid #f00; to the table, it fixes the white line issue. The problem is that many email clients do not support outline, but they add a space where outline is being used. So it causes the table you target to have a noticeable white space in that email client.
To fix this issue and only target iphone and devices using webkit is to create a class called .iphone and add it to a media query which targets iPhone 5, 6 and 6 plus.
#media only screen and (max-width: 414px) {
.iphone {
outline: 1px solid #f00;
}
Add the class "iphone" to the table with the white line issue. This fixes the white line issue and only shows on devices that can work with that media query. This tested with Litmus and with observing on the actual devices.

How to get tables to line up next to each other

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/