I have developed several responsive emails with two-column and three-column layouts. This time, I have tried to do the same but I've encountered an issue. The columns push each other until the left one pushes the right one below...I'd like for both of them to constraint each other.
Broken
Correct way
<tr>
<td align="center" width="100%" style="max-width: 600px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" border="0" margin="0" role="presentation" bgcolor="#f9f9f9" style="width: 100%; max-width: 600px; padding: 0 20px; background-color: #f9f9f9;">
<tr>
<td>
<!--LEFT COLUMN-->
<table align="left" valign="top" class="mobile-aep-couple" width="280" border="0" margin="0" cellspacing="0" cellpadding="0" role="presentation" style="margin: 0 auto; padding: 0; vertical-align: top; max-width: 100%;">
<tr>
<td width="100%" style="font-family: 'Raleway', Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 14px; font-weight: bold; line-height: 20px; text-align: center;">
<img src="testimage" alt="" width="100%" style="width: 100%; max-width: 100%; height: auto; padding: 3px 0 32px 2px;">
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table align="right" valign="top" class="mobile-aep-couple" width="320" border="0" margin="0" cellspacing="0" cellpadding="0" role="presentation" style="margin: 0 auto; padding: 0; vertical-align: top; max-width: 100%;">
<tr>
<td width="100%" class="right-col-header" style="font-family: 'Raleway', Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 18px; line-height: 22px; font-weight: bold; padding: 32px 20px 15px 18px; color: #202f60;">
The Annual Enrollment Period ends December 7th
</td>
</tr>
<tr>
<td width="100%" class="right-col-text" style="font-family: 'Raleway', Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 14px; line-height: 18px; padding: 0px 20px 43px 18px;">
We have the free resources to compare available plans in your area and answer all your questions. We'll make it easy to pick up where you left off and make the Medicare plan selection that works for you.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
Related
I'm currently making an email layout with tables, and what I need is being able to put picture above the text in some particular screen sizes
Here's the example of my code:
<table width="100%" cellpadding="0" cellspacing="0" style="border-spacing:0; padding: 50px 20px 10px;">
<tr>
<td valign="center" style="text-align:left;">
<h1 style="margin-top: -30px; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 700">my text</h1>
<h1 style="margin-top: -10px; margin-bottom: 30px; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 400">my text</h1>
</td>
<td valign="center" style="text-align:left;">
<img style="margin-right: 10px; margin-top: -50px;" src="https://via.placeholder.com/300.jpg" alt="">
</td>
</tr>
</table>
So the issue is the picture has to be on one line with the text when looking at it from a computer screen and go above/below the text when checking it from mobile mailing client
My favourite technique is to use table header cells () and display block them on mobile. The same can be done in most email clients with but there are a few mobile email clients which don't allow it and so your layout won't stack as expected.
Just a couple of notes on your code:
I noticed the use of valign="centre" on the two cells. For valign, the correct value is middle. Centre is used for the align attribute. So just switch those around.
You've used a lot of negative margin in your code. While it isn't the end of the world, I would imagine a fair amount of issues in testing. I would correct the valign value first, then play with padding on the table cells to try and get the layout you're looking for. Also play with line height if you're seeing issues. Negative margin values could cause more harm than good further down the line.
I've coded a couple of examples for you, incorporating my notes above:
Current - your code as posted
Stacked table header cells - basic stacking cells example
Reverse stacked table header cells - point 2 but reversed, as you requested
Codepen - https://codepen.io/Digital_Frankenstein/pen/WNObXzb
Code:
#media only screen and (max-width:460px) {
.device-width { width:100%!important; padding:0; min-width:100%!important; }
.device-width-padding { width:85%!important; padding:0; min-width:85%!important; }
.th-block { display:block; width:100%!important; }
.th-block-reverse-header { display:table-header-group; width:100%!important; }
.th-block-reverse-footer { display:table-footer-group; width:100%!important; }
}
<table border="0" cellpadding="0" cellspacing="0" style="width:100%;" role="presentation">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" class="device-width-padding" style="border:1px solid red;" role="presentation">
<tr>
<td style="font-weight:600; color:red; font-size:20px; padding:10px 0 5px 0; text-align:left;">
Current
</td>
</tr>
<tr>
<td align="center" style="padding: 50px 20px 10px;">
<table width="100%" cellpadding="0" cellspacing="0" style="border-spacing:0;">
<tr>
<td valign="center" style="text-align:left;">
<h1 style="margin-top: -30px; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 700">my text</h1>
<h1 style="margin-top: -10px; margin-bottom: 30px; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 400">my text</h1>
</td>
<td valign="center" style="text-align:left;">
<img style="margin-right: 10px; margin-top: -50px;" src="https://via.placeholder.com/300.jpg" alt="">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="device-width-padding" style="border:1px solid green;" role="presentation">
<tr>
<td style="font-weight:600; color:green; font-size:20px; padding:10px 0 5px 0; text-align:left;">
Stacked table header cells
</td>
</tr>
<tr>
<td align="center" style="padding: 50px 20px 10px;">
<table width="100%" cellpadding="0" cellspacing="0" style="border-spacing:0;">
<tr>
<th class="th-block" valign="middle" style="text-align:left;">
<h1 style="margin-top:0; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 700">my text</h1>
<h1 style="margin-top:0; margin-bottom: 30px; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 400">my text</h1>
</th>
<th class="th-block" valign="middle" style="text-align:left;">
<img style="margin-right: 10px;" src="https://via.placeholder.com/300.jpg" alt="">
</th>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="device-width-padding" style="border:1px solid blue;" role="presentation">
<tr>
<td style="font-weight:600; color:blue; font-size:20px; padding:10px 0 5px 0; text-align:left;">
Reverse stacked table header cells
</td>
</tr>
<tr>
<td align="center" style="padding: 50px 20px 10px;">
<table width="100%" cellpadding="0" cellspacing="0" style="border-spacing:0;">
<tr>
<th class="th-block-reverse-footer" valign="middle" style="text-align:left;">
<h1 style="margin-top:0; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 700">my text</h1>
<h1 style="margin-top:0; margin-bottom: 30px; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 400">my text</h1>
</th>
<th class="th-block-reverse-header" valign="middle" style="text-align:left;">
<img style="margin-right: 10px; margin-top:0;" src="https://via.placeholder.com/300.jpg" alt="">
</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
html siganture keeps cutting off
I have 0 html experience but can edit code if its straightforward enough.
The top of my logo/social media icons keeps cutting off on outlook. They don't cut off when I open the email in a browser or through a mobile device. Is there a way to edit the code so that it doesn't cut off? I tried adding padding to the top but it doesn't work. Please help.
Code
<table width="335" cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;"> <tr> <td style="padding-top: 0; padding-bottom: 0; padding-left: 0px; padding-right: 0;"> <table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;"> <tr> <td colspan="2" style="padding-bottom: 2px; color: #515151; font-size: 15px; font-family: Arial, Helvetica, sans-serif;line-height:15px;"> <b>Ryan Milliman </b> </td> </tr> <tr> <td colspan="2" style="padding-bottom: 6px; color: #515151; font-size: 14px; font-family: Arial, Helvetica, sans-serif;line-height:15px;"> <b> <small style="color:#515151;" >Director of Investor Relations</small></b> </td> </tr> <tr> <td colspan="2" style="color: #333333; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:6px;line-height:0px;"> <img src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/border.png" width="333" height="3" alt="" /> </td> </tr> <tr> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:4px;line-height:15px;"> <b style="color:#9d1924;" >O:</b> (800) 735- 9973 </td> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:4px;line-height:15px;"> <b style="color:#9d1924;">M:</b> (760) 793- 2933 </td> </tr> <tr> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:4px;line-height:15px;"> <b style="color:#9d1924;" >W:</b> www.primior.com </td> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:4px;line-height:15px;"> <b style="color:#9d1924;">E:</b> ryan.milliman#primior.com </td> </tr> <tr> <td colspan="2" style="color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:6px;"> <b style="color:#9d1924;">A:</b> <img src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/border.png" width="333" height="3" alt="" /> </td> </tr> <tr> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:7px; padding-top:7px;line-height:15px;"> <a href="http://www.primior.com"> <img src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/logo.png" width="155" height="20" alt="" /> </td> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:7px;padding-top:7px;line-height:15px;text-align:right;"> <img width="20" height="20" style="border: none; width: 20px; max-width: 20px !important; height: 20px; max-height: 20px !important;vertical-align:middle;" src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/fb.png"> <img width="20" height="20" style="border: none; width: 20px; max-width: 20px !important; height: 20px; max-height: 20px !important;vertical-align:middle;" src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/tw.png"> <img width="20" height="20" style="border: none; width: 20px; max-width: 20px !important; height: 20px; max-height: 20px !important;vertical-align:middle;" src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/lin.png"> <img width="20" height="20" style="border: none; width: 20px; max-width: 20px !important; height: 20px; max-height: 20px !important;vertical-align:middle;" src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/ins.png"> </td> </tr> </table> </td> </tr> </table>
Outlook sometimes ignores the width/height of an element.
Try adding width and height to your td where the Image is located.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Social Superstore - Email template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
/* RESET STYLES */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table{border-collapse:collapse !important;}
body{height:100% !important; margin:0; padding:0; width:100% !important;}
#media screen and (max-width: 525px) {
table {
width: 100%;
}
.header-padding {
padding-left: 10px;
padding-right: 10px;
}
.logo {
height: 50px;
width: auto;
}
.mobile-hide {
display: none !important;
}
.mobile-copy {
text-align: center !important;
}
.mobile-center-btn {
text-align: center !important;
}
.icon-image-tall {
width: auto !important;
height: 200px;
}
.icon-image-long {
width: 200px;
height: auto !important;
}
.icons_three_padding {
padding-bottom: 40px;
}
.iphone_icon_mobile {
width: 120px !important;
}
.money_icon_mobile {
width: 120px !important;
}
.share_icon_mobile {
width: 120px !important;
}
.icons_conatiners_height {
height: auto !important;
}
.main-image-mobile {
width: 90% !important;
}
}
</style>
</head>
<body>
<!-- hidden preheader text -->
<div style="display: none; font-size: 1px; color: #f2f2f2; line-height: 1px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
Hi #FIRSTNAME#, You are officially a #[COMPANY]. It's time to become a social butterfly. You should be proud of your new store because it truly is super… now let's find all your friends so that they can become Social Superstars too.
</div>
<!-- /hidden preheader text -->
<!--container-->
<table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#f2f2f2" style="background-color: #f2f2f2;">
<tr>
<td>
<!--header container-->
<table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#ffffff" style="background-color: #ffffff; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #dadada;">
<tr>
<td style="padding-top: 10px; padding-bottom: 10px;" class="header-padding">
<!--header-->
<center>
<table cellspacing="0" cellpadding="0" border="0" width="600" bgcolor="#ffffff" style="background-color: #ffffff; margin-left: auto; margin-right: auto;">
<tr>
<td>
<img src="http://placehold.it/64x64" alt="" style="font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; color: #E72C7B; font-size: 24px;" width="64" class="logo">
</td>
</table>
</center>
<!--/header-->
</td>
</tr>
</table>
<!--/header container-->
<!--hero container-->
<table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#ffffff" style="background-color: #ffffff;">
<tr>
<td style="padding-top: 40px; padding-bottom: 40px; padding-left: 10px; padding-right: 10px;">
<!--hero copy-->
<center>
<table cellspacing="0" cellpadding="0" border="0" width="600" style="margin-left: auto; margin-right: auto; text-align: center;">
<tr>
<td style="font-size: 36px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; font-weight: bold; padding-bottom: 20px; color: #6a6a6a;" class="mobile-copy">
Hi #FIRSTNAME#,
</td>
</tr>
<tr>
<td style="font-size: 18px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; line-height: 175%; color: #6a6a6a;" class="mobile-copy">
You are officially a <span style="font-weight: bold">#[COMPANY]</span>. It's time to become a social butterfly. You should be proud of your new store because it truly is super… now let's find all your friends so that they can become Superstars too.
</td>
</tr>
</table>
</center>
<!--/hero copy-->
</td>
</tr>
</table>
<!--/hero container-->
<!--fill it up and launch container-->
<table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#6a6a6a" style="background-color: #6a6a6a;">
<tr>
<td style="padding-top: 40px; padding-bottom: 40px; padding-left: 10px; padding-right: 10px;">
<!--fill it up and launch-->
<center>
<table cellspacing="0" cellpadding="0" border="0" width="600" style="margin-left: auto; margin-right: auto; text-align: center;" align="center">
<tr>
<td style="font-size: 48px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; font-weight: bold; padding-bottom: 20px; color: #ffffff; text-align: center;" class="mobile-copy">More followers,<br>more money</td>
</tr>
<tr>
<td style="padding-bottom: 40px;"><img src="https://s3-eu-west-1.amazonaws.com/socialsuperstore-assets/emails/find-followers.png" alt="" style="width: 360px;" width="360" class="main-image-mobile">
</td>
</tr>
<tr>
<td style="font-size: 18px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; line-height: 175%; padding-bottom: 40px; color: #ffffff; text-align: center;" class="mobile-copy">Don't be shy… share share share! <br>Remember... Stay Social. Stay Super. </td>
</tr>
<tr>
<td class="mobile-center-btn">Share now →</td>
</td>
</tr>
</table>
</center>
<!--/fill it up and launch-->
</td>
</tr>
</table>
<!--/fill it up and launch container-->
<!--footer container-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding-top: 40px; padding-bottom: 40px; padding-left: 10px; padding-right: 10px;">
<!--footer-->
<center>
<table width="600" cellpadding="0" cellspacing="0" align="center" style="text-align: center;">
<tr>
<td style="font-size: 18px; line-height: 175%; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; color: #999999; padding-bottom: 20px">Thanks,<br />
The [COMPANY]team
</td>
</tr>
<tr>
<td style="font-size: 24px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; color: #282828; font-weight: bold;">COPY GOES HERE</td>
</tr>
<tr>
<td style="padding-top: 20px;">
<img src="http://placehold.it/42x42png" alt="" height="42" width="42" border="0">
<img src="http://placehold.it/42x42png" alt="" height="42" width="42" border="0">
<img src="http://placehold.it/42x42png" alt="" height="42" width="42" border="0">
<img src="http://placehold.it/42x42png" alt="" height="42" width="42" border="0">
<img src="http://placehold.it/42x42png" alt="" height="42" width="42" border="0">
</td>
</tr>
</table>
</center>
<!--/footer-->
</td>
</tr>
</table>
<!--/footer container-->
<!-- Unsubscribe container -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#282828" align="center" style="padding: 20px 0px; background-color: #282828;">
<!-- unsubscribe -->
<center>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="responsive-table">
<tr>
<td align="center" style="font-size: 10px; line-height: 175%; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; color:#ffffff;">
<span class="appleFooter" style="color:#999;">
[company]
</span>
<br><a class="original-only" style="color: #E72C7B; text-decoration: none;" href="http://$UNSUB$">Unsubscribe</a>
</td>
</tr>
</table>
</center>
<!--/unsubscribe-->
</td>
</tr>
</table>
<!--/Unsubscribe container-->
</td>
</tr>
</table>
<!--/container-->
</body>
</html>
I've created some responsive HTML emails and have noticed on a couple of them, they show a white space (approx 20-30px in width) on the right. it only appears on iPads? I've attached a screenshot. Any ideas on how to get rid of it? I've apply 100% widths and 0 padding/margin and overflow-x: hidden to body and html tags but didn't work. Is it something to do with the amount of content in the email? The other emails without this issue have a lot more content (ie. they are taller with more sections).
http://imgur.com/kBgYmLm
This one was a tough nut to crack. To fix it, I wrote a media query that targets only iPads, and specifies a minimum width for the body. In my testing, this fixes the issue.
https://www.emailonacid.com/app/acidtest/display/summary/H51ptRsq1CKfk3qClFhulAJfOoa7NeZ5uplotor0fc9kD/shared
#media screen and (device-width: 768px) and (device-height: 1024px) {
body {min-width: 701px}
}
I have a button that in order for it to work in Outlook 2007/10 (!) I have to put the three elements - left image, middle text, right image - in their own nested tables within a larger table. However, this causes the oft-quoted issue in Outlook 2007/10 which has the gaps between the tables.
Below is the code for the button. Obviously, there's the html head body etc above it.
I've tried display attributes, widths, align, border/padding/margin = 0 on img and tables alike... I've tried every solution I could find online and nothing is fixing it!
Any ideas for what else to try gratefully received!!
Note: this is happening across the board in Outlook, not just one of them.
<tr>
<td style="width: 15px; font-size: 15px;" valign="top"> </td>
<td align="center" valign="middle">
<table align="center" cellpadding="0" cellspacing="0" height="40" width="243" border="0" style="margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; mso-table-lspace:0pt; mso-table-rspace:0pt; display: block; background-color: #f2f2f2;" valign="middle">
<tbody valign="middle">
<tr height="40">
<td height="40">
<table align="left" border="0" cellpadding="0" cellspacing="0" height="40" width="22" style="margin: 0; border: 0; padding: 0; width: 22px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #f2f2f2; mso-table-lspace:0pt; mso-table-rspace:0pt; display: block;" valign="middle">
<tbody>
<tr>
<td height="40" width="22" style="background-color: #f2f2f2;"><a href="#" style="border: 0; text-decoration: none; color: #ffffff;" target="_blank">
<img align="right" height="40" src="ctaleftgrey.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px; display: block;" width="22" /></a></td>
</tr>
</tbody>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" height="40" width="180" style="margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt; display: block; border-left: 1px solid #ec6608;" valign="middle">
<tbody>
<tr style="background-color: #ec6608;">
<td height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;">Text goes here</td>
</tr>
</tbody>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" height="40" width="36" style="margin: 0; border: 0; padding: 0; width: 36px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #f2f2f2; mso-table-lspace:0pt; mso-table-rspace:0pt; display: block;" valign="middle">
<tbody>
<tr>
<td height="40" width="36" style="background-color: #f2f2f2;"><img align="right" height="40" src="ctarightgrey.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px; display: block;" width="36" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 15px; font-size: 15px;" valign="top"> </td>
This one was surprisingly tough! I found that part of the issue was caused by the align="center" on the outer table, causing a 3px gap in Outlook 2003 and Live Mail. If you still need it to align to the center, I would wrap this code in another table with that attribute. To solve the rest of it I removed extra tables and added align to your TDs. I also added "border-collapse: collapse;" to your tables. You should see no spacing in desktop Outlook clients now.
<table cellpadding="0" cellspacing="0" height="40" width="238" border="0" style="border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:238px; color: #ffffff; width:238px;height: 40px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #f2f2f2;">
<tbody>
<tr>
<td height="40" width="22" align="left">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
<a href="#" style="border: 0; text-decoration: none; color: #ffffff;" target="_blank">
<img height="40" src="ctaleftgrey.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" />
</a>
</p>
</td>
<td height="40" width="180" align="left">
<table border="0" cellpadding="0" cellspacing="0" height="40" width="180" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt; " valign="middle">
<tbody>
<tr>
<td height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
Text goes here
</p>
</td>
</tr>
</tbody>
</table>
</td>
<td height="40" width="36" align="left">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
<a href="#" target="_blank">
<img height="40" src="ctarightgrey.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" />
</a>
</p>
</td>
</tr>
</tbody>
You need to specify table-layout in <table> tags. If this still not working, you need to change your table layout to a float / display layout.
<table style="table-layout: fixed; [.....]">
The float layout is like this:
<a href="..." style="float:left;"><img ....>
I feel your pain! been making email templates and having these battles with Outlook for years now. The answer is that you need to do everything in your power to make the simplest little section work. I would make the background-color of each cell the orange, and align the left image to the left, and the right to the right https://jsfiddle.net/0gncaogm/.
I've also added classes (to accompany your inline widths) to make the cells a max-width with overflow-x:hidden...
img{
display:inline-block;
margin-top:0;
margin-right:0;
margin-left:0;
margin-bottom:0;
}
.leftedge{
max-width:15px;
overflow-x:hidden;
}
.rightedge{
max-width:36px;
overflow-x:hidden;
}
In the HTML...
<td height="40" width="36" style="background-color: #e76823;" align="right>
<a href="#" target="_blank">
<img align="right" height="40" src="http://www.tonytansley.co.uk/so/right.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px; display: block;" width="36" />
</a>
</td>
Hi I am having problem with outlook not centering my table part.
it consists of two columns which are left aligned.They are centering in gmail and outlook on desktop but not on mobile.I guess that align left in two columns is giving me an issue.Please help me out.
<table border="0" cellpadding="0" cellspacing="0" align="center" style="padding:0 0 0 10px;">
<tr>
<td align="center" class="middle">
<div align="center">
<center>
<!--[if mso]>
<table style="width: 300px;"><tr><td>
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" align="left" width="45%" height="158" bgcolor="#006699"><tr>
<td style="padding: 0;" align="left" class="responsive-image middle">
<img src="http://www.eruditus.com/emailer/0418_responsive_columbia/bg.jpg" style="display: block; margin: 0; padding: 0;">
</td>
</tr></table>
<table border="0" cellpadding="0" cellspacing="0" align="left" width="45%" bgcolor="#0093d4" height="158px"><tr>
<td width="" style="padding: 0 0 0 0; background-color: #0093d4; vertical-align: top;" bgcolor="#0093d4" valign="top">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#0093d4">
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 5px 0 0;" bgcolor="#0093d4" valign="top"> </td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
</tr>
<tr>
<td width="56" style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 5px 0 0 10px;" bgcolor="#0093d4" valign="top">Email: </td>
<td width="273" style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 0;" bgcolor="#0093d4" valign="top">EPM_columbia#eruditus.com</td>
</tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 0 0 0 10px;" bgcolor="#0093d4" valign="top">Phone: </td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0px; padding: 0;" bgcolor="#0093d4" valign="top"><span style="font-size: 12px; line-height: 20px;">+91 22 6162 3112(India)</span></td>
</tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"><span style="font-size: 12px; line-height: 20px;">+971 044302011(Dubai)</span></td>
</tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"><span style="font-size: 12px; line-height: 20px;">+1 862 252 5823(USA)</span></td>
</tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
</tr>
</table>
</td> </tr>
</table>
</center>
</div>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="600" class="content" style="border-collapse: collapse; width: 100%; max-width: 600px;">
<tr><td style="font-size: 0; line-height: 0; font-family:Arial, Helvetica, sans-serif; color: #666666;" height="10"> </td>
</tr>
<tr><td style="font-family:Arial, Helvetica, sans-serif; color: #666666; padding: 0;" align="center" class="responsive-image">
<a href="http://www.eruditus.com/programmes/columbia/columbia-mc.html" style="display: block; margin: 0 auto;" target="_blank">
<img src="http://www.eruditus.com/emailer/0419_columbia/clickhere.png" align="middle" width="277" height="58" alt="click_program" style="display: block; max-width: none !important; margin: 0 auto;" /></a>
</td>
</tr></table></td>
</tr><tr><td style="font-size: 0; line-height: 0; font-family:Arial, Helvetica, sans-serif; color: #666666;" height="10"> </td>
</tr></table><!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
What you'll want to do is use a Media Query to check whether the screen size is less than a certain size to display responsive layouts. e.g:
#media only screen and (max-width: 500px;) {
//Responsive CSS styling
}
Using this you can center those tables as you would with a normal webpage. e.g:
#media only screen and (max-width: 500px;) {
td[class="responsive-align"] {
margin: 0 auto !important;
float: none !important;
align: center !important; //If this line centers your text, remove it.
}
}
Email clients are very pedantic, and take a long time to understand what you can do with each one, and what their limits are.
From my experience with responsive designs and Outlook especially you need to lay out your tables like this for them to drop down effectively:
<table align="left">
<tr>
<td>
</td>
</tr>
</table>
<table align="right">
<tr>
<td>
</td>
</tr>
</table>
With Outlook, it's best to make sure you have 5px or larger in between the two tables so that it can add it's own spacing in (That you can't do anything about). So, for a table of 600px width, you'd have each of your tables with a width of 295px for a good enough amount of spacing.
Hope this helps :)