<!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}
}
Related
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>
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.
I've been having an issue with how outlook has been displaying table HTML for a while now, and I have not been able to resolve this issue for the life of me. Basically, there's a line that cuts through the containing <td> when nesting tables (see the slight gray line in the attached image to the right of the purple <td>).
This is on email's code I've been working with as an example.
<style type="text/css">
#media only screen and (max-width:480px){
.templateColumns{
width: 100% !important;
}
.body-text {
font-size: 16px !important;
}
.body-about-us {
font-size: 15px !important;
}
.center-align {
text-align: center !important;
}
.column-image {
height:auto !important;
max-width:480px !important;
width: 100% !important;
}
.column-container {
display: block !important;
width: 100% !important;
}
.sociologos-container {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
padding-top: 15px !important;
padding-bottom: 5px !important;
}
.mopad-left {
padding-left: 15px !important;
}
.mopad-right {
padding-right: 15px !important;
}
.mopad-top {
padding-top: 15px !important;
}
.mopad-bottom {
padding-bottom: 15px !important;
}
.mopad-button-bottom {
padding-bottom: 30px !important;
}
.nopad-bottom {
padding-bottom: 0 !important;
}
.nopad-top {
padding-top: 0 !important;
}
.nopad-left {
padding-left: 0 !important;
}
.nopad-right {
padding-right: 0 !important;
}
.modisplay-none {
display: none !important;
}
.mainbtn {
max-width: 450px !important;
width: 100% !important;
margin-top: 10px !important;
}
.mainbtn a{
display:block !important;
}
.mobold {
font-weight: bold !important;
}
.heading {
font-size: 32px !important;
line-height: 36px !important;
}
.heading2 {
font-size: 24px !important;
line-height: 28px !important;
}
.heading3 {
font-size: 20px !important;
line-height: 20px !important;
}
.sociologos {
width: 32px !important;
height: 32px !important;
}
.join-us {
text-align: center !important;
}
}
p {margin-bottom: 25px;
margin-top:10px;}
</style>
<body vlink="#421b3e" style="margin:0; padding: 0; background-color:#f2f2f2;"><!--this sets the visited link color, a background color and eliminates any potential auto padding on the page-->
<div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
</div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%" id="bodytable" style="background-color:#f2f2f2; font-family: Arial, Helvetica, sans-serif;">
<tr>
<td align="center" valign="top" style="padding-top:0px;">
<table border="0" cellpadding="0" cellspacing="0" width="580" class="templateColumns mopad-bottom nopad-top mopad-left mopad-right" style=" background-color: #f2f2f2; padding-top: 0; padding-bottom: 25px; margin:0;">
<!-- start PURPLE HEADER -->
<tr>
<td width="100%" align="center" valign="top" class="templateColumns mopad-left mopad-right mopad-top mopad-bottom" id="logo" style="margin:0; background-color: #f2f2f2; padding-top: 20px; padding-bottom: 20px;">
LOREM IPSUM
</td>
</tr>
<!-- end PURPLE HEADER -->
<!-- start INTRO SECTION -->
<tr>
<td align="center" valign="top" class="templateColumns" width="100%" style="background-color: #ffffff; padding: margin:0;"><img class="column-image" src="http://go.advicentsolutions.com/rs/841-KAP-325/images/FosteringGrowth2016TitleBanner.png" alt="Nurturing Growth" width="580" style="display:block;" /></td>
</tr>
<!-- end INTRO SECTION -->
<!-- start FIRST CONTENT SECTION -->
<tr>
<td width="100%" class="mopad-left mopad-right mkteditable" id="primary-content" style="background-color: #ffffff; font-family: Arial, sans-serif; padding-top:15px; padding-bottom:30px; padding-left:40px; padding-right:40px;">
<!--<h3 class="body-text mopad-right mopad-left" style="font-family: Arial, sans-serif; font-size: 17px; color: #3c3d42; letter-spacing: -.25px; line-height: 1.5em; font-weight: bold; margin:0; padding: 0 0 5px 0; ">Did you know?</h3>-->
<p class="heading2" style="text-align:center; font-size: 28px; color: #3c3d42; line-height: 30px;">lorem ipsum</p>
<p class="margin" style="text-align:center; font-family: Arial, sans-serif; font-size: 16px; color: #727577; line-height: 22px; font-weight: 400; ">lorem ipsum</p>
<table align="center" cellpadding="0" cellspacing="0" width="60%" style="background-color:#6a3757; border-radius: 2px; font-family: Arial, sans-serif; padding:2px; margin: auto;">
<tr>
<td align="center" style="font-family: Arial, sans-serif; color: #ffffff; border-radius: 4px; background-color: #6a3757; padding-top: 10px; padding-bottom: 10px;"><strong>lorem ipsum</strong></td>
</tr>
</table>
</td>
</tr>
<!-- end MAIN CTA BUTTON -->
<!-- start SOCIAL MEDIA SECTION -->
<tr>
<td width="100%" class="templateColumns mopad-bottom mopad-top mopad-left mopad-right" id="social-media" style="font-family: Arial, Helvetica, sans-serif; background-color: #f2f2f2; padding-left: 5px; padding-right: 5px; padding-bottom: 10px; padding-top: 10px; margin:0; ">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="middle" class="column-container join-us" width="50%" style="font-family: Arial, sans-serif; font-size: 14px; color: #3c3d42; ">
Join the Community!
</td>
<td aLOREM IPSUM class="column-container" width="50%">
<table cellpadding="0" class="sociologos-container" cellspacing="0" style="font-family: Arial, sans-serif;">
<tr>
<td align="left" class="sociologos" valign="top" style="padding-left: 5px;"><img border="0" style="display: block; padding-left: 5px;" class="sociologos" src="http://www.advicentsolutions.com/images/email/google_42.png" width="32" height="32" alt="Google Plus" /></td>
<td align="left" class="sociologos" valign="top" style="padding-left: 5px;">><img border="0" style="display: block; padding-left: 5px;" class="sociologos" src="http://www.advicentsolutions.com/images/email/twitter_42.png" width="32" height="32" alt="Twitter" /></td>
<td align="left" class="sociologos" valign="top" style="padding-left: 5px;"><img border="0" style="display: block; padding-left: 5px;" class="sociologos" src="http://www.advicentsolutions.com/images/email/facebook_42.png" width="32" height="32" alt="Facebook" /></td>
<td align="left" class="sociologos" valign="top" style="padding-left: 5px;"><img border="0" style="display: block; padding-left: 5px;" class="sociologos" src="http://www.advicentsolutions.com/images/email/linked_42.png" width="32" height="32" alt="LinkedIn" /></td>
<td align="left" class="sociologos" valign="top" style="padding-left: 5px;"><img border="0" class="sociologos" style="display: block; padding-left:5px;" src="http://www.advicentsolutions.com/images/email/youtube_42.png" width="32" height="32" alt="Youtube Channel" /></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- end SOCIAL MEDIA SECTION -->
<!-- start DISCLAIMER -->
<tr>
<td align="left" valign="top" width="100%" class="templateColumns mopad-bottom mopad-top mopad-left mopad-right" id="disclaimer" style="color:#727577; font-size: 12px; font-family: Arial, Helvetica, sans-serif; padding-left: 5px; padding-right:5px; padding-top:10px; margin:0;">
LOREM ISPUM
</td>
</tr>
<!-- end DISCLAIMER -->
</table>
</td>
</tr>
</table>
</body>
It displays fine as HTML, but I send mostly B2B stuff which means we're always trying to optimize for office. Sometimes the sizing of the banner image can affect it, but other than that one factor, when this happens seems completely arbitrary. It's the one Outlook workaround I haven't been able to figure out. Is there something in my code I'm missing?
Finnnaaalllly found the solution about ten min after posting this. Trick was to remove the padding inline css that was tied to the Lorem ipsum text within the table in the code.
I also fixed this in other instances where <p> tags applied to links in the tds also caused issue. Removing the <p> tags around the links within the table and any padding accompanying it fixes the issue.
<meta name="viewport" content="width=device-width" />
<style>
body {
background-color: #e4e4e4;
font-family: 'PT Sans Narrow',Arial,sans-serif;
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
.ExternalClass * {
line-height: 100%;
}
.bgimg {
background-image: url('http://worldtravelhub.com.au/newsletter/201401/images/wth_map.jpg');
width: 100%;
background-size: contain;
background-repeat: no-repeat;
height: 0;
padding-bottom: 77%;
background-repeat: no-repeat;
}
.checkout-price {
position: absolute;
top: 590px;
margin-left: 25px;
width: 120px;
height: 120px;
font: 28px/120px Helvetica, Arial, sans-serif;
color: white;
text-align: center;
text-shadow: 0 -1px 1px rgba(black, .3);
text-indent: -1px;
letter-spacing: -1px;
background: #e54930;
border: 1px solid;
border-color: #b33323 #ab3123 #982b1f;
border-radius: 60px;
#include user-select(none);
#include linear-gradient(top, #f75a3b, #d63b29);
#include box-shadow(inset 0 1px 1px rgba(white, .3), 0 1px 2px rgba(black, .2));
}
.checkout-price:before {
content: '';
position: absolute;
top: 3px;
bottom: 3px;
left: 3px;
right: 3px;
border: 2px solid #f5f8fb;
border-radius: 60px;
#include box-shadow(inset 0 1px 1px rgba(white, .2), inset 0 -1px 1px rgba(black, .25), 0 -1px 1px rgba(black, .25));
}
.cheapest {
margin-left: 80px;
font-size: 14px;
padding-top: 22px;
font-family: 'PT Sans Narrow',Arial,sans-serif;
}
.bold {
font-weight: bold;
}
.indsub {
color: #e62529;
font-size: 30px;
font-weight: bold;
}
#media only screen and (max-width: 480px) {
div, p, a, li, td {
-webkit-text-size-adjust: none !important;
}
table[class="table"], td[class="cell"] {
width: 300px !important;
}
img {
display: block !important;
max-width: 100% !important;
}
[class].hide {
display: none !important;
}
[class].w100 {
width: 100% !important;
text-align: left !important;
}
.cheapest {
margin-left: 5px;
font-size: 10px;
padding-top: 10px;
font-family: 'PT Sans Narrow',Arial,sans-serif;
max-width: 100% !important;
}
.bold {
font-weight: bold;
}
.indsub {
color: #e62529;
font-size: 22px;
font-weight: bold;
}
.checkout-price {
margin-left: 0px;
top: 260px;
}
/*.bgimg {
background-image: url('images/wth_map.jpg');
width: 100%;
background-size: contain;
background-repeat: no-repeat;
height: 0;
padding-bottom: 77%;
background-repeat: no-repeat;
}*/
}
#media only screen and (max-width: 767px) {
div, p, a, li, td {
/*-webkit-text-size-adjust: none !important;*/
}
table[class="table"], td[class="cell"] {
width: 300px !important;
}
img {
display: block !important;
max-width: 100% !important;
}
[class].hide {
display: none !important;
}
[class].w100 {
width: 100% !important;
text-align: left !important;
}
.cheapest {
margin-left: 5px;
font-size: 10px;
padding-top: 10px;
font-family: 'PT Sans Narrow',Arial,sans-serif;
max-width: 100% !important;
}
.bold {
font-weight: bold;
}
.indsub {
color: #e62529;
font-size: 22px;
font-weight: bold;
}
.checkout-price {
margin-left: 0px;
top: 260px;
}
}
</style>
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<div style="background-color: #e4e4e4">
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="table">
<tr>
<td class="cell">
<table>
<tr>
<td>
<span style="font-size: 10px; color: #666666">If this email doesn't display properly you can view it in your web browser Click Here</span>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td>
<table border="0" align="center" cellpadding="10" cellspacing="0" class="w100">
<tr>
<td>
<img src="http://worldtravelhub.com.au/newsletter/201401/images/high_quality_logo_wth.png" width="500" height="108" border="0" style="display: block"></td>
</tr>
</table>
<table border="0" align="right" cellpadding="10" cellspacing="0" class="w100">
<tr>
<td align="right" class="w100">
<!--<font face="Arial, Helvetica, sans-serif" color="#333333" style="font-size:22px"><strong>WorldTravelHub</strong></font><br>
<font face="Arial, Helvetica, sans-serif" color="#666666" style="font-size:18px">Newsletter
</font>-->
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
<tr>
<td>
<table width="290" border="0" align="left" cellpadding="10" cellspacing="0" class="w100">
<!--<tr>
<td class="w100"><div class="left_align" face="Arial, Helvetica, sans-serif" color="#666666" style="font-size:12px"><font face="Arial, Helvetica, sans-serif" color="#333333" style="font-size:11px"><strong>We'll get you the CHEAPEST flights to the</strong></font>
<font><span style="color:#ff5313;font-size:29px;">Indian Subcontinent </span></font>
</div>
</td>
</tr>-->
</table>
<table width="290" border="0" align="right" cellpadding="10" cellspacing="0" class="w100">
<!-- <tr>
<td class="w100">
<img class="stamp" src="images/stamp.png" alt="CHEAPEST GAURANTEE" />
</td>
</tr>-->
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<!--<img src="images/600.png" border="0" style="display:block">-->
<div class="bgimg">
<p class="cheapest">
<span class="bold">We'll get you the CHEAPEST flights to the</span><br />
<span class="indsub">Indian Subcontinent</span>
</p>
</div>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="white">
<tr>
<td>
<table width="100%" border="0" align="left" cellpadding="10" cellspacing="0" class="w100">
<tr>
<td class="w100">
<span class="checkout-price">
<span style="font-size: 10px;">FROM</span> $850*
<!--<sup style="font-size:8px;margin-top:5px;">From</sup><sub>$850*</sub>--></td>
</tr>
</table>
<table width="290" border="0" align="right" cellpadding="10" cellspacing="0" class="w100">
<tr>
<td class="w100">
<!--<font face="Arial, Helvetica, sans-serif" color="#666666" style="font-size:12px"><font face="Arial, Helvetica, sans-serif" color="#333333" style="font-size:14px"><strong>Lorem ipsum dolor sit amet</strong></font>-->
<div style="text-align: center; margin-right: 30px;">
Toll Free: 1800 984 045<br />
info#worldtravelhub.com.au<br />
www.worldtravelhub.com.au
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="white">
<tr>
<td>
<table width="100%" border="0" align="center" cellpadding="10" cellspacing="0" class="w100">
<tr>
<td class="w100">
<p style="text-align: center;">
<span style="font-size: 22px; color: #e62529; letter-spacing: 3px; font-weight: bold;">Book online <span style="color: #000;">24/7 </span>at worldtravelhub.com.au</span><br>
<span style="font-size: 8px;">*A Verifiable written quote from another Australian registered travel businesses must be aproved and fare quoted must be generally avaliable to the public in the market and must be for the same date,seat class,fare category and airline and given to us before we make a booking for the customer.The quote must be for booked fares originating in Australia to Indian subcontinent.Lics No<span style="font-weight: bold;"> 2TA6049</span></span>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#888888">
<tr>
<td>
<table width="290" border="0" align="left" cellpadding="10" cellspacing="0" class="w100">
<tr>
<td class="w100"><font face="Arial, Helvetica, sans-serif" color="#ffffff" style="font-size: 12px"><strong>WorldTravelHub</strong><br>
Suite 4, 2 Kendall St,<br>
Harris Park NSW 2150</font></td>
</tr>
</table>
<table width="290" border="0" align="right" cellpadding="10" cellspacing="0" class="w100">
<tr>
<td align="right" class="w100"><font face="Arial, Helvetica, sans-serif" color="#ffffff" style="font-size: 12px"><strong>Phone:</strong> +61 2 8005 2797<br>
<strong>Fax:</strong>+61 2 8005 4237<br>
<strong>Email:</strong> info#worldtravelhub.com.au</font></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td>
<span style="font-size: 10px; color: #666666">If this email doesn't display properly you can view it in your web browser Click Here</span>
<br>
<br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
My html page works fine in all version of Chrome Browsers and IE 10,But Doesn't seem to work properly in IE 8 and IE 9,The problem is with padding-bottom css in class .bgimg.The Bottom Part of the page goes right below,when I add px instead of % it moves upwards and works but the text below ie contact details in red are no longer visible..Please help
Thanks for help in advanced
you can view it on this link..
http://worldtravelhub.com.au/newsletter/201401/201401.html
You can try to apply display: block; to any element and after give it padding-bottom
Remove padding-bottom and apply the height for the div bgimg. Also keep the background-size:cover for that.
.bgimg {
background-image: url('http://worldtravelhub.com.au/newsletter/201401/images/wth_map.jpg');
width: 100%;
background-size:cover;
background-repeat: no-repeat;
height:460px;
background-repeat: no-repeat;
}
<element style = "padding-bottom: 77%;"> </element>
been experience on css trouble like that , and some browser element needs to have their style in HTML, so try something like on the above rather than on css file.