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) {
Related
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.
I am creating a website for the first time and have run into an issue with the way my page is displayed in Internet Explorer. The page should have a banner with the logos of our sponsors as links to the sponsor's website. It works in Chrome, displaying like
this, a webpage with small, reasonably sized images for the logos. But in IE (version 11), it looks like this, a webpage where I can't even see the whole logo because it is so big. Can someone look at my code and tell me what to change (preferably in simple language since I am a beginner)? Thank you!
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>LTP | Home</title>
<meta name="description" content="Welcome to Language Training Programme">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta name="Microsoft Theme" content="none, default">
<meta name="Microsoft Border" content="none, default">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styling.css" type="text/css" rel="stylesheet">
<!--WHY SPACING SOMETIMES WRONG??-->
</head>
<body>
<!--UNRELATED CODE-->
<table class="sponsors" width=100%>
<tr>
<td width=40%>
<h1>Thank You Sponsors</h1>
</td>
<td rowspan="2">
<img src="Po-Leung-Kuk-logo.png" height="10%">
</td>
<td rowspan="2">
<img src="UBS_logo_logotype_emblem.png" height="3.5%">
</td>
<!--LOOKS BAD IN EXPLORER??-->
</tr>
<tr>
<td class="chinesethankyou">
<h1>谢谢赞助商</h1>
</td>
<td></td>
<td></td>
</tr>
</table>
</body>
* {
margin: 0px;
}
h1 {
font-family:Arial;
color:white;
font-size:25px;
}
h2 {
font-family:Arial;
color:rgb(0,121,194);
font-size: 36px;
padding:20px 0px;
}
.tdlinks {
font-family:Arial;
color:rgb(144,38,143);
font-size: 1.5vw;
font-weight: bold;
padding-bottom: .7vw;
}
.tablelinks {
margin:30px 30px 5px 0px;
}
.sponsors {
background-color: rgb(144,38,143);
box-sizing: border-box;
width: 100%;
padding: 20px 30px;
}
p { /*line spacing*/
font-family:Arial;
color:black;
font-size:14px;
padding:10px 0px;
}
a,a:visited {
color: rgb(144,38,143);
text-decoration: none;
}
.line {
margin:0px 0px 0px 0px;
}
.chinesethankyou{
padding-top: 10px;
}
Getting things to work in other browsers besides chrome can be a little tricky. I recommend checking this site out, if you haven't already W3Schools. My best advice is use Google Chrome first and then move on to another browser. Google Chrome is pretty easy to use without having to do anything extra for its browser.
Setting image height and width will work
.sponsors img{
width: 150px;
height: 150px;
display: inline-block;
}
I have following table:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TTT</title>
<style>
/* on both */
body {
overflow-x: hidden;
}
.full-width {
position: relative;
margin: 0 -9999rem;
padding: .25rem 9999rem;
background-color: #000;
color: white;
font-size: 1.125rem;
}
</style>
</head>
<body>
<table class="full-width" style="background-color: #000;">
<td style="color: #FFF">
Text
</td>
<td style="color: #FFF">
Text 2
</td>
</table>
</body>
</html>
Setting html overflow-x: hidden is not an option. Would work but destroy my outbound table. Only on Safari I've a scrollbar. And here.
Snippet partly from here: https://css-tricks.com/full-browser-width-bars/
I am devoloping a struts 2 project in which layout page is creating an unwanted border over it. I tried to remove it by putting padding and border as 0 px. but still it is coming.
<%# taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><tiles:insertAttribute name="title" ignore="true" /></title>
<%-- Internal style elements --%>
<style type="text/css">
.basestyle { /*style which is given for the main DIV which includes entire base layout body */
width: 100%;
height: 100%;
padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
}
.headstyle { /* style which is given for the DIV which includes header part */
margin:0px;
width: 100%;
height: 10%;
vertical-align: middle;
text-align: center;
background-color: #476D9E;
padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
}
.vericalscroll { /* style which is given for the DIV which includes vertical menu part */
overflow-y:auto; overflow-x:hidden;
height:100%;
width:153px;
background-color: #476D9E;
vertical-align:top;
margin-right:1px;
padding-right:5px;
}
.bodystyle { /* style which is given for the DIV which includes body part */
padding: 0px,0px,0px,0px;
border-bottom:0px;
border-left:0px;
border-right:0px;
border-top:1px #DBDFEC;
font-family: Calibri;
font-weight: lighter;
height:565px;
overflow-y: auto;
overflow-x: auto;
width:100%;
/*text-align: center;*/
}
.footstyle { /* style which is given for the DIV which includes footer part */
width: 100%;
background-color: #476D9E;
height: 10px;
bgcolor:#eeeeee;
vertical-align: middle;
text-align: center;
padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
}
</style>
</head>
<body >
<div class="basestyle" >
<div class="headstyle" >
<tiles:insertAttribute name="header" /> <%-- including header --%>
</div>
<table border="0" width=100% height=87% style="margin: 0px; padding: 0px;">
<tr>
<td width=153 align="left" valign="top">
<div class="vericalscroll" >
<tiles:insertAttribute name="menu" /> <%-- including menu --%>
</div> </td>
<td valign="top" align="left" width=88% >
<div class="bodystyle" align="center" >
<tiles:insertAttribute name="body" /> <%-- including body --%>
</div> </td>
</tr>
</table>
<div class="footstyle" >
<tiles:insertAttribute name="footer" /> <%-- including footer --%>
</div>
</div>
</body>
</html>
Red color background is given for identifying body part
remove "border-top:1px #DBDFEC" from ".bodystyle" and even instead of all border in your .bodystyle just write border:none;
although i could not see the border in your attached image.
Add this option in the tile tag theme="css_xhtml". Then it will be simply treated as HTML tag in view.
I've been bashing my head over some CSS issues and figured out it was the doctype.
The production site carries
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Where as our stage site carries
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
When using the production tag many of my text colors, sizes etc for my List elements disappear.
I use the 960 grid css file followed by its reset and text.css files.
After that I have a main.css file with my own styles, yet specifically the font stylings for my list inside a specific div don't get recognized
Below is the CSS for the page followed by the HTML
.sideBox {
width: 225px;
float: right;
text-align: left;
}
.sidebox ul, #slideMenu ul {
list-style: none;
margin: 0;
padding: 0;
text-indent: 0;
margin-top:8px;
}
#slideMenu ul li {
margin-right:10px;
padding-right: 10px;
float: left;
width:150px;
border-right: 1px solid #cccccc;
}
.sidebox li {
height:124px;
margin: 0;
padding: 0 10px;
border-bottom: 1px solid #cccccc;
}
.sidebox li:first-child{
height:123px;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
.sidebox h3, .sidebox p
{
margin: 0;
color: #707070;
padding:0;
font-size: 22px;
margin-top:1px;
font-weight:500;
}
.sidebox p {
font-size:18px;
color:#a6a6a6;
}
.infoBoxDiv {
height: 100%;
vertical-align: middle;
}
.infoBoxDiv h2, infoBoxDiv.p {
height: 100%;
vertical-align: middle;
}
.sidebox li.infohighlighted {
border-top: 2px solid #00A4E4;
border-bottom: 2px solid #00A4E4;
position:relative;
top:-1px;
height:121px;
}
.sidebox li:first-child.infohighlighted {
border-top: 2px solid #00A4E4;
border-bottom: 2px solid #00A4E4;
position:relative;
top:0px;
height:121px;
}
.sidebox li.infohighlighted p {
color: #707070;
font-family: Georgia;
}
.sidebox li.infohighlighted h3 {
color: #00A4E4;
font-family: Georgia;
margin: 0px;
top: -1px;
padding: 0px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/960.css" />
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/text.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery_ui.js" type="text/javascript"></script>
<script src="js/rotator.js" type="text/javascript"></script>
</head>
<body style="background-color:#e4e5ef;"><br><br>
<div class="container_16" style="background-color:#fff;"><br><br>
<div id="splashContainer">
<div id="jqb_object">
<div class="jqb_slides">
Slides Here
</div>
</div>
<div class="sideBox">
<ul id="slideList">
<li id="infoBox_0" class="infoDefault infoHighlighted"><br><h3>$95 Rx Glasses</h3><p>Vintage inspired frames with prescription lenses</p></li>
<li id="infoBox_1" class="infoDefault"><br><h3>New Collection</h3><p>See 4 new exclusively designed styles</p></li>
<li id="infoBox_2" class="infoDefault"><br><h3>New Collection</h3><p>See 4 new Designs</p></li>
<li id="infoBox_3" class="infoDefault"><br><h3>New Collection</h3><p>See 4 new Designs</p></li>
</ul>
</div>
</div>
<div id="mediaBanner" class="subContainer">
<div id="featuredIn">
<span style="vertical-align:middle; line-height:38px;">Featured In:</span>
<img src="images/nyTimes.png" style="vertical-align:middle;margin:none;padding:none;">
<img src="images/vogue.png" style="vertical-align:middle;margin:none;padding:none;">
<img src="images/dailyCandy.png" style="vertical-align:middle;margin:none;padding:none;">
<img src="images/gq.png" style="vertical-align:middle;margin:none;padding:none;">
<span style="vertical-align:middle; line-height:38px;color:#ccc; padding-left:30px;font-style:bold;">|</span>
</div>
<div id="socialBox"><span style="vertical-align:middle; line-height:38px;">Join Us | Follow Us</span></div>
</div>
<div class="subContainer miniBoxContainer">
<div class="miniBox"><img src="images/miniBox282x128.jpg" /><h4>New Collection</h4>Check out the new collection</div>
<div class="miniBox"><img src="images/miniBox282x128.jpg" /><h4>New Collection</h4>Check out the new collection</div>
<div class="miniBox"><img src="images/miniBox282x128.jpg" /><h4>New Collection</h4>Check out the new collection</div>
</div>
</div>
</body>
</html>
The doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
triggers Standards mode in browsers, while the other one triggers Quirks mode.
In Quirks mode, browsers emulate the bugs of old browsers (very old, we're talking IE 5.5 here) in order to cope with sites designed by people unfamiliar with the standards. In this mode browsers are much more inconsistent with each other, and (in some cases) don't support some newer features of CSS at all. This makes Quirks mode highly undesirable.
In standards mode, browsers are much less forgiving of errors in the CSS. http://jigsaw.w3.org/css-validator/ will help you find them.