There appears to be a white line above the image in Gmail app on IOS in dark mode.
I've tried many solutions regarding this but could not remove the white line/space.
img[class="visual"] {
width: 100% !important;
height: auto !important;
text-align: center;
margin: 0 auto;
}
<tr>
<td bgcolor="transparent" valign="middle">
<table cellpadding="0" cellspacing="0" border="0" class="content" align="center" width="640">
<tr>
<td bgcolor="transparent" align="center" valign="top" style="width: 640px;">
<img src="https://via.placeholder.com/150.jpg" width="640" height="250" style="display: block; border: none; max-height: 250px;" border="0" alt="Banner" class="visual" />
</td>
</tr>
</table>
</td>
</tr>
Related
I have an HTML email template that renders very well on all mail clients except the Outlook Desktop application. In the Outlook client, the image, as well as the table elements, are blown up in terms of size leading to a terribly formatted email being displayed. How should I address this issue so that it at least renders well on the Outlook desktop client? I am aware of using conditional logic to add dynamic pixel values depending on what client will be rendering the template but I need to know what styling changes I should make to make Outlook's rendering engine display the template properly. Below is the HTML template:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Click Source</title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<style>
*{margin: 0; padding: 0;}
body{font-family: 'Montserrat', sans-serif;margin: 0; padding: 0;}
#media(max-width:767px){
h3{font-size: .75em !important;}
p{font-size: 10px !important;}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" style="max-width:600px; width: 100%; margin: 0 auto;">
<tr>
<td align="center" valign="top" id="bodyCell">
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="top" valign="top">
<img src="https://clicksource.uk/static/images/head.jpg" alt="" style="width: 650px;"/>
</td>
</tr>
<tr>
<td valign="top" align="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width: 60%;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background: #f5f5ef; padding: 12px; padding-left: 5px; padding-top: 45px;">
<tr>
<td style="width: 30%;">
<img src="https://clicksource.uk/static/images/mobile.jpg" alt="" style="width: 150px"/>
</td>
<td style="width: 50%; text-align: center;">
<h3 style="color: #a25140; font-size: 1.6em; font-weight: 800; margin: 0 0 10px 0;">GET ON THE
TOP 3 OF
GOOGLE
</h3>
<p style="color: #000; font-size: 13px; line-height: 1.5; font-weight: 500;">Hello, {{first_name}} {{last_name}}. It's essential to be at the top
of Google search results. If
your business isn't there,
you're losing potential
customers to your
competitors already in the
top 3.
</p>
</td>
</tr>
</table>
</td>
<td style="width: 40%; background: #f5f5ef;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background: #f5f5ef;">
<tr>
<td>
<img src="https://clicksource.uk/static/images/location.jpg" alt="" style="width: 250px;"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width: 55%;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background: #fff; padding: 20px 0 10px 0; text-align: center;" >
<tr>
<td style="width: 100%; text-align: center; padding: 15px;">
<h3 style="color: #a25140; font-size: 1.6em; font-weight: 800; margin: 0 0 15px 0;">GET YOUR BUSINESS
SHOWN ON GOOGLE
</h3>
<p style="color: #000; font-size: 13px; line-height: 1.5; font-weight: 500; margin: 0; padding: 0 15px;">Google Business Profile is another
crucial element for getting your
business in front of new customers! The
Google business platform allows
business owners greater control over
their information on Google search
results, specifically for their physical
location and service areas.
</p>
</td>
</tr>
</table>
</td>
<td style="width: 45%; padding-right: 10px;align-items: center;" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="text-align: center;">
<img src="https://clicksource.uk/static/images/local-seo-email-video-ph.PNG" alt="Promo vid" width="250px" height="132px"><br>
CLICKSOURCE.CO.UK
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="background: #0C2840; background-size: cover; background-position: center center">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="30" cellspacing="0" width="100%" style="align-items: center;">
<tr>
<td valign="top" style="padding: 15px; width: 20%;">
<img src="https://clicksource.uk/static/images/footer-icon-logo.png" alt="" style="width: 100px;"/>
</td>
<td valign="top" style="text-align: center; padding: 15px; width: 60%;">
<img src="https://clicksource.uk/static/images/footer-logo.jpg" alt="" style="width: 120px;"/>
<ul style="text-align: center; padding: 0; margin: 0;">
<li style="display: inline-block; list-style: none; font-size: 10px;"><img src="https://clicksource.uk/static/images/call.png" style="width: 15px; vertical-align: middle; padding-right: 4px;" alt=""/> 020 3832 2400 </li>
<li style="display: inline-block; list-style: none; font-size: 10px;"><img src="https://clicksource.uk/static/images/website.png" style="width: 15px; vertical-align: middle; padding-right: 4px;" alt=""/> www.clicksource.co.uk</li>
<li style="display: inline-block; list-style: none; font-size: 10px;"><img src="https://clicksource.uk/static/images/email.png" style="width: 15px; vertical-align: middle; padding-right: 4px;" alt=""/> Hello#clicksource.co.uk</li>
<li style="display: inline-block; list-style: none;color:#fff; font-size: 10px;"><img src="https://clicksource.uk/static/images/location-icon.png" style="width: 15px; vertical-align: middle; padding-right: 4px;" alt=""/> Cuffley Place, Sopers Road, EN6 4SG</li>
</ul>
</td>
<td valign="top" style="width: 20%;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I'm trying to make sure all the padding aligns as well as the text and logo aligning in this html.
The code I've used to make everything align is listed below.
<table cellpadding="0" cellspacing="0" style="width: 580px;table-layout: auto;" width="580">
<tbody>
<tr>
<td align="left" valign="top" style="font-family:'Arial, 'Georgia', Times New Roman, serif;font-weight:normal;font-size:15px;mso-line-height-rule:exactly;line-height:19px; color:#000000;" class="" width="400">
<div class="ee_editable" style="position: static;">
<div class="" style="padding-top: 10px;"><br></div>
<div class="headline">DISCOVER OUR<br> LATEST OFFERS</div>
<div> </div>
</td>
<td width="180">
<a href="https://dmtrk.net/t/20AS-67H0B-UDWVGK-3JC7VW-1/c.aspx" target="_blank">
<img src="http://www.kindlewood.co.uk/bmw_images/minilogo180x80.png" alt="MINI" width="117" height="52" class="ee_editable ee_smallimage ee_pnggif_image" title="MINI" align="right" border="0">
</a>
</td>
</tr>
<tr>
<td class="ee_dropzone" width="580" align="left" style="width: 580px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="ee_element ee_imageelement" ee-type="element" data-title="Image" style="width: 580px;table-layout: auto;">
<tbody>
<tr>
<td style="font-size: 1px; line-height: 1px;" class=""><img border="0" src="https://i.emlfiles4.com/cmpimg/0/0/7/3/9/files/10607126_day10mniheader.png" style="width: 100%; min-height: auto; display: block; max-width: 100%;" class="ee_editable" width="580"></td>
</tr>
</tbody>
</table>
The above code is wrapped in a code like this:
<table border="0" cellpadding="0" cellspacing="0" width="640" style="width: 640px; background-color: rgb(255, 255, 255);table-layout: auto;" class="w320" bgcolor="#ffffff">
<tbody>
<tr>
<td align="center" style="min-width: 320px; padding-top: 0;padding-right: 0;padding-bottom: 0;padding-left: 0;" width="640">
<table cellpadding="0" cellspacing="0" style="width: 580px;table-layout: auto;" width="580">
Right now, the page displays as so:
But I need the white mini pic, text and logo to align with the rest of the page. Thanks for any input!
You need to span the td with the image across two columns, since the row above as two td's, if that makes sense.
So if you change
<td class="ee_dropzone" width="580" align="left" style="width: 580px;">
to
<td colspan="2" class="ee_dropzone" width="580" align="left" style="width: 580px;">
you should be good to go.
I am writing an email which is only having issues in "Windows 10 Mail." I have a 3 table cell with a graphic in the middle TD. The left & right TDs contain a 2-pixel height table with a gray background. This is to make it look like the icon is surrounded by 2 gray lines.
The small tables all have height=2 applied. I've tried using VML code, no effect. Any ideas?
Results:
Code below:
<table cellpadding="0" cellspacing="0" border="0" width="300" style="max-width: 300px">
<tr>
<td valign="middle" width="35%" style="max-width: 108px; line-height: 0; font-size: 0">
<!-- Left Gray Table -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width: 108px; max-height: 2px" height="2">
<tr>
<td height="2" bgcolor="#EAEAEA" style="height: 2px; background-color: #eaeaea; font-size: 0; line-height: 0"><img src="http://go.rocketlawyer.com/rs/148-CGS-511/images/spacer.gif" height="2" width="100%" style="min-width: 74px; max-width: 108px; min-height: 2px; max-height: 2px; display: block">
</td>
</tr>
</table>
<!-- END Left Gray Table -->
</td>
<td align="center" valign="middle" width="53" class="full-width-image" height="92"><img src="http://go.rocketlawyer.com/rs/148-CGS-511/images/icon-quick-answers.png" alt="Chat bubble icon" width="106" height="92" style="border-width:0;display:block;width:100%;max-width:53px;height:auto; max-height:92px">
</td>
<td valign="middle" width="35%" style="max-width: 108px;">
<!-- RIGHT Gray Table -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width: 108px; min-height: 2px; max-height: 2px" height="2">
<tr>
<td height="2" bgcolor="#EAEAEA" style="height: 2px; background-color: #eaeaea; font-size: 0; line-height: 0"><img src="http://go.rocketlawyer.com/rs/148-CGS-511/images/spacer.gif" height="2" width="100%" style="min-width: 74px; max-width: 108px; min-height: 2px; max-height: 2px; display: block">
</td>
</tr>
</table>
<!-- END RIGHT Gray Table -->
</td>
</tr>
</table>
For some reason the email client is making the height too high for the columns. Give this method a try to see how it goes.
<table cellpadding="0" cellspacing="0" border="0" width="300" style="max-width: 300px">
<tr>
<td valign="middle" width="35%" style="max-width: 108px; ">
<!-- Left Gray Table -->
<img src="https://i.stack.imgur.com/T24O6.png" height="2" width="100%" style="min-width: 74px; max-width: 108px; min-height: 2px; max-height: 2px; display: block">
<!-- END Left Gray Table -->
</td>
<td align="center" valign="middle" width="53" class="full-width-image" height="92"><img src="http://go.rocketlawyer.com/rs/148-CGS-511/images/icon-quick-answers.png" alt="Chat bubble icon" width="106" height="92" style="border-width:0;display:block;width:100%;max-width:53px;height:auto; max-height:92px">
</td>
<td valign="middle" width="35%" style="max-width: 108px;">
<!-- RIGHT Gray Table -->
<img src="https://i.stack.imgur.com/T24O6.png" height="2" width="100%" style="min-width: 74px; max-width: 108px; min-height: 2px; max-height: 2px; display: block">
<!-- END RIGHT Gray Table -->
</td>
</tr>
</table>
Tested in Outlook as well. What i have done is added a grey image with 1px height.
Hope this is what you were after.
I have been searching for a fix for this for days and have inserted many different CSS and HTML tags that aren't fixing my issue. I have four separate images in their own tables (as I read that Outlook puts in breaks where it's decided a page should end) but there is an enormous pixel break being inserted between my third and fourth image. Any tips at all are welcome. I removed some of the code for privacy but this is the general format I've used for each of the four images. Thanks!
<div>
<table style="width: 600px; border-collapse: collapse;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td align="center" valign="top" style="line-height: 1px; font-size: 0.0em;"><img alt="BlahBlahBlah" src="http://hosting-source.bm23.com/35156/public/abc.jpg" border="0" height="1053" usemap="#Map" width="600" style="color: white; font-size: 12px; display: block;" /></td>
</tr>
</tbody>
</table>
<table style="width: 600px; border-collapse: collapse;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr style= "page-break-before: always">
<td align="center" valign="top" style="line-height: 1px; display: block; font-size: 0.0em;"><img alt="BlahBlahBlah" src="http://hosting-source.bm23.com/35156/public/abc2jpg" border="0" height="870" usemap="#Map2" width="600" style="color: white; font-size: 12px; display: block;" /></td>
</tr>
</tbody>
</table>
</div>
<p> </p>
Upgraded to Office 2013. Trying to send out a graphic email in Outlook 2013, and have run into an error of overlapping image slices. The emails appear condensed when viewing in 2013 and overlap causing images or text to be cut off.
I’ve sent tests to private Yahoo, Gmail, and Hotmail accounts and have not seen any issues, and older versions of Outlook still show the templates just fine.
Here is an external screenshot of the issue as displayed in the middle and bottom sections: http://imgur.com/jhPwwcF
This is happening with every graphic email we are trying to send. I'm hoping someone has run into this exact issue before. Here is the code i'm using for one of the templates:
<html><style>img{display:block}</style>
<head>
<title>AffHousAug2014Seminars---Final</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (AffHousAug2014Seminars---Final.gif) -->
<table id="Table_01" width="620" height="658" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="2">
<img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_01.gif" width="620" height="181" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></td>
</tr>
<tr>
<td colspan="2">
<a href="http://taa.org/" target="_blank">
<img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_02.gif" width="620" height="48" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></a></td>
</tr>
<tr>
<td style="line-height: 0">
<a href="http://taa.org/member/calendar/icalrepeat.detail/2014/08/13/592/-/income-eligibility-training-aka-tdhcas-first-thursday-training-beaumont" target="_blank">
<img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_03.gif" width="311" height="94" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></a></td>
<td style="line-height: 0">
<a href="http://taa.org/member/calendar/icalrepeat.detail/2014/08/14/593/-/htc-compliance-training-beaumont" target="_blank">
<img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_04.gif" width="310" height="94" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></a></td>
</tr>
<tr>
<td colspan="2">
<img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_05.gif" width="620" height="254" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></td>
</tr>
<tr>
<td style="line-height: 0">
<a href="mailto:education#taa.org" target="_blank">
<img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_06.gif" width="311" height="61" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></a></td>
<td style="line-height: 0">
<a href="http://taa.org/" target="_blank">
<img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_07.gif" width="310" height="61" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></a></td>
</tr>
</tbody>
</table>
<!-- End Save for Web Slices -->
</body>
You have a line-height applied on the td's where it is an issue. I think its to do with that. Whilst you do need to set style="line-height:0px; font-size:0px;" on the containing td to fix some issues with outlook 2013, that only applies to images that are smaller than 30px in height. In this case it is unnecessary and is causing your td to chop off your images.
I have edited your code below to make it a bit more email compliant. This should fix a few other issues that you are likely to encounter.
For one, you shouldn't use colspan/rowspan as this causes rendering issues in older browsers. You should use nested tables instead, as I have done in the code below.
Also, to over-ride browser alignment settings, its advisable to add alignment and vertical alignment to all your td's. Again, that's in the code below.
It would be better to do all this a live copy and background colours where possible, to maximize your user engagement, but that is a decision for you to make ;)
I also added some generic css fixes to your head, that should sort out a few issues with outlook online and yahoo.
Hope this is helpful.
<html>
<head>
<title>AffHousAug2014Seminars---Final</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
.ReadMsgBody, .ExternalClass { width: 100%;}
.ExternalClass * { line-height: 110%; }
body { width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0; }
table { border-collapse:collapse !important; mso-table-lspace:0pt; mso-table-rspace:0pt; }
img{ display:block; }
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (AffHousAug2014Seminars---Final.gif) -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top"><table id="Table_01" width="620" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left" valign="top"><img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_01.gif" width="620" height="181" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></td>
</tr>
<tr>
<td align="left" valign="top"><img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_02.gif" width="620" height="48" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></td>
</tr>
<tr>
<td align="left" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" id="Table_">
<tbody>
<tr>
<td align="left" valign="top"> <img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_03.gif" width="311" height="94" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></td>
<td align="left" valign="top"> <img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_04.gif" width="310" height="94" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td align="left" valign="top"><img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_05.gif" width="620" height="254" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></td>
</tr>
<tr>
<td align="left" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left" valign="top"> <img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_06.gif" width="311" height="61" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></td>
<td align="left" valign="top"><img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_07.gif" width="310" height="61" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<!-- End Save for Web Slices -->
</body>