I create mail template in my job.
I remember that Gmail started support css styles in 'head' tag. (spec.: https://developers.google.com/gmail/design/css)
I tried it and was disappointed. My letter is big because has a lot of data and Gmail cut off it and shown link for see full letter ([Message clipped] View entire message). My css style was applied to markup. But when I look at full letter by link I do not see styles - they are not applied.
Screenshot of problem
I need help. I think it's bug.
<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no"/>
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">
/*
====================================================
== [START] == Reset styles
====================================================
*/
#email_body {
margin: 0;
padding: 0;
width: 100% !important;
height: 100% !important;
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;
background-color: #fff;
font-family: Arial, Helvetica, sans-serif;
color: #333;
line-height: 120%;
}
#email_body table, #email_body td, #email_body div, #email_body p, #email_body a {
text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
#email_body table {
border-collapse: collapse;
border-spacing: 0;
}
#email_body table, #email_body td {
margin: 0;
padding: 0;
}
#email_body img {
border: 0;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
#email_body p {
margin: 0;
}
#email_body strong, #email_body b {
font-weight: 700;
font-style: inherit;
}
#email_body i, #email_body em {
font-style: italic;
font-weight: inherit;
}
#email_body #outlook a {
padding: 0;
}
#email_body .ReadMsgBody, #email_body .ExternalClass {
width: 100%;
}
#email_body .ExternalClass, #email_body .ExternalClass p, #email_body .ExternalClass span, #email_body .ExternalClass font, #email_body .ExternalClass td, #email_body .ExternalClass div {
line-height: 100%;
}
/*
====================================================
== [START] == Hot Rules
====================================================
*/
#email_body .pb-5{padding-top: 5px !important;}
#email_body .pb-10{padding-top: 10px !important;}
#email_body .pt-10{padding-top: 10px !important;}
#email_body .fs-12{font-size:12px !important;}
#email_body .fs-16{font-size:16px !important;}
#email_body .fw-n{font-weight: 400 !important;}
#email_body .fw-b{font-weight: 700 !important;}
#email_body .wo-u{text-decoration: none !important;}
#email_body .t-regular{color:#333 !important;}
#email_body .t-additional{color: #999 !important;}
#email_body .t-red{color: #cc373c !important;}
/*Gmail anti-munged*/
.content_wrap table.anti-munged {
width: 100% !important;
}
/*
====================================================
== [START] == Skeleton
====================================================
*/
#email_body .content_wrap {
background-color: #fff;
color: #333;
font-family: Arial, Helvetica, sans-serif;
-webkit-text-size-adjust: none;
font-size: 14px;
line-height: 120%;
}
#email_body .content_wrap table,
#email_body .content_table {
font-family: Arial, Helvetica, sans-serif;
}
/*
====================================================
== [START] == Line Data Table
====================================================
*/
#email_body .blueHeader {
font-size: 16px;
color:#37809f;
font-weight: 700;
}
#email_body .lineDataTable {
border-bottom: 1px solid #ccc;
}
#email_body .lineDataTable.ldt-7-11 td {
padding: 7px 0 11px 10px;
}
#email_body .lineDataTable tr > td:first-child {
padding-left: 0;
}
#email_body .lineDataTable td {
border-top: 1px solid #ccc;
}
</style>
</head>
<body id="email_body">
<table class="content_wrap" align="left" valign="top" border="0" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td align="center" valign="top" style="padding:20px 0;">
<table class="content_table" align="center" valign="top" border="0" cellpadding="0" cellspacing="0" width="100%" style="width: 100%;max-width:600px;" id="contentTable">
<tr class="applyExtraSpaceBefore">
<td align="left" valign="top" class="blueHeader pb-5 pt-10">
Top Movers
</td>
</tr>
<tr class="extraSpaceAfter-30">
<td align="left" valign="top" class="pb-10 fs-16">
<table align="left" valign="top" border="0" cellpadding="0" cellspacing="0" width="100%" style="width:100%;" class="lineDataTable ldt-7-11 anti-munged">
<tr>
<td align="left" valign="top">
Stas (9123)
</td>
<td align="left" valign="top" width="155" style="width:155px;">
<a href="#" target="_blank" class="wo-u fw-b t-red">100<br><span class="fs-12 fw-b t-additional">09/02/2017</span>
</a>
</td>
<td align="right" valign="top" width="70" style="width:70px;">
<a href="#" target="_blank" class="wo-u t-regular fw-b">
+900%<br><span class="fs-12 fw-n">Prior Value</span>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
For achieve situation when Gmail is clipping mail - you can add into template any data (for example this big data table) http://img.mtrc.in/mkBi
Its not a bug, its a feature (sort of) that Gmail had introduced some time ago. Any email sent to Gmail if its above 102kb in size the clipping will occur. Since your emails are clipping the email size must be above 102kb. Try any of the following:
Minify your CSS. Remove all unwanted spaces and lines breaks (just dont break the code)
Remove all classes not being used
Remove comments (if you are the only one using the template)
Reduce the number of tables as much as possible. if it can be done using 2 tables dont use more than 2.
You can read more about it here. if you had posted your code in someone would have given you pointers in fixing things.
Hope that is the answer you were looking for.
Related
I have created a table with rows in html and defined it's width and height parameters in css using pixel(px).
I'm using a 15.6" display pc to run it and everything goes well, but when i open the page in smaller screen pc, the table exceeds the screen margin.
Which unit should I use to define the width & height parameters so that, it will always fit the display of any media screen that opens the page?
I always use Width: 1-100vw and height: 1-100vh; on everything (<p>,<div>,font-size etc.)
You will also need to add in min-height: 100vh; and min-width: 100vw; to the html,body css. else it won't work.
This WILL ensure that it works properly. I used to use %, but in the end it didn't work out with scaling to the re-size ^^
See this for more info: https://css-tricks.com/viewport-sized-typography/
You could set the width of the body to 100%. Another suggestion is to use
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
can read about it here
Further read into responsive web design might help you in the future.
Ex:
#import "https://fonts.googleapis.com/css?family=Montserrat:300,400,700";
.rwd-table {
margin: 1em 0;
min-width: 300px;
}
.rwd-table tr {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.rwd-table th {
display: none;
}
.rwd-table td {
display: block;
}
.rwd-table td:first-child {
padding-top: .5em;
}
.rwd-table td:last-child {
padding-bottom: .5em;
}
.rwd-table td:before {
content: attr(data-th) ": ";
font-weight: bold;
width: 6.5em;
display: inline-block;
}
#media (min-width: 480px) {
.rwd-table td:before {
display: none;
}
}
.rwd-table th, .rwd-table td {
text-align: left;
}
#media (min-width: 480px) {
.rwd-table th, .rwd-table td {
display: table-cell;
padding: .25em .5em;
}
.rwd-table th:first-child, .rwd-table td:first-child {
padding-left: 0;
}
.rwd-table th:last-child, .rwd-table td:last-child {
padding-right: 0;
}
}
body {
padding: 0 2em;
font-family: Montserrat, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: #444;
background: #eee;
}
h1 {
font-weight: normal;
letter-spacing: -1px;
color: #34495E;
}
.rwd-table {
background: #34495E;
color: #fff;
border-radius: .4em;
overflow: hidden;
}
.rwd-table tr {
border-color: #46637f;
}
.rwd-table th, .rwd-table td {
margin: .5em 1em;
}
#media (min-width: 480px) {
.rwd-table th, .rwd-table td {
padding: 1em !important;
}
}
.rwd-table th, .rwd-table td:before {
color: #dd5;
}
<h1>RWD List to Table</h1>
<table class="rwd-table">
<tr>
<th>Movie Title</th>
<th>Genre</th>
<th>Year</th>
<th>Gross</th>
</tr>
<tr>
<td data-th="Movie Title">Star Wars</td>
<td data-th="Genre">Adventure, Sci-fi</td>
<td data-th="Year">1977</td>
<td data-th="Gross">$460,935,665</td>
</tr>
<tr>
<td data-th="Movie Title">Howard The Duck</td>
<td data-th="Genre">"Comedy"</td>
<td data-th="Year">1986</td>
<td data-th="Gross">$16,295,774</td>
</tr>
<tr>
<td data-th="Movie Title">American Graffiti</td>
<td data-th="Genre">Comedy, Drama</td>
<td data-th="Year">1973</td>
<td data-th="Gross">$115,000,000</td>
</tr>
</table>
<p>← Drag window (in editor or full page view) to see the effect. →</p>
Ref: LINK
The style settings i'm making for my table in my CSS file do not work in the html that i made
CSS:
body {
background-color: #ccffff;
}
h1 {
font-family: verdana;
}
h2 {
font-family: verdana;
}
h3 {
font-family: verdana;
}
h4 {
color: red;
font-family: verdana;
border: 3px solid black;
padding: 15px;
margin: 10px;
}
table {
width: 100%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
p {
font-family: verdana
}
#p01 {
color: blue;
font-size: 200%;
}
p.error {
color: red;
}
HTML:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>My second HTML</title>
<link rel="stylesheet" href="css/mijn_eerste_css.css">
</head>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jan</td>
<td>Jansens</td>
<td>20</td>
</tr>
<tr>
<td>Kees</td>
<td>Pieters</td>
<td>21</td>
</tr>
</table>
When I put the exact same style settings in the HTML file like so:
<style>
table {
width: 100%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
It works just fine.
Why doesn't this work when it's in the CSS and what do I have to do to fix it?
(The CSS is linked properly, all the other style settings work just fine.)
I tried and it works just fine for me. it shows border also correctly.
<link rel="stylesheet" href="css/mijn_eerste_css.css">.
I am not seeing any issue.
I am working on my first Laravel 5 project and desperately need a way to inline CSS from my email views. I am using Mailgun because of delivery issues with Mandrill (unfortunately, Mandrill has CSS inline capability baked in but Mailgun does not).
It appears that most packages out there for inlining CSS on emails for Laravel are out of date, most stopped working correctly on version 4.2. I have tried:
Inlining CSS when sending an email with Mailgun in Laravel - Antoine Augusti - does not seem to do anything, emails are not inlined. It appears that there are several fundamental differences in L5 that break this approach
fedeisas/laravel-mail-css-inliner - Does not work. Someone posted some code at the end of this Issue but I cannot figure out how to implement it (also do not know if it was intended for Laravel 5).
bweston92/laravel-inline-css-mailer - Looks promising but does not seem to do anything, CSS is not being inlined.
Does anyone have any recommendations? I would really like to be able to inline CSS for email, especially when I'm injecting HTML prior to sending (from WYSIWYG editor).
Inspired by bweston92/laravel-inline-css-mailer, which I could not get to work, I came up with this little class using the TijsVerkoyen\CssToInlineStyles package. Please feel free to offer suggestions or point me in a better direction, just needed something quickly.
<?php namespace App\Library;
use TijsVerkoyen\CssToInlineStyles\CssToInlineStyles;
/**
* Class inlineEmail
*
* Returns rendered Email view with inlined CSS
* #package App\Library
*/
class inlineEmail {
/**
* Filename of the view to render
* #var string
*/
private $view;
/**
* Data - passed to view
* #var array
*/
private $data;
/**
* #param string $view Filename/path of view to render
* #param array $data Data of email
*/
public function __construct($view, array $data)
{
// Render the email view
$emailView = view($view, $data)->render();
$this->view = $emailView;
$this->data = $data;
}
/**
* Convert to inlined CSS
*
* #return string
* #throws \TijsVerkoyen\CssToInlineStyles\Exception
*/
public function convert()
{
$converter = new CssToInlineStyles();
$converter->setUseInlineStylesBlock();
$converter->setCleanup();
$converter->setStripOriginalStyleTags();
$converter->setHTML($this->view);
$content = $converter->convert();
return $content;
}
}
Use:
$data = ['someVar' => 'someValue'];
$inlineEmail = new inlineEmail('emails.group-email', $data);
$content = $inlineEmail->convert();
Mail::queue('emails.raw', ['content' => $content], function($message) use ($data) {
$message->subject('Hello World')
->to('support#somewhere.org')
->bcc($data['recipients']);
});
The converted, inlined HTML/CSS is then passed to emails.raw, which contains only {!! $content !!}.
Here is the template I use for the majority of my emails - it is essentially a minimal version of Bootstrap for email. I'd give credit to its author but having trouble tracking down exactly where I found it, if someone knows please leave a comment. There are many other templates out there, just search for Bootstrap Email Template or HTML Email Boilerplate.
<!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" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Email Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 1.6;
}
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
width: 100%!important;
height: 100%;
}
a {
color: #348eda;
}
.btn-primary {
text-decoration: none;
color: #FFF;
background-color: #348eda;
border: solid #348eda;
border-width: 10px 20px;
line-height: 2;
font-weight: bold;
margin-right: 10px;
text-align: center;
cursor: pointer;
display: inline-block;
border-radius: 25px;
}
.btn-secondary {
text-decoration: none;
color: #FFF;
background-color: #aaa;
border: solid #aaa;
border-width: 10px 20px;
line-height: 2;
font-weight: bold;
margin-right: 10px;
text-align: center;
cursor: pointer;
display: inline-block;
border-radius: 25px;
}
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.padding {
padding: 10px 0;
}
table.body-wrap {
width: 100%;
padding: 20px;
}
table.body-wrap .container {
border: 1px solid #f0f0f0;
}
table.footer-wrap {
width: 100%;
clear: both!important;
}
.footer-wrap .container p {
font-size: 12px;
color: #666;
}
table.footer-wrap a {
color: #999;
}
h1, h2, h3 {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
line-height: 1.1;
margin-bottom: 15px;
color: #000;
margin: 40px 0 10px;
line-height: 1.2;
font-weight: 200;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}
p, ul, ol {
margin-bottom: 10px;
font-weight: normal;
font-size: 14px;
}
ul li, ol li {
margin-left: 5px;
list-style-position: inside;
}
.container {
display: block!important;
max-width: 600px!important;
margin: 0 auto!important; /* makes it centered */
clear: both!important;
}
.body-wrap .container {
padding: 20px;
}
.content {
max-width: 600px;
margin: 0 auto;
display: block;
}
.content table {
width: 100%;
}
</style>
</head>
<body bgcolor="#f6f6f6">
<!-- Main Body -->
<table class="body-wrap">
<tr>
<td></td>
<td class="container" bgcolor="#FFFFFF">
<div class="content">
<table>
<tr>
<td align="center">
<img src="https://example.com/images/logo.png" alt="Company Logo"/>
</td>
</tr>
<!-- Email content goes here .. -->
#yield('content')
</table>
</div>
</td>
<td></td>
</tr>
</table>
<!-- /Main Body -->
<!-- Footer -->
<table class="footer-wrap">
<tr>
<td></td>
<td class="container">
<div class="content">
<table>
<tr>
<td align="center">
<p>Footer goes here</p>
</td>
</tr>
</table>
</div>
</td>
<td></td>
</tr>
</table>
<!-- /Footer -->
</body>
</html>
A typical email that extends this view would look something like this:
#extends('emails.template')
#section('content')
<tr>
<td>
<h1>Example Email</h1>
<p>This is an example email. There are many like it but this one is mine.</p>
</td>
</tr>
<tr>
<td align="center">
<p>
This is a Button
</p>
</td>
</tr>
#endsection
I'm designing an HTML email template, which forces me to use tables. In the code below, I'm having trouble (1) removing the spacing below the placeholder image and (2) removing the space between the image and the caption. Here's a screenshot of how it looks in Chrome 15 on OS X 10.6.8.:
<!DOCTYPE HTML>
<html>
<head>
<title>Email Template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<table style="border: 1px solid #b50b32; margin: 30px auto; width: 600px; padding: 0; border-spacing: none;" cellspacing="0" cellpadding="0">
<tr>
<td id="main" style="background-color: #f2f2f2;">
<h2 style="color: #b50b32; font-family: 'Lucida Grande', Arial, sans-serif; font-size: 22px; font-weight: normal; padding: 15px; margin: 25px 0; background-color: #fff;">Major headline goes here</h2>
<table class="main-story-image" style="float: left; width: 180px; margin: 0 25px 25px 25px;">
<tr><td style="padding: 0; border: 1px solid red;"><img src="placeholder.jpg" width="180" height="130" style="border: none; margin: 0; padding: 0;" alt="Placeholder" /></td></tr>
<tr><td style="padding: 0; border: 1px solid red;"><p class="image-caption" style="background-color: #bebebe; color: #333; font-family: 'Lucida Grande', Arial, sans-serif; margin: 0; padding: 5px;">Caption.</p></td></tr>
</table><!--/.main-story-image-->
<p style="margin: 0 50px 25px 25px;">Lorem ipsum dolor sit amet.</p>
<p>Click here to read more </p>
<div style="clear: both;"></div>
</td><!--/#main-->
</tr>
</table>
</body>
</html>
The red borders are there only to show the outlines of the cells. I don't want them there in the final version.
Add border-collapse: collapse into the style attribute value of the inner table element. You could alternatively add the attribute cellspacing=0 there, but then you would have a double border between the cells.
I.e.:
<table class="main-story-image" style="float: left; width: 180px; margin: 0 25px 25px 25px; border-collapse: collapse">
It looks like the DOCTYPE is causing the image to display as an inline element. If I add display: block to the image, problem solved.
I had a similar problem. This helps me across main email clients.
Add:
attributes cellpadding="0", cellspacing="0" and border="0" to tables
style border-collapse: collapse; to tables
styles padding: 0; margin: 0; to each element
and styles font-size: 0px; line-height: 0px; to each element which is empty
You have cellspacing="0" twice, try replacing the second one with cellpadding="0" instead.
If you see table class it has border-spacing: 2px; You could override table class in your css and set its border-spacing: 0px!important in table; I did it like
table {
border-collapse: separate;
white-space: normal;
line-height: normal;
font-weight: normal;
font-size: medium;
font-style: normal;
color: -internal-quirk-inherit;
text-align: start;
border-spacing: 0px!important;
font-variant: normal; }
It saved my day.Hope it would be of help. Thanks.
Nothing has worked. The solution for the issue is.
<style>
table td {
padding: 0;
}
</style>
Used font-size:0 in parent TD which has the image.
I had a similar problem and I solved it by (inline)styling the td element as follows :
<td style="display: block;">
This will work although its not the best practice. In my case I was working on a old template that had been styled using HTML tables.
Hi as #andrew mentioned make cellpadding = 0, you still might have some space as you are using table border=1.
Put display:block on the css for the cell, and valign="top" that should do the trick
If the caption box is gray then you can try wrapping the image and the caption in a div with the same background color of gray---so a "div" tag before the "tr" tag...This will mask the gap because instead of being white, it will be gray and look like part of the gray caption.
What I want is to have a centered content column that has a bg with a long vertical gradient. It will most likely extend past the browser, however I don't want it to create scrollbars. I want it to act as if it were like the body background where it continues and is only revealed if the browser is larger or there is more content.
Looks like you need something like this. My example used tables, but you can try to replace it with div layout.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>aruseni</title>
<style type="text/css">
body {
font-size: 14px;
font-family: arial, helvetica, sans-serif;
color: #000;
background-color: #9b9b9b;
}
html, body{
margin:0;
padding:0;
height:100%;
border:none
}
a, a:link {
font-weight: bold;
color: #000;
}
a:visited {
font-weight: bold;
color: #444;
}
img {
border: 0;
}
table.site {
border: 0;
padding: 0;
border-spacing: 0;
margin: 0 auto;
width: 80%;
height: 100%;
min-width: 700px;
}
tr {
vertical-align: top;
}
td {
padding: 0;
}
td.left_side {
width: 200px;
}
td.right_side {
width: 200px;
}
td.content {
padding: 10px;
background-color: #fff;
background-image:url('gradient-1x2000.png');
background-repeat: repeat-x;
width: 200px;
}
</style>
</head>
<body>
<table class="site">
<tr style="padding: 0px;">
<td class="left_side"> </td>
<td class="content">
<p>Your contents go here. :)</p>
</td>
<td class="right_side"> </td>
</tr>
</table>
</body>
</html>
The gradient here is an image with 2000 height and 1 weight. The gradient starts in the top, and if the browser’s height is more than 2000 pixels (oh, really?), as “background-color: #fff;” specifies, the white colour is rendered.