I've tried everything I can think of, but I cannot get the whitespace between cells to show in Outlook 2013. This is being sent from NationBuilder. How do I add cellspacing so that it renders in Outlook?
Thank you!
<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="initial-scale=1.0"> <!-- So that mobile webkit will display zoomed in --> <meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS --> <title>NationBuilder</title> <style type="text/css"> body {
background-color: #ffffff;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
font-family: 'Palatino Linotype', serif;
}
body {
color: #333333;
margin: 0;
padding: 0;
}
A:link {
color: #2594aa;
text-decoration: none
}
A:visited {
color: #2594aa;
text-decoration: none
}
A:active {
color: #2594aa;
text-decoration: none
}
table {
border-spacing: 0;
border-collapse: collapse;
border-spacing: 0;
}
table td {
border-collapse: collapse;
}
#bodytable {
border-spacing: 10;
border-collapse: sepatate;
}
#bodytable td {
border-collapse: separate;
}
p {
font-family: chaparral-pro, Helvetica, Arial, sans-serif;
margin-bottom: 8px;
margin-top: 5px;
}
.body-content img {
max-width: 100%;
}
ul {
font-family: font-family: chaparral-pro, Helvetica, Arial, sans-serif;
text-align: left;
}
h1 {
margin-top: 35px;
margin-bottom: 10px;
font-weight: bold;
text-align: left;
font-size: 20pt;
color: #e37c00;
font-family: 'Trebuchet MS', sans-serif;
text-transform: uppercase
}
h2 {
margin-top: 10px;
margin-bottom: 10px;
font-weight: bold;
text-align: left;
font-size: 14pt;
color: #c8d300;
font-family: 'Trebuchet MS', sans-serif;
text-transform: capitalize
}
h3 {
margin-bottom: 0px;
margin-top: 10px;
font-weight: bold;
text-align: left;
font-size: 12pt;
color: #000000;
font-family: 'Trebuchet MS', sans-serif;
text-transform: capitalize;
text-decoration: underline
}
dt {
font-weight: bold;
margin-top: 10px;
margin-bottom: 6px;
}
/* Constrain email width for small screens */
#media screen and (max-width: 600px) {
table[class="container"] {
width: 100%!important;
}
}
/* Give content more room on mobile */
#media screen and (max-width: 480px) {
table[class="container"] {
width: 100%!important;
}
div[class="body-content"]img {
width: 100%;
}
}
/* Styles for forcing columns to rows */
#media only screen and (max-width: 600px) {
/* force container columns to (horizontal) blocks */
table[class="container"] {
width: 100%!important;
}
}
</style> </head> <body style="margin:0; padding:0;" bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- 100% wrapper --> <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" bgcolor="#ffffff"> <tr> <td align="center" valign="top" bgcolor="#ffffff"> <!-- header --> <table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#2594aa;"> <tr> <td align="center"> <table width="600" cellpadding="0" cellspacing="0" class="container" border="0"> <tr> <td width="600" style="padding:20px; font-family:chaparral-pro,Helvetica,Arial,sans-serif;" valign="middle" height="100"> <img src="{{ settings.site.meta_image_url }}" alt="{{ settings.official_name }}" width="120" height="auto" border="0" valign="middle" style="vertical-align:middle;"> <a style="color:#000000;font-weight:bold;text-decoration:none;padding:20px;font-size:28px;" href="{{ settings.site.full_url }}"> {
{
settings.official_name
}
}
</a> </td> </tr> </table> </td> </tr> </table> <!-- ### 600PX CONTAINER ### --> <table style="font-size: 14px;" width="600" cellpadding="0" cellspacing="0" class="container" border="0"> <tr> <td height="30"></td> </tr> <tr> <td style="font-family:'proxima-nova','Helvetica',Arial,sans;padding: 20px;line-height:1.5;background-color:#ffffff;-webkit-border-radius:5px;-moz-border-radius: 5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;" bgcolor="#ffffff" class="body-content"> {
{
body
}
}
</td> </tr> <tr> <td height="30"></td> </tr> <tr> <td style="font-family:'proxima-nova','Helvetica',Arial,sans;padding:20px;line-height:1.5;background-color:#ffffff;-webkit-border-radius:5px;-moz-border-radius: 5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;"> {
{
settings.official_name
}
}
{
% if settings.has_address? %
}
·
{
{
settings.address.one_line
}
}
{
% endif %
}
<br/>This email was sent to <a style="color:#505054;" href="{{ recipient.email }}"> {
{
recipient.email
}
}
</a>. To stop receiving emails,
<a style="color:#505054;" href="{{ settings.site.unsubscribe_url }}">click here</a>. <br/><b>Don't forget to like us on Facebook!</b>
<br/>You can also keep up with {
{
broadcaster.name
}
}
on Twitter,
Facebook or Instagram. </td> </tr> </table> <p style="text-align:center;margin: 20px 40px; font-size: 0.8em;font-family:Helvetica,Arial,sans-serif;">Created with NationBuilder,
software for leaders.</p> <!-- ### 600PX CONTAINER ### --> </td> </tr> </table> <!--/100% wrapper--> </body> </html>
<html>
<head>
<meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title></title>
</head>
<body>{{ recipient.first_name_or_friend }} --
<h1 style="color: #e37c00; font-family: 'Trebuchet MS', sans-serif; text-transform: uppercase; text-align: center;">The
Rogers Park Food Co-op has some exciting upcoming events!</h1>
<table id="bodytable" border="0" cellspacing="10" cellpadding="20" width="100%" style="border-spacing: 10px !important; border-collapse: separate !important; background-color:#ffffff;">
<tbody>
<tr>
<td style="background-color: #f8febf; border-collapse:seperate !important;">
<h2 style="text-decoration: none; font-family: 'Trebuchet MS', sans-serif; text-transform: capitalize; color: #2594aa;">
Berger Park Sustainability Open House
</h2>
<p>
<strong>Date: April 22, 2016 from 7 - 8:30pm</strong>
<br />
<strong>Location:
Berger Park Cultural Center
<br />
6205 N Sheridan Rd</strong>
</p>
<p>
Come celebrate the renovation of Berger Park,s south lawn! The architects plan will be unveiled. Also, Edgewater organizations committed to sustainability will have presentation tables. Share your ideas for other improvements to your park.
</p>
<a href="https://d3n8a8pro7vhmx.cloudfront.net/rogersparkfoodcoop/pages/177/attachments/original/1460228200/April_22BergerPark2016-SustainOpenHouse.pdf?1460228200">
<img align="right" style="margin: 6px 1px; border: 1px solid black; float: right;" title="BergerSmall.gif" src="BergerSmall.gif" alt="BergerSmall.gif" width="100" height="129" />
</a>
<p>Presentation Tables:</p>Berger Park South Lawn Renovation
<br />Loyola Sustainability Institute Student sustainability projects
<br />Edgewater Environmental Sustainability Project
<br />Monarch butterfly project at Berger Park
<br />LetsGOChicago
<br />Rogers Park Food Co-op
<br />Free Little Libraries
<p>Please RSVP at
https://nextdoor.com/events/il/chicago/earth-month-at-berger-park-sustainability-open-house-581265
</p>
</td>
</tr>
<tr>
<td style="background-color: #f8febf;">
<h2 style="text-decoration: none; font-family: 'Trebuchet MS', sans-serif; text-transform: capitalize; color: #2594aa;">
Meet the Farmers
</h2>
<p>
<strong>Date:
April 27, 2016 at 5pm - 7pm</strong>
<br />
<strong>Location:
Uncommon Ground
<br />
1401 W Devon Ave</strong>
</p>
<a href="https://d3n8a8pro7vhmx.cloudfront.net/rogersparkfoodcoop/pages/174/attachments/original/1458565305/Meet_the_Farmers.jpg?1458565305">
<img align="right" style="float: right; margin: 6px 1px; border: 1px solid black;" title="MeettheFarmers_sm.jpg" src="MeettheFarmers_sm.jpg" alt="MeettheFarmers_sm.jpg" width="100" height="155" />
</a>
<p>FREE EVENT!</p>
<p>Get some face-time with the local farmers who supply the best Chicago restaurants and Farmers Markets!</p>
<p>Learn about where your food comes from by talking to the people who grow it!</p>
<p>Get 10% off Dinner from Uncommon Ground!</p>
<p>Stay for live musicfrom 8-10 pm.</p>
<p>RSVP
here
</p>
</td>
</tr>
<tr>
<td style="background-color: #f8febf;">
<h2 style="text-decoration: none; font-family: 'Trebuchet MS', sans-serif; text-transform: capitalize; color: #2594aa;">
Farm Fresh Jams
</h2>
<p>
<strong>Date:
April 27, 2016 at 8pm - 10pm</strong>
<br />
<strong>Location:
Uncommon Ground
<br />
1401 W Devon Ave</strong>
</p>
<a href="https://d3n8a8pro7vhmx.cloudfront.net/rogersparkfoodcoop/pages/173/attachments/original/1458531431/PosterDraft.PNG?1458531431">
<img align="right" style="float: right; margin: 6px 1px; border: 1px solid black;" title="FarmFresh_sm.jpg" src="FarmFresh_sm.jpg" alt="FarmFresh_sm.jpg" width="100" />
</a>
<p>Fundraiser Concert for the Rogers Park Food Co-op</p>
<p>
<strong>Featuring performances by:</strong>
</p>
<p>Signal-to-Noise</p>
<p>Luna Blu</p>
<p>Abbie & Marlon</p>
<p>Abud: A Bard.</p>
<p>
<strong>Get 10% off Dinner from Uncommon Ground!</strong>
</p>
<p></p>
<p>RSVP
here
</p>
</td>
</tr>
<tr>
<td style="background-color: #f8febf;">
<h2 style="text-decoration: none; font-family: 'Trebuchet MS', sans-serif; text-transform: capitalize; color: #2594aa;">
Moah's Ark 4th Annual Plant Sale
</h2>
<p>
<strong>Date:May 7th and 8th</strong>
<br />
<strong>Location:Moah's ark</strong>
<br />
<strong>1839 W Touhy Ave</strong>
</p>
<a href="https://d3n8a8pro7vhmx.cloudfront.net/rogersparkfoodcoop/pages/173/attachments/original/1458531431/PosterDraft.PNG?1458531431">
<img align="right" style="float: right; margin: 6px 1px; border: 1px solid black;" title="moah.jpg" src="moah.jpg" alt="moah.jpg" width="250" height="188" />
</a>
<p>Our 4th annual plant sale will feature a big variety of heirloom tomatoes and peppers, plus herbs, flowers and more.
</p>
<p>We have several new tomatoes, including 7 varieties of dwarf heirlooms, old favorites like the cherokee purple, green and chocolate, Moah's yellow, and a couple new italian imports.</p>
<p>This is a 2 day event, Saturday and Sunday, which is Mother's Day. Mom's get a free plant.</p>
<p>RSVP to this event so that you will be notified of the full list which i will be putting up soon.</p>
<p>Happy spring!!</p>
<p>RSVP
here
</p>
</td>
</tr>
<tr>
<td>
<h2 style="color: #e37c00; font-family: 'Trebuchet MS', sans-serif; text-transform: uppercase; text-align: center;">
Click Here For Full Event Listing
</h2>
</td>
</tr>
<tr>
<td style="background-color: #f8febf;">
<h2 style="text-decoration: none; font-family: 'Trebuchet MS', sans-serif; text-transform: capitalize; color: #2594aa;">
Exclusive Offers for Co-op Owners!</h2>
<p>In our effort to provide value for our Owners, the Rogers Park Food Co-op is excited to offer the following exclusive deals for owners!</p>
<h3>$50 Discount to Natures Farm Camp</h3>
<p>To celebrate their love of Co-ops, Nature's Farm Camps has decided to offer a $50.00 discount for Natures Farm Camp registrations to the Chicago-area food cooperative members.</p>
<p>
<em>
<strong>Owners will receive a coupon code in an upcoming email.</strong>
</em>
</p>
<p>From naturesfarmcamp.com:</p>
<blockquote>We are an overnight summer camp where kids (ages 8-14) step out of their every day and immerse themselves in nature growing, foraging, cooking, making, building and exploring. Campers do with their hands, head and heart. In the process they
discover more about life and themselves, all while having a blast with new friends in the great outdoors.
</blockquote>
<hr />
<h3>Biggest Slim-Down with Hank: Help The Co-op While Getting Fit!</h3>
<p>Every few months, personal trainer Hank Rouse and his team of coaches run a Biggest Slim Down Contest. This past Holiday Season we had a Maintain Don't Gain Contest. To win cash prizes, all the contestants had to do was maintain their weight
(or even lose weight). I'm so excited to announce an Exclusive Opportunity for RPFC Co-Owners.</p>$25 will be donated to the Rogers Park Food Co-op for each participating Co-Owner who achieves the 3% Body Weight (Loss/Gain) benchmark.
<p>NEW Contest: Begins April 18th</p>
<p>Applications accepted until April 13th.</p>More Information at
http://www.facebook.com/events/495659513953786/
<br />
</td>
</tr>
</tbody>
</table>{{ broadcaster.name }}
<br />
{{ settings.site.full_url }}
</body>
</html>
Here is the HTML: https://jsfiddle.net/63v8cra7/1/
Screenshot from Thunderbird:
From Outlook:
Related
I need to select a value of a td based on another td's text in the same row. The XPath should be the same and only text will be changeable. In the following HTML, I have to select $33.00 based on Labor, $0.66 based on Finance, $33.66 based on Total, and so on.
* {margin: 0; padding: 0;}
body {font-family:"Times New Roman", "serif","Arial","tahoma"; font-size: 12px;}
.center {width: 1200px; margin: auto;}
.top-left {float: left; width: 70%; font-weight: bold;}
.top-right {float: right; width: 30%; text-align: right;}
h2 {margin: 0 0 10px; border-bottom: 1px solid #ccc; padding: 10px 0;}
.terms {margin: 15px 0 0; font-weight: normal;}
.invoice-to {margin: 15px 0 0;}
.clear {clear: both;}
.table-holder {margin: 50px 0 0; font-size: 12px;}
table {border-collapse: collapse;}
.table-holder table th {border: 1px solid #ccc; border-bottom: 2px solid #ccc; text-align: left; padding: 4px 2px;}
.table-holder table td {border: 1px solid #ccc; padding: 4px 2px;}
.table-holder table td p {padding: 4px 2px;}
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<title>Invoice :: 6</title>
</head>
<body style="">
<div class="center" id="wrapper">
<h2>INVOICE</h2>
<div class="table-holder">
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="tbl" style="font-size: 9px;">
<tbody><tr>
<th>Invoice ID</th>
<th>Fund</th>
<th>Work ID</th>
<th>Provider ID</th>
<th>Provider Name</th>
<th>Provider Location</th>
<th>Client</th>
<th>Project</th>
<th>Manager</th>
<th>Service Title</th>
<th>Location Name</th>
<th>Street</th>
<th>City</th>
<th>State</th>
<th>ZIP</th>
<th>Service Date</th>
<th>Completed Date</th>
<th>Approved Date</th>
<th>Total Hours</th>
<th>WO Subtotal</th>
<th>OAI Fee</th>
<th>Service Fee</th>
<th>International Fee</th>
<th>General Liability Liaison Fee</th>
<th>High Value Supply Fee</th>
<th>State Taxes Fee</th>
<th>Total Payment</th>
</tr>
<tr>
<td>6</td>
<td>ID# 20</td>
<td>WO177</td>
<td>695</td>
<td>Constantin Jenkins</td>
<td>CHAMPLIN, MN</td>
<td></td>
<td></td>
<td>Gideon Keebler</td>
<td>Basic Work Order</td>
<td></td>
<td>938 Randolph Avenue </td>
<td>Saint Paul</td>
<td>MN</td>
<td>55102</td>
<td>09/09/2020 8:00AM</td>
<td>09/09/2020 10:56PM</td>
<td>09/09/2020 10:56PM</td>
<td>0.00</td>
<td>$30.00</td>
<td>$0.00</td>
<td>$1.50</td>
<td>$0.00</td>
<td>$1.50</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$33.00</td>
</tr>
<tr>
<td colspan="27" style="background: #ccc; padding: 1px;"></td>
</tr>
<tr>
<td colspan="25" style="border: none;"></td>
<td style="border: none;">
<p>Labor</p>
<p>Finance(2.00%)</p>
<p><strong>Total</strong></p>
</td>
<td style="border: none;" align="right">
<p>$33.00</p>
<p>$0.66</p>
<p><strong>$33.66</strong></p>
</td>
</tr>
</tbody></table>
</div>
</div>
</body>
</html>
Help me please someone
Try this one to get required output:
//td[p="Total"]/following-sibling::td/p[count(//p[.="Total"]/preceding-sibling::p) + 1]
I've just modified #JaSON 's answer and now it's working fine
//td[contains(., "Finance")]/following-sibling::td/p[count(//p[contains(., "Finance")]/preceding-sibling::p) + 1]
I'm using Laravel version 5.7.20 to build a custom markdown template. The template is copied from /resources/views/vendor/notifications/email.blade.php
which is generated after issuing the command php artisan vendor:publish --tag=laravel-notifications.
The following works which displays HTML:
return (new MailMessage)
->line(new HtmlString('The <strong>introduction</strong> to the notification.'))
->line('The <strong>introduction</strong> to the notification.')
->line(new HtmlString('Due Date: <strong>' . Carbon::parse($this->info->created_at)->format('Y-m-d H:i') . '</strong>'))
->line('Due Date: <strong>' . Carbon::parse($this->info->created_at)->format('Y-m-d H:i') . '</strong>')
->action('Notification Action', url('/'));
This is not working. Which is using my own markdown
return (new MailMessage)
->line(new HtmlString('The <strong>introduction</strong> to the notification.'))
->line('The <strong>introduction</strong> to the notification.')
->line(new HtmlString('Due Date: <strong>' . Carbon::parse($this->info->created_at)->format('Y-m-d H:i').'</strong>'))
->line('Due Date: <strong>' . Carbon::parse($this->info->created_at)->format('Y-m-d H:i').'</strong>')
->action('Notification Action', url('/'))
->markdown('mail.notification.permission');
my mail.notification.permission file is copy exactly from laravel-project/resources/views/vendor/notifications/email.blade.php
I think I need view not a markdown. But I change ->view('mail.notification.permission'); I got error No hint path defined for [mail]. (View: /Users/shiro/Sites/laravel-project/resources/views/mail/notification/permission.blade.php)
which file I should copy in order for me using html, not the markup format.
I haven't see any solution in notification use ->view instead of ->markdown. Or what is the correct flow to display html in notification email?
OK, I found out the error.
If want to use ->view(), the blade template can't use #component('mail::message'), it have to build with fresh blade layout (Build you own view like normal page). Then you will not get No hint path defined for [mail] error.
Laravel Notification Mark Up a lot to learn their syntax and their eco system. It is great for those who want a simple notification. But if you want custom page, I would suggest to use view().
I share my layout blade file which I copy after I send out from mark down. The content part you have your own logic.
public function toMail($notifiable)
{
return (new MailMessage)
->subject('New Invoice')
->view( 'mail.notification.custom_invoice', ['invoice' => $this->invoice]);
{
email_layout.blade.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; background-color: #f5f8fa; color: #74787E; height: 100%; hyphens: auto; line-height: 1.4; margin: 0; -moz-hyphens: auto; -ms-word-break: break-all; width: 100% !important; -webkit-hyphens: auto; -webkit-text-size-adjust: none; word-break: break-word;">
<style>
#media only screen and (max-width: 600px) {
.inner-body {
width: 100% !important;
}
.footer {
width: 100% !important;
}
}
#media only screen and (max-width: 500px) {
.button {
width: 100% !important;
}
}
</style>
<table class="wrapper" width="100%" cellpadding="0" cellspacing="0" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; background-color: #f5f8fa; margin: 0; padding: 0; width: 100%; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 100%;">
<tr>
<td align="center" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box;">
<table class="content" width="100%" cellpadding="0" cellspacing="0" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; margin: 0; padding: 0; width: 100%; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 100%;">
<tr>
<td class="header" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; padding: 25px 0; text-align: center;">
<a href="{{ url('/') }}" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; color: #bbbfc3; font-size: 19px; font-weight: bold; text-decoration: none; text-shadow: 0 1px 0 white;">
{{ config('app.name', 'Laravel') }}
</a>
</td>
</tr>
<!-- Email Body -->
<tr>
<td class="body" width="100%" cellpadding="0" cellspacing="0" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; background-color: #FFFFFF; border-bottom: 1px solid #EDEFF2; border-top: 1px solid #EDEFF2; margin: 0; padding: 0; width: 100%; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 100%;">
<table class="inner-body" align="center" width="570" cellpadding="0" cellspacing="0" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; background-color: #FFFFFF; margin: 0 auto; padding: 0; width: 570px; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 570px;">
<!-- Body content -->
<tr>
<td class="content-cell" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; padding: 35px;">
#yield('content')
<p style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; color: #74787E; font-size: 16px; line-height: 1.5em; margin-top: 0; text-align: left;">Regards,<br>{{ config('app.name', 'Laravel') }}</p>
#yield('subcopy')
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box;">
<table class="footer" align="center" width="570" cellpadding="0" cellspacing="0" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; margin: 0 auto; padding: 0; text-align: center; width: 570px; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 570px;">
<tr>
<td class="content-cell" align="center" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; padding: 35px;">
<p style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; line-height: 1.5em; margin-top: 0; color: #AEAEAE; font-size: 12px; text-align: center;">© {{ date('Y') }} {{ config('app.name', 'Laravel') }}. All rights reserved.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I'm struggling with a problem in the Outlook 365 client, that I hope you can help me with.
I have a very simple table setup with some space in top, and 365 thinks it should insert white lines in top and bottom:
https://www.screencast.com/t/mWFj57wIGx
Here is the complete code example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Email Framework Version 1.0.1</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no">
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<style type="text/css">
.ReadMsgBody {
width: 100%;
background-color: #F6F6F6;
}
.ExternalClass {
width: 100%;
background-color: #F6F6F6;
}
body {
width: 100%;
background-color: #f6f6f6;
margin: 0;
-webkit-font-smoothing: antialiased;
font-family: Arial, Times, serif
}
h1,
h2,
h3,
p,
td {
line-height: normal !important;
}
table {
border-collapse: collapse !important;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
#media only screen and (max-width: 639px) {
.wrapper {
width: 100%;
padding: 0 !important;
}
}
#media only screen and (max-width: 480px) {
.centerClass {
margin: 0 auto !important;
}
.imgClass {
width: 100% !important;
height: auto;
}
.wrapper {
width: 320px !important;
padding: 0 !important;
}
.header {
width: 320px !important;
padding: 0 !important;
background-image: url(http://dummyimage.com/320x400/fff/fff) !important;
}
.container {
width: 300px !important;
padding: 0 !important;
}
.mobile {
width: 300px !important;
display: block !important;
padding: 0 !important;
text-align: center !important;
}
.mobile25 {
width: 150px !important;
padding: 0 !important;
text-align: center;
display: inline-table;
}
.mobile50 {
width: 300px !important;
padding: 0 !important;
text-align: center;
}
.mobileOff {
width: 0px !important;
display: none !important;
}
}
</style>
</head>
<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" style="background-color:#F6F6F6; font-family:Arial,serif; margin:0; padding:0; min-width: 100%; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;">
<!-- Start Background -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#F6F6F6">
<tr>
<td width="100%" valign="top" align="center">
<!-- Start TEST -->
<table width="760" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#111111">
<tr>
<td height="20" style="font-size:20px; line-height:20px;"> </td>
<!-- Spacer -->
</tr>
<tr>
<td align="center">
<!-- Start Container -->
<table width="720" cellpadding="0" cellspacing="0" border="0" class="container">
<tr>
<td width="360" class="mobile" style="font-family:arial; font-size:12px; color:#fff; line-height:18px; margin:0;" align="center">
Menu 1
</td>
<td width="360" class="mobile" style="font-family:arial; font-size:12px; color:#fff; line-height:18px; margin:0;" align="center">
Menu 2
</td>
</tr>
</table>
<!-- End Container -->
</td>
</tr>
<tr>
<td height="20" style="font-size:20px; line-height:20px;"> </td>
<!-- Spacer -->
</tr>
</table>
<!-- End TEST -->
<!-- Start Content -->
<table width="760" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#ffffff">
<tr>
<td height="10" style="font-size:10px; line-height:10px;"> </td>
<!-- Spacer -->
</tr>
<tr>
<td align="center">
<!-- Start Container -->
<table width="720" cellpadding="0" cellspacing="0" border="0" class="container">
<tr>
<td width="720" class="mobile" style="font-family:arial; font-size:12px; line-height:18px; margin:0;">
{content}
</td>
</tr>
</table>
<!-- End Container -->
</td>
</tr>
<tr>
<td height="10" style="font-size:10px; line-height:10px;"> </td>
<!-- Spacer -->
</tr>
</table>
<!-- End Content -->
</td>
</tr>
</table>
<!-- End Background -->
</body>
</html>
Does anyone know what I can do to remove these white lines?
I have bad news, the current thinking is that there is no way to fix this issue with Outlook.
Outlook 2007/2010/2013/2016 Windows 10 Mail and maybe every Office client (I could not test in 365) adds space to the body of the email message. It will add a 15px space to the top and bottom of an email and 10px spacing to the left and right sides.
This is the drawback to HTML Email. Since there are no standards, each email client has a different set of standards they support or quirks they add.
Don't take my post as discouragement, see it as the rest of us simply have not found a solution. Maybe you will discover a solution to this problem. In most clients, there will be no gap.
Good Luck.
Also, thank you for posting your code snippet. It allows people to easily test your code to see if we can find some solution, if available.
Responsive Email Template doesn't show buttons and footer isn't aligned properly on outlook web. Attached is the code and screen shot of the result in outlook web and the desired output as displayed in gmail web. I need help in fixing it for outlook.
<!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" />
<!-- For development, pass document through inliner -->
<!--<link rel="stylesheet" href="css/simple.css" />-->
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 100%;
font-family: 'Avenir Next', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
line-height: 1.65; }
img {
max-width: 100%;
margin: 0 auto;
display: block; }
body,
.body-wrap {
width: 100% !important;
height: 100%;
background: #efefef;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none; }
a {
color: #f08414;
text-decoration: none; }
.text-center {
text-align: center; }
.text-right {
text-align: right; }
.text-left {
text-align: left; }
.button {
display: inline-block;
color: white;
background: #f6c095;
border: solid #f6c095;
border-width: 10px 20px 8px;
/*font-weight: bold;*/
border-radius: 4px; }
h1, h2, h3, h4, h5, h6 {
margin-bottom: 20px;
line-height: 1.25; }
h1 {
font-size: 25px; }
h2 {
font-size: 28px; }
h3 {
font-size: 24px; }
h4 {
font-size: 18px; }
h5 {
font-size: 16px; }
p, ul, ol {
font-size: 16px;
font-weight: normal;
margin-bottom: 20px; }
.container {
display: block !important;
clear: both !important;
margin: 0 auto !important;
max-width: 580px !important; }
.container table {
width: 100% !important;
border-collapse: collapse; }
.container .masthead {
padding: 80px 0;
background: #3d4a7c;
color: white; }
.container .masthead h1 {
margin: 0 auto !important;
max-width: 90%;
/*text-transform: uppercase;*/ }
.container .content {
background: white;
padding: 30px 35px; }
.container .content.footer {
background: none; }
.container .content.footer p {
margin-bottom: 0;
color: #888;
text-align: center;
font-size: 14px; }
.container .content.footer a {
color: #888;
text-decoration: none;
font-weight: bold; }
#contactmanager {
display: inline-block;
color: white;
background: #3d4a7c;
border: solid #3d4a7c;
border-width: 10px 20px 8px;
border-radius: 4px;
}
</style>
</head>
<body>
<table class="body-wrap">
<tr>
<td class="container">
<!-- Message start -->
<br />
<table>
<tr>
<td align="center">
<img alt="accesbank-logo" src="images/accessbank.png"/>
</td>
</tr>
</table>
<br/>
</td>
</tr>
<tr>
<td class="container">
<!-- Message start -->
<table>
<tr>
<td align="center" class="masthead">
<h1>High Account Balance</h1>
</td>
</tr>
<tr>
<td class="content">
<h4>Dear Emmanuel Onyeje</h4>
<p>Access Bank Checking Account has a high balance of #X. Consider investing this in a higher yielding account such as a fixed/call deposit </p>
<p><em>– Bank Team</em>
</p>
<table>
<tr>
<td align="center">
<p>
Contact Account Manager
Ignore Advice
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="container">
<!-- Message start -->
<table>
<tr>
<td class="content footer" align="center">
<p>Copyright © 2016 Access Bank,Powered by Molib
</p>
<p>If you do not want to recieve emails from us, you can | Unsubscribe
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Sounds like you need bulletproof email buttons! It's possible to get buttons like this email, but it requires more code than it would on the web / email clients with decent box model support:
<td align="center">
<!-- Button 1 : Begin -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto; display: inline-block;">
<tr>
<td style="border-radius: 4px; background: #f6c095; text-align: center;">
<a href="http://www.google.com" style="background: #f6c095; border: 10px 20px 8px 20px; solid #f6c095; font-family: sans-serif; font-size: 13px; line-height: 13px; text-align: center; text-decoration: none; color: #ffffff; display: block; border-radius: 4px;"">
Contact Account Manager
</a>
</td>
</tr>
</table>
<!-- Button 1 : END -->
<!-- Button 2 : Begin -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto; display: inline-block;">
<tr>
<td style="border-radius: 4px; background: #3d4a7c; text-align: center;">
<a href="http://www.google.com" style="background: #3d4a7c; border: 10px 20px 8px 20px; solid #3d4a7c; font-family: sans-serif; font-size: 13px; line-height: 13px; text-align: center; text-decoration: none; color: #ffffff; display: block; border-radius: 4px;"">
Ignore Advice
</a>
</td>
</tr>
</table>
<!-- Button 2 : END -->
</td>
This is one of a few similar techniques, outlined on Litmus.
For this, i use a table :
<table cellpadding="0" cellspacing="0" border="0" width="150" bgcolor="#000000" class="cta-black" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; border-collapse: collapse; mso-padding-alt: 0pt 0pt 0pt 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid black; background: #000000;">
<tbody>
<tr>
<td class="separator" height="10" style="margin: 0; font-family: Arial; -webkit-text-size-adjust: none; color: #575757; clear: both; float: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 5px !important; line-height: 5px !important;"> </td>
</tr>
<tr>
<td align="center" mc:edit="selection-1-cta" style="margin: 0; font-family: Arial; -webkit-text-size-adjust: none; color: #575757; clear: both; float: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;">VOIR LE PRODUIT</td>
</tr>
<tr>
<td class="separator" height="10" style="margin: 0; font-family: Arial; -webkit-text-size-adjust: none; color: #575757; clear: both; float: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 5px !important; line-height: 5px !important;"> </td>
</tr>
</tbody>
</table>
After reading many articles, I can't seem to find an answer as to why my images have no margin on the right side and my table paragraph text gets cut off on the right side. The paragraph text is fine on my other pages, just in the table it gets cut off.
This is all using css3 media queries responsive design. This happened to another site I built for a client. Any insight would be greatly appreciated!
Thanks!
Here is my css media query for the phone screen:
#charset "utf-8";
#import url("phone.css") only screen and (max-width:320px);
container {
width: 100%;
height: 100%;
}
#header img {
position: relative;
height: auto;
width: auto;
max-height:100%;
max-width:100%;
min-height:100%;
min-width:100%;
overflow:hidden;
}
#navigation {
font-size:large;
height: auto;
width:100%;
float:none;
overflow:hidden;
}
#menu {
float:none;
margin:0px;
display:none;
width:100%;
position:relative;
list-style-type:none;
}
.nav-btn {
width:100%;
background-color:#09F;
text-align:center;
box-sizing:border-box;
padding:15px 10px;
font-weight:bold;
font-size:large;
text-align:center;
cursor:pointer;
display:block;
height:100%;
}
.nav-btn:after {
content:url(images/mobilemenu.png);
}
#menu li {
width:100%;
font-size:large;
font-weight:bold;
background-color:#09F;
display:block;
margin:0px;
border:#000 medium solid;
float:none;
overflow:hidden;
text-align:center;
}
#menu img {
margin:0px;
padding:0px;
width:90px;
height:90px;
position:relative;
}
#navigation ul li {
margin:0px;
width:100%;
position:relative;
float:none;
overflow:hidden;
}
#menu li a {
width:100%;
display:block;
}
#content {
width:100%;
height:100%;
}
.socialmedia {
width:30px;
height:30px;
max-width:30px;
max-height:30px;
}
.bigfoot {
width:50px;
height:50px;
max-width:200px;
max-height:200px;
}
#content img {
height:auto;
width:100%;
position:relative;
overflow:hidden;
margin:5px;
}
#content table, tbody, th, td, tr {
display:block;
}
#content table {
border-collapse: collapse;
width: 100%;
height: auto;
padding: 10px;
position: relative;
min-width:320px;
}
#content td p {
position: relative;
margin: auto;
text-align: center;
padding: 5px;
min-width: 100%;
min-height: 100%;
}
#content tr {
position:relative;
width:100%;
height:auto;
overflow:hidden;
}
#content td {
position:relative;
width:100%;
height:auto;
min-width:100%;
min-height:100%;
overflow:hidden;
}
#content tr td img {
width:100%;
height:auto;
max-height:250px;
max-width:250px;
}
#footer {
width:100%;
height:100%;
}
And my html for the page:
<div style="background-image:url(images/beer%20content%20background2.jpg)" id="content">
<h1 align="center">Our Beers</h1>
<p>
<table class="beers" align="center" width="550" border="0" cellspacing="5" cellpadding="5">
<tr>
<td>
<img src="images/Alberts_Web.png" alt="albert's ale" width="350"/>
<p>Albert's Ale is a German inspired beer with a crisp malt base, and 2 varieties of hops. This pale ale is hoppy, and a real refreshing thirst quencher. Enjoy year round! <br />6% Alcohol.</p>
</td>
<td>
<img src="images/Hieroglyph_Web.png" alt="Hieroglyph"width="350"/>
<p> Hieroglyph is a double IPA. 8% Alcohol.</p>
</td>
</tr>
<tr>
<td>
<img src="images/Trapezeious_Web.png" alt="Trapezious" width="350"/>
</td>
<td>
<img src="images/Sifu_Web.png" alt="Sifu" width="350"/>
</td>
</tr>
</table>
<h2 align="center">Occasional & Seasonal brews</h2>
<table class="beers" align="center" width="550" border="0" cellspacing="5" cellpadding="5">
<tr>
<td>
<img src="images/Krock'd_Web.png" alt="Krock'd" width="350"/>
</td>
<td>
<img src="images/Viking_Web.png" alt="I Wish I was a Viking" width="350"/>
</td>
</tr>
<tr>
<td>
<img src="images/Fat Bobby_Web.png" alt="Fat Bobby" width="350"/>
</td>
<td> </td>
</tr>
</table>
</p>
<br />
<p align="center">Check out our upcoming events where we will be sampling our beer!</p>
<p align="center">Cheers!</p>
</div>
<!-- InstanceEndEditable -->
</div>
</body>
<!-- InstanceEnd --></html>
A quick note, I did apply the viewport meta tag on all of my pages to initial scale 1.0.
First of all: There are no media queries in the code you posted...
Apart from that: Although in the CSS you define the width for your tables as 100%, you have inline settings that give the tables 550px width:
<table class="beers" align="center" width="550" border="0" cellspacing="5" cellpadding="5">
I suppose that's the reason for them not fitting on a mobile screen. Erase all that inline stuff that interferes with the CSS.
Similarly with images...