I'm trying to build an email template based on https://www.muicss.com/docs/v1/example-layouts/html-email.
On top of what they offer, I'd like to have a two solid color background: color A for the top fixed height (say 200px), and color B for the rest of the content, and the table (cards) floating across the two colors, similar to This.
I tried different options using linear-background, but it doesn't show at all, the gradient starts from the bottom of the card, or the card's color becomes transparent when copied to Gmail web client (even after I inlined styles)
This is what I have for now:
<!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" />
<!-- NOTE: external links are for testing only -->
<style>
body {
width: 100% !important;
min-width: 100%;
margin: 0;
padding: 0;
background-color: #FFF;
}
.mui-body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
color: #212121;
font-family: "Helvetica Neue", Helvetica, Arial, Verdana, "Trebuchet MS";
font-weight: 400;
font-size: 14px;
line-height: 1.429;
letter-spacing: 0.001em;
background-color: #FFF;
}
.mui-container, .mui-container-fixed {
max-width: 600px;
display: block;
margin: 0 auto;
clear: both;
text-align: left;
padding-left: 15px;
padding-right: 15px;
}
.mui-container-fixed {
width: 600px;
}
.mui-panel {
padding: 15px;
border-radius: 0;
background-color: #FFF;
border-top: 1px solid #ededed;
border-left: 1px solid #e6e6e6;
border-right: 1px solid #e6e6e6;
border-bottom: 2px solid #d4d4d4;
}
</style>
</head>
<body>
<table class="mui-body" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<center>
<!--[if mso]><table><tr><td class="mui-container-fixed"><![endif]-->
<div class="mui-container">
<table cellspacing="0" border="0" width="100%">
<tr>
<td class="mui-panel">
<table id="content-wrapper" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<p>random</p>
<p>text</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso]></td></tr></table><![endif]-->
</center>
</td>
</tr>
</table>
</body>
</html>
Can someone help me with this please?
If only email clients decided to sit down and strictly follow the RFCs... If only they would use the same html css parsing engine...
The question isn't so much HOW but rather, WHAT type of html and css most email clients support consistently across the board. You will find most clients just do their own thing when it comes to parsing your emails and you could end up writing many templates from scratch for the same email.
To save you some time search Foundation for Emails on Google. See direct Link below.
Foundation for Emails | Responsive Email Templates
Foundation for emails is a framework that helps you develop your own custom email templates from templates they already have. Fluid & Responsive for any device. Very clean.
In the process, you will learn which CSS and HTML tags you can use and which aren't supported. Many aren't supported.. To give you an idea, html layouts in emails are created using <table></table> instead of <div></div>. The DOCTYPE you're using is also not ideal; think early 2000's.
Example of correct doctype for all universal emails you will ever write:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Email clients does not support all the css properties. So in short better you use images for linear gradient.
Related
I`m having this issue when I am viewing the email using Gmail App (Mobile):
The table columns are stacking on mobile on all email clients except the Gmail App
I noticed that the styles are not working on google, but if i put the CSS using inline (Ex. style="background-color:red") it works.
I saw a lot of articles saying that the does not works on gmail, but another saying that works if you put it inside the tag.
Main Layout:
#using Sitecore.Mvc.Analytics.Extensions
<!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" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
<!-- Used for storing title of the email -->
#Html.Sitecore().Field("Subject")
</title>
<!-- The VisitorIdentification control ensures that people viewing this page with a traditional web browser will be classified as humans not bots. This control is not required if people only view messages using Email clients -->
#Html.Sitecore().VisitorIdentification()
#if (Sitecore.Context.PageMode.IsExperienceEditorEditing)
{
<link href="~/Assets/5-Components.min.css" rel="stylesheet" />
}
<style type="text/css">
body {
margin: 0px !important;
padding: 0px !important;
}
.wrapper > tbody > tr > td {
box-sizing: border-box;
}
##media only screen and (max-width:720px) {
.wrapper {
width: 90% !important;
margin: auto;
}
.templateColumnContainer {
display: block !important;
/* padding: 0 !important; */
width: 100% !important;
}
.marginBtm {
margin-bottom: 0px;
}
.footerLeft {
border-right: 5px #c2c2c2 solid;
border-bottom: 0px #c2c2c2 solid !important;
}
.footerRight {
border-left: 5px #c2c2c2 solid;
border-top: 0px #c2c2c2 solid !important;
}
}
</style>
</head>
<body style="min-height: 97vh; background-color:#c2c2c2; font-family: Arial, Helvetica, sans-serif; box-sizing: border-box" class="#((Sitecore.Context.PageMode.IsExperienceEditorEditing) ? "edit-mode" : string.Empty)">
<div style="min-height: 97vh; margin:0; padding-top: 16px; background-color:#c2c2c2; font-family: Arial, Helvetica, sans-serif; box-sizing: border-box">
<center>
#Html.Sitecore().Placeholder("mail-body")
</center>
</div>
</body>
</html>
Component Placeholder:
#model XX.Project.EXM.Models.ColumnComponent
<table width="600" cellpadding="0" cellspacing="0" class="wrapper">
<tbody>
<tr>
<td width="50%" class="templateColumnContainer marginBtm" style="background-color: #Model.BackgroundColor; border: 5px #c2c2c2 solid; Padding: #Model.getFormattedPaddingDistance(); color:#Model.TextColor;">
#Html.Sitecore().DynamicPlaceholder("mail-left-double-column")
</td>
<td width="50%" class="templateColumnContainer" style="background-color: #Model.BackgroundColor; border: 5px #c2c2c2 solid; Padding: #Model.getFormattedPaddingDistance(); color:#Model.TextColor;">
#Html.Sitecore().DynamicPlaceholder("mail-right-double-column")
</td>
</tr>
</tbody>
</table>
When GMail encounters an error in your CSS, it will remove the entire <style> block from the head.
You have 2 # symbols in front of your media query.
##media only screen and (max-width:720px) {
I'm just learning to create a responsive email signature. I am not good at coding so would appreciate any advice.
In part of the code shown below, do I need any special attributes to correct or make sure it's responsive?
I am editing in DreamWeaver and in Chrome preview it seems to work. Though, I have two columns and it's flexible only for the column text on the right, but it doesn't move the second column below the first column.
Also, how do I define which height or min-height to set for the table?
Sorry - I am really a newbie.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Email Signature</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body style="font-size: 11pt; font-family: Calibri, sans-serif;">
<table style="width: 100%; min-height: 120px; font-size: 11pt; font-family: Calibri, sans-serif;" cellpadding="0px" cellspacing="0">
<tbody>
<tr>
<td width="120" style="font-size: 11pt; font-family: Calibri, sans-serif; border-right: 1px solid; border-right-color: #ba1f31; width: 120px; height: 100%; padding-bottom: 0px; padding-left: 0; padding-right: 10px; vertical-align: top; valign="top" rowspan="6">
I think it's not possible. Not for working on all mailing platforms (Outlook, gmail, apple mail, etc). Each one implements and standar of html, and many times is an old one.
You can use these guide to look for the best and most compatible elements: https://www.campaignmonitor.com/css/style-element/style-in-body/
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I am working on HTML code. I need the title of code be in center of page. The title of page (heading) contain 10 words.
The options i am using start the sentence from middle and then move to right. I need the whole .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.Titleline {
position: absolute;
left: 50%;
width: 546px;
height: 74px;
font-family: TimesNewRomanPSMT;
font-size: 35px;
line-height: 1.06;
color: #222222;
}
</style>
</head>
<body>
<table>
<tr>
<center class="Titleline">You are one step closer to <br/>the experience of a life time</center>
</tr>
</table>
</body>
</html>
You see the sentence start at center but moves to right.
can this be fixed somehow.
Your HTML is invalid. There are two reasons:
<center> tag is deprecated. (Some browsers do support them).
<center> cannot be a direct descendant to <tr>, it should be <td>. Use the class for the td instead.
Better code would be something like:
.Titleline {
/* position: absolute;
left: 50%;
width: 546px;
height: 74px;
*/
font-family: TimesNewRomanPSMT;
font-size: 35px;
line-height: 1.06;
text-align: center;
}
table {
width: 100%;
}
<table>
<tr>
<td class="Titleline">You are one step closer to <br/>the experience of a life time</td>
</tr>
</table>
See the updated code in the snippet. Use the class for the <td> instead and make the <table>, full width. Also, don't use position unnecessarily.
There are a number of problems:
<center> is deprecated; don't use it.
You have invalid markup; <center> is not a valid child of <tr>. <td> and <th> are the only valid children of <tr>.
You're using position: absolute with left: 50%, which makes your text start with an offset of 50%; it does not centralise it.
I'd recommend adding switching <center> to <td>, and adding text-align: center to .Titleline in order to centralise it. Keep in mind you've also got a fixed width on your .Titleline, which will need removing. You'll also need to add width: 100% to table so that it takes up the full available width (so that the text can centralise). This can be seen in the following example:
.Titleline {
font-family: TimesNewRomanPSMT;
font-size: 35px;
line-height: 1.06;
color: #222222;
text-align: center;
}
table {
width: 100%;
}
<body>
<table>
<tr>
<td class="Titleline">You are one step closer to <br/>the experience of a life time</td>
</tr>
</table>
</body>
The above shows how you can centralise your text in a table, but I'd also recommend not using tables for layouts due to their poor support for smaller screens. I'd recommend making use of something like the <div> element to divide up your content instead. For pure text (like your example), you should also make use of the <p> tag:
.Titleline {
font-family: TimesNewRomanPSMT;
font-size: 35px;
line-height: 1.06;
color: #222222;
text-align: center;
}
<body>
<div>
<p class="Titleline">You are one step closer to <br/>the experience of a life time</p>
</div>
</body>
Hope this helps! :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.Titleline
{
position: absolute;
text-align:center;
width: 546px;
height: 74px;
font-family: TimesNewRomanPSMT;
font-size: 35px;
line-height: 1.06;
color: #222222;
}
</style>
</head>
<body>
<table>
<tr>
<td class="Titleline">
You are one step closer to <br/>the experience of a life time
</td>
</tr>
</table>
</body>
</html>
I'm currently working on some simple gallery, that should show thumbnails of a fixed size of 148px.
When I specify <!doctype html> at the very beginning of the file it messes up my style so that it looks like on this picture.
Without this line (I guess the browser is working in HTML4 mode then) it looks correct:
Take a look at the file by yourself: http://ablage.stabentheiner.de/2013-08-10_gallery.html
New file version: http://ablage.stabentheiner.de/2013-08-10_gallery2.html same file with different doctype: http://ablage.stabentheiner.de/2013-08-10_gallery2_html4.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Gallerie</title>
<base target="Hauptframe">
<style>
body {
background-color: #CCFFCC;
background-image:url(../background.gif);
}
table {
border:none;
border-spacing:0;
}
img {
border:none;
}
A:hover {
color: #FF0000;
font-weight: bold
}
.imagefloat {
border: medium solid #FFF;
float: left;
margin-top: 0px;
margin-right: 16px;
margin-bottom: 20px;
margin-left: 0px;
}
.nowrap {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-size: 16px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.nowrapline2 {
font-size: 12px;
}
.nowrapline3 {
font-size: 10px;
}
.error {
font-weight: bold;
color: #F00;
}
.caption_cell {
background-color: #FFF;
width: 148px;
height: 80px;
}
</style>
</head>
<body>
<div class="imagefloat">
<table>
<tr>
<td><img src="http://placehold.it/148x148" width="148" height="148" alt=""></td>
</tr>
<tr class="caption_cell">
<td>
<p class="nowrap">Title</p><p class="nowrap nowrapline2">Subtitle</p><p class="nowrap nowrapline3">Copyright</p>
</td>
</tr>
</table>
</div>
<div class="imagefloat">
<table>
<tr>
<td><img src="http://placehold.it/148x148" width="148" height="148" alt=""></td>
</tr>
<tr class="caption_cell">
<td>
<p class="nowrap">Title</p><p class="nowrap nowrapline2">Subtitle</p>
</td>
</tr>
</table>
</div>
</body>
The solution is simple enough. Images by default are handled as inline objects. For inline rendering, a minimum vertical clearance between rows is generally required and this is added by the browser for better readability. To remove this additional clearance try applying 'display: block' to these images.
Okay, your problem here's simple: you aren't using valid HTML5. The first thing you should always check is that your code validates as well-formed HTML, which yours doesn't. After that, check your CSS too; but just be aware that if the problem is that your site displays more nicely in HTML4 mode than HTML5 mode, then that's not a bug, that means that you've done something wrong writing your code.
Your first step here is to fix all of the glitches which the W3C validator has pointed out; if that doesn't fix the problem, then take another look at your CSS.
I've added a tab to my facebook page using Static Html: iframes tab app.
Works fine in chrome but in IE I get "Only secure content is displayed" notification.
The background image is linked with SSL and there is no other outer content linked to the page, only html with text so I have no idea about the cause...
Here is my code:
<!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" />
<style type="text/css">
body {
direction: rtl;
background-image: url('https://lh3.googleusercontent.com/-8GcYUqtmItc/UDc8OSEOdZI/AAAAAAAAD_g/denZSy7Be_0/s800/bg.jpg');
margin: 0;
padding: 0;
border: none;
overflow: hidden;
font: Arial;
font-size: 18px;
color: #00000;
}
#header {
padding: 0;
margin: 0 auto;
border: none;
width: 100%;
height: 190px;
}
</style>
<title>Page Title</title>
</head>
<body>
<div id="header"></div>
<div id="content">
<table width="90%" cellpadding="10" border="0" align="center">
<tr>
<td align="right" dir="rtl">
<p>
Some text...
</p>
</td>
</tr>
</table>
</div><!-- content -->
</body></html>
Here is the actual page link: http://facebook.com/#!/GioraSalz/app_349708898445501
Thanks in advance.
In facebook tab apps, the secure content is everything on https://facebook.com. Since your site is probably not secured with SSL, IE will not show it because somewhere deep in the bowels of IE settings is a "only show secure content." if you want to remove this, just get a ssl certificate. they're pretty cheap