I have a textarea where I have the body of the email with style like below. But the email does not retain any of the below styles in outlook. I have <cfmail type="html". Any ideas on how to retain the styles I have below. The extra html tags have closing tags in another footer file that I am including on the email.
<textarea name="email_body">
<table class="one-column" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-spacing:0" bgcolor="#FFFFFF">
<tr><td align="left" style="padding:10px 40px 40px 40px"><p style="color:#5f6971; font-size:20px; text-align:left; font-family: Helvetica, Arial, sans-serif"><strong>Dear Dr. <cfoutput>#user.fname# #user.lname#</cfoutput>, </strong></p><p style="color:#5f6971; font-size:16px; text-align:left; font-family: Helvetica, Arial, sans-serif">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p></td></tr></table>
<strong> <cfoutput>#user.detail#</cfoutput></strong>
<center><table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr><td><table border="0" cellpadding="0" cellspacing="0"><tr><td height="20" width="100%" style="font-size: 20px; line-height: 20px;"> </td></tr></table><table border="0" align="center" cellpadding="0" cellspacing="0" style="Margin:0 auto;"><tbody><tr><td align="center"><table border="0" cellpadding="0" cellspacing="0" style="Margin:0 auto;"><tr><td width="250" height="60" align="center" bgcolor="#1a99e6">View the User Detail</td></tr></table></td></tr></tbody></table></td></tr>
</table></center></td></tr>
</table></textarea>
You want HTML to be the inputted content of the textarea, right? You need to encode the content then.
<cfsavecontent variable="content">
<table class="one-column" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-spacing:0" bgcolor="#FFFFFF">
<tr>
<td align="left" style="padding:10px 40px 40px 40px">
<p style="color:#5f6971; font-size:20px; text-align:left; font-family: Helvetica, Arial, sans-serif">
<strong>Dear Dr. <cfoutput>#user.fname# #user.lname#</cfoutput>,</strong>
</p>
<p style="color:#5f6971; font-size:16px; text-align:left; font-family: Helvetica, Arial, sans-serif">
Lorem ipsum dolor sit amet, ...
</p>
</td>
</tr>
</table>
<strong><cfoutput>#user.detail#</cfoutput></strong>
<p>etc.</p>
</cfsavecontent>
<textarea name="email_body">
<cfoutput>#encodeForHtml(content)#</cfoutput>
</textarea>
<cfsavecontent> stores your desired input into the variable content.
encodeForHtml() encodes the text of said variable, so it's not recognized as actual HTML/markup (a.k.a. < is <, > is > etc.), but as literal text.
I recently had to write a page to allow our mailmeisters to investigate delivery problems. I did it the easy way.
Form page
<cftextarea richtext="yes" name="mailBody" rows="80" cols="30" height="500"></cftextarea>
Action page
<cfmail from="#session.username# <#form.sender#>"
to="#form.recipients#" subject="Test Mail" type="html">
#form.mailBody#
<p>This mail was sent using ColdFusion.</p>
</cfmail>
It works magnificently. I use ColdFusion version 9.
Related
How would I go about fixing the text position in the table?
Trying to make the blurb line up next to the video.
Trying to make the video details align to the right.
Jsfiddle: https://jsfiddle.net/wewc4dq5/1/
<div class="row" style="margin-bottom: 5em">
<div class="col-sm-5">
<table class="left-photo-table">
<tr>
<td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
<td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
<td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
</tr>
<tr>
<td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
<td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
<td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
</tr>
</table>
</div>
<div class="col-sm-7" style="background-color: #D6E2FF; height: 310px;">
<table class="right-content-table">
<tr>
<h4 style="padding: 0.5em;">Patricia Bright</h4>
</tr>
<tr>
<td width="300px">
<iframe style="padding-left: 1em;" width="300" height="210" src="https://www.youtube.com/embed/XQxdQrPPHC4?rel=0&controls=1&showinfo=0"
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</td>
<td>
<div style="width: 210px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur rhoncus aliquam. Mauris imperdiet tortor non lectus volutpat, et vestibulum lorem viverra.</div>
</td>
</tr>
<tr width="100%">
<td style="text-align: right; padding-top: 0.5em;"><div style="width: 500px;"></div>21 min 17 sec | 632,991 views | ⭐⭐⭐⭐⭐</div></td>
</tr>
</table>
</div>
</div>
You need to use display:block on the <tr> tag
And remove width:100% on <td> tag.
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.left-photo-table {
height: 310px;
width: 100%;
text-align: center;
border-spacing: 1em;
border-collapse: separate;
vertical-align: middle;
}
.left-photo-table td {
background-repeat: no-repeat;
background-position: center;
width: 33%;
}
.left-photo-table td:hover {
cursor: pointer;
filter: alpha(opacity=50);
-moz-opacity: .50;
opacity: .50;
}
<div class="row" style="margin-bottom: 5em">
<div class="col-sm-5">
<table class="left-photo-table">
<tr>
<td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
<td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
<td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
</tr>
<tr>
<td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
<td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
<td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
</tr>
</table>
</div>
<div class="col-sm-7" style="background-color: #D6E2FF; height: 310px;">
<table class="right-content-table">
<tr>
<h4 style="padding: 0.5em;">Patricia Bright</h4>
</tr>
<tr style="display: block;"">
<td width="300px">
<iframe style="padding-left: 1em;" width="300" height="210" src="https://www.youtube.com/embed/XQxdQrPPHC4?rel=0&controls=1&showinfo=0"
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</td>
<td>
<div style="width: 210px; margin-left: 25px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur rhoncus aliquam. Mauris imperdiet tortor non lectus volutpat, et vestibulum lorem viverra.</div>
</td>
</tr>
<tr width="100%">
<td style="text-align: right; padding-top: 0.5em;"><div style="width: 500px;"></div>21 min 17 sec | 632,991 views | ⭐⭐⭐⭐⭐</div></td>
</tr>
</table>
</div>
</div>
May be this is what you want!!
I have table with CSS and structure:
table, td {
border: 3px solid #208000;
border-collapse: collapse;
font-size: 75%;
}
.headingTable {
text-align: center;
padding: 1%;
}
#media only screen and (min-width: 768px) {
table, td {
border: 3px solid #208000;
font-size: 100%;
}
.headingTable {
font-size: 100%;
}
}
#media only screen and (min-width: 1200px){
table, td {
border: 5px solid #208000;
}
.headingTable {
font-size: 125%;
}
}
<table>
<caption>Table caption</caption>
<thead>
<tr>
<td class = "headingTable">First</td>
<td class = "headingTable">Second</td>
<td class = "headingTable">Third</td>
<td class = "headingTable">Fourth</td>
<td class = "headingTable">Fifth</td>
</tr>
</thead>
<tbody>
<tr>
<td class = "headingTable">1</td>
<td>Lorem ipsum dolor </td>
<td>sit amet, consectetur adipiscing elit. In pulvinar maximus massa, id sollicitudin urna iaculis sit amet. </td>
<td>Mauris tincidunt augue erat, ac </td>
<td> accumsan justo volutpat id</td>
</tr>
</tbody>
</table>
Due to class headingTable the text of thead and first column are increased by 25% font-size at screen width wider than 1200px.
And at this screen width the first cell in thead doesn't fit to it's content ("First").
First column includes only one-digit numbers, therefore they don't overflow borders of their cells.
Also I have to mention that table contains about 40 rows.
So, the question is what I can do to make first cell in thead fit its content?
This will solve your problem <td><div class = "headingTable"> First</div></td>
table, td {
border: 3px solid #208000;
border-collapse: collapse;
font-size: 75%;
}
.headingTable {
text-align: center;
padding: 1%;
}
#media only screen and (min-width: 768px) {
table, td {
border: 3px solid #208000;
font-size: 100%;
}
.headingTable {
font-size: 100%;
}
}
#media only screen and (min-width: 1200px){
table, td {
border: 5px solid #208000;
}
.headingTable {
font-size: 125%;
}
}
<table>
<caption>Table caption</caption>
<thead>
<tr>
<td><div class = "headingTable"> First</div></td>
<td class = "headingTable">Second</td>
<td class = "headingTable">Third</td>
<td class = "headingTable">Fourth</td>
<td class = "headingTable">Fifth</td>
</tr>
</thead>
<tbody>
<tr>
<td class = "headingTable">1</td>
<td>Lorem ipsum dolor </td>
<td>sit amet, consectetur adipiscing elit. In pulvinar maximus massa, id sollicitudin urna iaculis sit amet. </td>
<td>Mauris tincidunt augue erat, ac </td>
<td> accumsan justo volutpat id</td>
</tr>
</tbody>
</table>
As #Dherya suggested, removing the padding of .headingTable solves the problem. Now, the reason why you had an overflow was that when the DOM calculated the width of the header padding-left + "First" + padding-right, it was more than the width of the cell padding-left + "1" + padding-right below. So, it had to overflow. (Note that here the widest cell in a column is what sets the width of the header.)
When using a "fieldset" wrapper around my responsive "flipscroll" table, it will break the layout.. but when "fieldset" is not applied as a wrapper the style is correct. The reason I need to use fieldset is to have the check all checkboxes function.
Resize the screen from "Screen" mode to "Mobile" mode to see the issue. "Mobile" mode is where the problem exists.
jsfiddle: http://jsfiddle.net/MJ2nt/
HTML
<h1>Problem with "Fieldset" and "Responsive" table</h1>
<p>Responsive table works fine without "fieldset" element as a wrapper, but breaks when "fieldset" is wrapped around the table. The reason to use "fieldset" element in this case is for the "checkall" class that will check all checkboxes on/off. Does anyone have any idea what may be wrong?
<h2>Flip Scroll (Responsive Table)</h1>
<p>Works fine without "fieldset" element</p>
<table class="flipscroll clear">
<thead>
<tr>
<th class="center checkbox">
<label>
<input type="checkbox" name="checkall" class="checkall" />
</label>
</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr>
<td class="center"><input type="checkbox" name="select"/></td>
<td class="ellipsis">Mario Rossi</td>
<td class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
<td class="ellipsis">12/12/2013</td>
<td class="ellipsis"><span class="attachment icon_unread">512k</span></td>
</tr>
<tr>
<td class="center"><input type="checkbox" name="select"/></td>
<td class="ellipsis">Jackie Angelica</td>
<td class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
<td class="ellipsis">12/12/2013</td>
<td class="ellipsis"><span class="attachment icon_pp">256k</span></td>
</tr>
<tr>
<td class="center"><input type="checkbox" name="select"/></td>
<td class="ellipsis">Penelope Stevens</td>
<td class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
<td class="ellipsis">12/12/2013</td>
<td class="ellipsis"><span class="attachment icon_word">128k</span></td>
</tr>
<tr>
<td class="center"><input type="checkbox" name="select"/></td>
<td class="ellipsis">Maria Gupta</td>
<td class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
<td class="ellipsis">12/12/2013</td>
<td class="ellipsis"><span class="attachment icon_text">64k</span></td>
</tr>
<tr>
<td class="center"><input type="checkbox" name="select"/></td>
<td class="ellipsis">Adeline Danica</td>
<td class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
<td class="ellipsis">12/12/2013</td>
<td class="ellipsis"><span class="attachment icon_excel">32k</span></td>
</tr>
<tr>
<td class="center"><input type="checkbox" name="select"/></td>
<td class="ellipsis">Johan Celestine</td>
<td class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
<td class="ellipsis">12/12/2013</td>
<td class="ellipsis"><span class="attachment icon_read">16k</span></td>
</tr>
</tbody>
</table>
<h2 class="error">Flip Scroll (Responsive Table w/ Fieldset)</h1>
<p class="error">Breaks table when "fieldset" element is added around table</p>
<fieldset>
<table class="flipscroll clear">
<thead>
<tr>
<th class="center checkbox">
<label>
<input type="checkbox" name="checkall" class="checkall" />
</label>
</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr>
<td class="center"><input type="checkbox" name="select"/></td>
<td class="ellipsis">Mario Rossi</td>
<td class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
<td class="ellipsis">12/12/2013</td>
<td class="ellipsis"><span class="attachment icon_unread">512k</span></td>
</tr>
<tr>
<td class="center"><input type="checkbox" name="select"/></td>
<td class="ellipsis">Jackie Angelica</td>
<td class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
<td class="ellipsis">12/12/2013</td>
<td class="ellipsis"><span class="attachment icon_pp">256k</span></td>
</tr>
<tr>
<td class="center"><input type="checkbox" name="select"/></td>
<td class="ellipsis">Penelope Stevens</td>
<td class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
<td class="ellipsis">12/12/2013</td>
<td class="ellipsis"><span class="attachment icon_word">128k</span></td>
</tr>
<tr>
<td class="center"><input type="checkbox" name="select"/></td>
<td class="ellipsis">Maria Gupta</td>
<td class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
<td class="ellipsis">12/12/2013</td>
<td class="ellipsis"><span class="attachment icon_text">64k</span></td>
</tr>
<tr>
<td class="center"><input type="checkbox" name="select"/></td>
<td class="ellipsis">Adeline Danica</td>
<td class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
<td class="ellipsis">12/12/2013</td>
<td class="ellipsis"><span class="attachment icon_excel">32k</span></td>
</tr>
<tr>
<td class="center"><input type="checkbox" name="select"/></td>
<td class="ellipsis">Johan Celestine</td>
<td class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
<td class="ellipsis">12/12/2013</td>
<td class="ellipsis"><span class="attachment icon_read">16k</span></td>
</tr>
</tbody>
</table>
</fieldset>
<div class="mobile tablet screen"></div>
CSS
/*
==========================================================================
SCREEN MODE
========================================================================== */
body { background: #BFEEFC; padding: 1em 1em 5em; }
h1 { margin: 1em 0 0; }
h2 { margin: 1em 0 0; }
p { margin: .25em 0 1em; }
fieldset { table-layout: fixed; width: 100%; }
table { table-layout: fixed; width: 100%; background: white; }
table thead { background: #f2f2f2; border-bottom: 1px solid #ccc; }
table thead tr { }
table thead tr th { text-align: left; }
.flipscroll { width: 100%; }
.flipscroll tbody { overflow-y: hidden; }
/* Screen Style */
#media screen and (min-width: 64.063em) {
.screen { position: fixed; bottom: 0; left: 0;padding: .5em 1em; background: black; color: white; font-weight: bold; font-size: 1.7em; display: block; }
.screen:after { content: "Screen"; }
}
/*
==========================================================================
MOBILE MODE
========================================================================== */
#media screen and (min-width: 0) and (max-width: 64em) {
.mobile { position: fixed; bottom: 0; left: 0;padding: .5em 1em; background: black; color: white; font-weight: bold; font-size: 1.7em; display: block; }
.mobile:after { content: "Mobile"; }
/* Flip Scroll */
.featurecards .flipscroll { border-top: 0 !important; }
.flipscroll * { border: 0 !important; padding: 0 !important; position: relative; }
.flipscroll { background: #f2f2f2; border-left: 1px solid #cccccc !important; display: block; position: relative; width: 100%; border-collapse: collapse !important; border-spacing: 0 !important; border-top: 1px solid #cccccc !important; }
.flipscroll br { display: none; }
.flipscroll thead { display: block; float: left; width: 35%; min-width: 10em; }
.flipscroll thead tr { display: block; padding: 0 !important; }
.flipscroll thead tr th { text-align: left; display: block; text-align: left; white-space: nowrap; text-align: left; padding: .5em 1em !important; width: 100% !important; min-width: 100% !important; }
.flipscroll thead tr th div div { padding: .3em .5em; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; box-sizing: border-box; }
.flipscroll tbody { background: white; display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; border-left: 1px solid #cccccc !important; }
.flipscroll tbody tr { display: inline-block; border-right: 1px solid #cccccc !important; }
.flipscroll tbody tr td { display: block; text-align: left !important; padding: .5em 1em !important; font-size: 1em !important; }
.flipscroll tbody tr td:after { content: "\00a0"; }
.flipscroll tbody tr td input[type="button"] { padding: .5em 1em !important; float: left !important; margin: 0 .5em 0 0; min-width: 7em; }
.error { color: red; }
}
The problem was with:
CSS
fieldset { min-width: min-content; }
For some reason it automatically defaults to min-width: min-content when the "Flipscroll" technique is applied.
CSS SOLUTION
fieldset { min-width: 100%; }
Just add min-width: 100% and everything should fall back into place.
I can't seem to find a definitive answer to my query and especially as this is all a new field to me, finding it a little tricky but i'm almost there :)
I am basically trying to add a padding style to the social icons at the top of th email so that when the browser is resized, (essentially looked at on a smartphone) there is sufficient space between each icon.
When the screen is at full size it has equal spacing more so because the columns it sits in are loosely defined. It would be great to not have to cheat and use one image but rather the spacing kicks into effect as the screen decreases past breakpoints.
Code is below:
<!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>
<!-- If you delete this tag, the sky will fall on your head -->
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ZURBemails</title>
<link href="stylesheets/email2.css" rel="stylesheet" type="text/css" />
<style>
#charset "UTF-8";
/* CSS Document */
/* -------------------------------------
GLOBAL
------------------------------------- */
* {
margin:0;
padding:0;
}
* { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }
img {
max-width: 100%;
}
.collapse {
margin:0;
padding:0;
}
body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:none;
width: 100%!important;
height: 100%;
}
/* -------------------------------------
ELEMENTS
------------------------------------- */
a { color: #2BA6CB;}
.btn {
text-decoration:none;
color: #FFF;
background-color: #666;
padding:10px 16px;
font-weight:bold;
margin-right:10px;
text-align:center;
cursor:pointer;
display: inline-block;
}
p.callout {
padding:15px;
background-color:#ECF8FF;
margin-bottom: 15px;
}
.callout a {
font-weight:bold;
color: #2BA6CB;
}
p.subtext {
padding:0 15px;
margin-bottom: 15px;
}
.subtext a {
font-weight:bold;
color: #2BA6CB;
}
table.social {
/* padding:15px; */
background-color: #ebebeb;
}
.social .soc-btn {
padding: 3px 7px;
font-size:12px;
margin-bottom:10px;
text-decoration:none;
color: #FFF;font-weight:bold;
display:block;
text-align:center;
}
a.fb { background-color: #3B5998!important; }
a.tw { background-color: #1daced!important; }
a.gp { background-color: #DB4A39!important; }
a.ms { background-color: #000!important; }
.body-wrap tr .container .content .nav {
text-align: center;
color:#696969;
margin-top:-10px;
margin-bottom:5px;
line-height:1.5;
}
.body-wrap tr .container .content .nav a {
text-decoration:none;
color:#696969;
}
.sidebar .soc-btn {
display:block;
width:100%;
}
p.topNote { border-top: 4px solid #1b3281; margin-top:-2px;}
/* -------------------------------------
HEADER
------------------------------------- */
table.head-wrap { width: 100%;}
.header.container table td.logo { padding: 15px; }
.header.container table td.label { padding: 15px; padding-left:0px;}
/* -------------------------------------
BODY
------------------------------------- */
table.body-wrap { width: 100%;}
/* -------------------------------------
FOOTER
------------------------------------- */
table.footer-wrap { width: 100%; clear:both!important;
}
.footer-wrap .container td.content p { border-top: 1px solid rgb(215,215,215); padding-top:15px;}
.footer-wrap .container td.content p {
font-size:10px;
font-weight: bold;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,h2,h3,h4,h5,h6 {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 1.1; margin-bottom:15px; color:#000;
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; text-transform: none; }
h1 { font-weight:bold; font-size: 27px; color:#1b3180;}
h2 { font-weight:bold; font-size: 22px; color:#1b3180;}
h3 { font-weight:900; font-size: 22px; color:#0166b1;}
h4 { font-weight:500; font-size: 20px; color:#0166b1;}
h5 { font-weight:900; font-size: 17px;}
h6 { font-weight:900; font-size: 14px; text-transform: uppercase; color:#444;}
.collapse { margin:0!important;}
p, ul {
margin-bottom: 10px;
font-weight: normal;
font-size:14px;
line-height:1.6;
}
p.lead { font-size:17px; }
p.last { margin-bottom:0px;}
ul li {
margin-left:5px;
list-style-position: inside;
}
/* -------------------------------------
SIDEBAR
------------------------------------- */
ul.sidebar {
background:#ebebeb;
display:block;
list-style-type: none;
}
ul.sidebar li { display: block; margin:0;}
ul.sidebar li a {
text-decoration:none;
color: #666;
padding:10px 16px;
/* font-weight:bold; */
margin-right:10px;
/* text-align:center; */
cursor:pointer;
border-bottom: 1px solid #777777;
border-top: 1px solid #FFFFFF;
display:block;
margin:0;
}
ul.sidebar li a.last { border-bottom-width:0px;}
ul.sidebar li a h1,ul.sidebar li a h2,ul.sidebar li a h3,ul.sidebar li a h4,ul.sidebar li a h5,ul.sidebar li a h6,ul.sidebar li a p { margin-bottom:0!important;}
/* ---------------------------------------------------
RESPONSIVENESS
Nuke it from orbit. It's the only way to be sure.
------------------------------------------------------ */
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
display:block!important;
max-width:640px!important;
margin:0 auto!important; /* makes it centered */
clear:both!important;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
padding:15px;
max-width:600px;
margin:0 auto;
display:block;
}
/* Let's make sure tables in the content area are 100% wide */
.content table { width: 100%; }
/* Odds and ends */
.column {
width: 300px;
float:left;
}
.column tr td { padding: 15px; }
.column-wrap {
padding:0!important;
margin:0 auto;
max-width:600px!important;
}
.column table { width:100%;}
.social .column {
width: 280px;
min-width: 279px;
float:left;
}
/* Be sure to place a .clear element after each set of columns, just to be safe */
.clear { display: block; clear: both; }
.double .column {
width: 280px;
min-width: 279px;
float:left;
}
.socialicons { padding-left:3px; }
/* -------------------------------------------
PHONE
For clients that support media queries.
Nothing fancy.
-------------------------------------------- */
#media only screen and (max-width: 600px) {
a[class="btn"] { display:block!important; margin-bottom:10px!important; background-image:none!important; margin-right:0!important;}
div[class="column"] { width: auto!important; float:none!important;}
table.social div[class="column"] {
width:auto!important;
}
/* flex the hero image */
.container img { width:100% !important; }
}
</style>
</head>
<body bgcolor="#ececec">
<!-- HEADER -->
<table class="head-wrap" bgcolor="#ffffff" width="100%">
<tr>
<td></td>
<td class="header container">
<div class="content">
<table bgcolor="#ffffff">
<tr>
<td height="42" style=" padding-right:10px;">
<img src="http://placehold.it/500x26"></td>
<td rowspan="4" align="right"><img src="http://www.google.co.uk/emails/Template2013/images/atol.jpg"/></td>
</tr>
<tr>
<td style="color: #CCCCCC;"><img src="http://placehold.it/265x20"></td>
</tr>
<tr>
<td style="color: #CCCCCC;"> </td>
</tr>
<tr>
<td style="color: #CCCCCC;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="31%"> </td>
<td width="30%"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="right">
<tr>
<td style="color: #CCCCCC;"> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="socialicons">
<tr>
<td width="51%"> </td>
<td width="13%"> </td>
<td width="8%"><img src="http://www.google.co.uk/emails/Template2013/images/FB.png" alt="Facebook icon" width="24" height="23" border="0" class="socialicons"/></td>
<td width="7%"><img src="http://www.google.co.uk/emails/Template2013/images/twit.png" border="0" width="24" height="23" alt="Facebook icon" /></td>
<td width="7%"><img src="http://www.google.co.uk/emails/Template2013/images/youtube.png" border="0" width="24" height="23" alt="Facebook icon" /></td>
<td width="8%"><img src="http://www.google.co.uk/emails/Template2013/images/flickr.png" border="0" width="24" height="23" alt="Facebook icon" /></td>
<td width="6%"><img src="http://www.google.co.uk/emails/Template2013/images/gplus.png" border="0" width="24" height="23" alt="Facebook icon" /></td>
</tr>
</table>
</div>
</td>
<td></td>
</tr>
</table><!-- /HEADER -->
<!-- BODY -->
<table class="body-wrap">
<tr>
<td></td>
<td class="container" bgcolor="#FFFFFF">
<div class="content">
<table class="nav" width="100%">
<tr>
<td class="container" bgcolor="#FFFFFF">
Austria |
<a href="http://www.google.co.uk/ski-resorts/france-ski-holidays/?em=cs080213" target="_blank" >France</a> |
<a href="http://www.google.co.uk/ski-resorts/italy-ski-holidays/?em=cs080213" target="_blank" > Italy</a> |
<a href="http://www.google.co.uk/ski-resorts/switzerland-ski-holidays/?em=cs080213" target="_blank" >Switzerland</a> |
<a href="http://www.google.co.uk/ski-resorts/canada-ski-holidays/?em=cs080213" target="_blank" > Canada</a> |
<a href="http://www.google.co.uk/ski-resorts/usa-ski-holidays/?em=cs080213" target="_blank" > USA</a> |
All Ski destinations</td>
</tr>
</table>
<table>
<tr>
<td>
<!-- A Real Hero (and a real human being) -->
<p><img src="http://www.google.co.uk/emails/Template2013/images/hero_image_template.jpg" />
</p><!-- /hero -->
<p class="topNote"></p>
<!-- Callout Panel -->
<h1>Welcome Mr Smith,</h1>
<p class="callout">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
</p>
<br />
<h3>Subheader 1</h3>
<p class="subtext">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
<table class="double" width="100%">
<tr>
<td>
<!--- column 1 -->
<table align="center" class="column">
<tr>
<td>
<p><img src="http://placehold.it/280x150" /></p>
</td>
</tr>
</table><!-- /column 1 -->
<!--- column 2 -->
<table align="left" class="column" bgcolor="">
<!--<tr bgcolor="#1b3281">
<td>
<p style="color:#FFFFFF; font-weight:bold;">Delta Whistler Village, CANADA</p>
</td>
</tr>-->
<tr>
<td>
<h4>Delta Whistler Village</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis autem vel eum iriure dolor in hendrerit in </p></td>
</tr>
</table> <!-- /column 2 -->
</td>
</tr>
</table> <br />
<table class="double" width="100%">
<tr>
<td>
<!--- column 1 -->
<table align="center" class="column">
<tr>
<td>
<p><img src="http://placehold.it/280x150" /></p>
</td>
</tr>
</table><!-- /column 1 -->
<!--- column 2 -->
<table align="left" class="column" bgcolor="">
<!--<tr bgcolor="#1b3281">
<td>
<p style="color:#FFFFFF; font-weight:bold;">Delta Whistler Village, CANADA</p>
</td>
</tr>-->
<tr>
<td>
<h4>Delta Whistler Village</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis autem vel eum iriure dolor in hendrerit in </p></td>
</tr>
</table> <!-- /column 2 -->
</td>
</tr>
</table>
<!-- A Real Hero (and a real human being) -->
<p> </p><!-- /hero -->
<!-- Callout Panel -->
<p class="callout">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. Do it Now! »
</p><!-- /Callout Panel -->
<h3>Title Ipsum <small>This is a note.</small></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a class="btn">Click Me!</a>
<br/>
<br/>
<!-- social & contact -->
<table class="social" width="100%">
<tr>
<td>
<!--- column 1 -->
<table align="left" class="column">
<tr>
<td>
<h5 class="">Connect with Us:</h5>
<p class="">Facebook Twitter Google+</p>
</td>
</tr>
</table><!-- /column 1 -->
<!--- column 2 -->
<table align="left" class="column">
<tr>
<td>
<h5 class="">Contact Info:</h5>
<p>Phone: <strong>408.341.0600</strong><br/>
Email: <strong>hseldon#trantor.com</strong></p>
</td>
</tr>
</table><!-- /column 2 -->
<span class="clear"></span>
</td>
</tr>
</table><!-- /social & contact -->
</td>
</tr>
</table>
</div>
</td>
<td></td>
</tr>
</table><!-- /BODY -->
<!-- FOOTER -->
<table class="footer-wrap">
<tr>
<td></td>
<td class="container">
<!-- content -->
<div class="content">
<table>
<tr>
<td align="center">
<p>
Terms |
Privacy |
<unsubscribe>Unsubscribe</unsubscribe>
</p>
</td>
</tr>
</table>
</div><!-- /content -->
</td>
<td></td>
</tr>
</table><!-- /FOOTER -->
</body>
</html>
I am open to differing suggestions also.
Thank you.
Try putting into your media query something like this
.socialicons { padding-left: 14%; }
Try using cellpadding="5". That will preserve 5px between all your table cells.
Question: do you need 5px of space always?
One method would be to add empty td's between the items and set the width to 5 pixels, however, the same could be almost achieved by adding non-width declared cells with default font settings applied or should I say "implied" because outlook with fall back to whatever the user has set for font size display when it isn't declared (not part of the cascade for some reason...)
Being "empty" and without width makes them a width of "auto" which means they have responsive type tendencies without being forced into a set width. See the example below:
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="socialicons">
<tr>
<td width="51%"> </td>
<td width="10%"> </td>
<td width="8%" style="font-size:3px; line-height:3px;"><img src="http://www.google.co.uk/emails/Template2013/images/FB.png" alt="Facebook icon" width="24" height="23" border="0" class="socialicons"/></td>
<td> </td>
<td width="7%" style="font-size:3px; line-height:3px;"><img src="http://www.google.co.uk/emails/Template2013/images/twit.png" border="0" width="24" height="23" alt="Facebook icon" /></td>
<td> </td>
<td width="7%" style="font-size:3px; line-height:3px;"><img src="http://www.google.co.uk/emails/Template2013/images/youtube.png" border="0" width="24" height="23" alt="Facebook icon" /></td>
<td> </td>
<td width="8%" style="font-size:3px; line-height:3px;"><img src="http://www.google.co.uk/emails/Template2013/images/flickr.png" border="0" width="24" height="23" alt="Facebook icon" /></td>
<td> </td>
<td width="6%" style="font-size:3px; line-height:3px;"><img src="http://www.google.co.uk/emails/Template2013/images/gplus.png" border="0" width="24" height="23" alt="Facebook icon" /></td>
</tr>
</table>
Side note: when mixing percentages and fixed width, it is probably a good practice to have one cell with no width declared to act as the "auto" size to compensate for extremely small or extremely large width views.
Of course, this is assuming any declarations in the css of the <head> is being stripped out by certain email clients and you need a fallback layout fix.
Add on:
<td width="8%" style="min-width:20px (or whatever your pixel width for the icon is); ... width:20px\9;"><img>
the backslash+9 hacks for IE inline forcing the width to 20 pixels.
give the padding as 0 and in between the images in the body, use something like image spacer defining the width you want in between the icons.Spacer is blank image, that has nothing in it. This will eliminate the css and make it more consistent with all email clients.
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="images/spacer.gif" width="1" height="10" style="display:block"/></td>
</tr>
</table>
One trick you can use is
<table width="680" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ebebeb">
<tr>
<td width="100%">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" style="font-size: 12px; color: #a2a2a2; font-weight: normal; font-family: Helvetica, Arial, sans-serif; line-height: 26px; vertical-align: top; text-align:center; padding:20px 0 15px">
<table align="center">
<tr>
<td>
<a style="text-decoration:none" href="https://www.example.com">
<img src="https://www.emailonacid.com/images/emails/stamplia1/facebook.png" width="35" height="35" alt="Facebook" title="Facebook" border="0" />
</a>
</td>
<td>
<a style="text-decoration:none" href="https://www.example.com">
<img src="https://www.emailonacid.com/images/emails/stamplia1/twitter.png" width="35" height="35" alt="Twitter" title="Twitter" border="0" />
</a>
</td>
<td>
<a style="text-decoration:none" href="https://www.example.com">
<img src="https://www.emailonacid.com/images/emails/stamplia1/google.png" width="35" height="35" alt="Google" title="Google" border="0" />
</a>
</td>
<td>
<a style="text-decoration:none" href="https://www.example.com">
<img src="https://www.emailonacid.com/images/emails/stamplia1/rss.png" width="35" height="35" alt="RSS" title="RSS" border="0" />
</a>
</td>
<td>
<a style="text-decoration:none" href="https://www.example.com">
<img src="https://www.emailonacid.com/images/emails/stamplia1/mail.png" width="35" height="35" alt="Mail" title="Mail" border="0" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
Here is a jsfiddle, to see it in action: http://jsfiddle.net/ahykdum5/
When I check a checkbox I want to send the data in div to webmethod which is written inside Webservice in aspx codebehind. my js is like this:
if ($(this).is(':checked')) {
if (editorContent != "") {
if (!($("#divCustomTemplateContent1:contains('<html>')"))) {
editorContent = "<html><head></head><body>" + editorContent + "</body></html>";
}
$.ajax({
type: "POST",
url: "3.aspx/AddorRemoveViewInBrowser",
contentType: "application/json; charset=utf-8",
data: "{'html':'" + encodeURIComponent(editorContent) + "',isAddorRemove:'add'}",
dataType: "json",
success: function (returndata) {
alert(returndata.d);
$('#divCustomTemplateContent1').html(returndata.d);
}
});
}
}
Here my problem is when data in div is like this
<table bgcolor="#8da2b2" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="100%" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="581">
<tbody>
<tr>
<td bgcolor="#ffffff" align="center" width="581">
<table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" style="margin-top: 20px;" width="581">
<tbody>
<tr>
<td bgcolor="#b73224" height="110">
<table border="0" cellpadding="0" cellspacing="0" style="width: 581px;">
<tbody>
<tr>
<td width="581" height="110" align="left">
<img src="/App_Themes/Main/Images/Ec/TemplateImages/3s_header.jpg" border="0" alt="XYZ Company" width="581" height="110">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="550">
<tbody>
<tr>
<td align="left" valign="top" class="mainbar" width="550">
<table border="0" cellpadding="0" cellspacing="0" width="550">
<tbody>
<tr>
<td style="font-family: Tahoma, Arial; font-size: 12px; color: #000000; padding-top: 15px;" valign="top" align="left">
<h2 style="font-size: 18px; border-left: 10px solid #a02f27; padding-top: 0; padding-right: 0;
padding-bottom: 0; padding-left: 7px; margin: 0px;">
Lorem ipsum dolor sit amet conse ct etuer adipiscing elit</h2>
<p style="color: #333333; margin-top: 10px; margin-left: 0; margin-bottom: 20px;
margin-right: 0;">
Donec imperdiet, nibh sit amet pharetra placerat, tortor purus condimentum lectushttp://tinyurl.com/d5rel77,
at dignissim nibh velit vitae sem. Nunc <a href="http://some-site.com/" style="color: #344692;">
condimentum blandit</a> tortorphasellus facilisis neque vitae purus.</p>
<p style="color: #333333; margin-top: 0; margin-left: 0; margin-bottom: 20px; margin-right: 0;">
Aliquam facilisis nisl in nisi. Ut ultricies massa eget est. Donec eget orci eget
urna aliquam egestas. Nulla vitae felis. <a href="http://some-site.com/" style="color: #344692;">
Maecenas bibendum</a>, nunc eu aliquet ultricies, massa massa aliquet est, nec
dignissim nisl ante eget lectus.</p>
<p style="margin-top: 0; margin-left: 0; margin-bottom: 5px; margin-right: 0; width: 100%;
text-align: right; padding: 0;">
<a href="#top" style="color: #344692; font-size: 11px; margin-top: 0; margin-left: 4px;
margin-bottom: 0; margin-right: 0;">Back to top</a></p>
<img src="/App_Themes/Main/Images/Ec/TemplateImages/hr-big.gif" border="0" alt="hr" width="550" height="10" style="display: block;">
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="551">
<tbody>
<tr>
<td style="font-family: Tahoma, Arial; font-size: 12px; color: #000000; padding-top: 15px;" valign="top" align="left">
<h2 style="font-family: Arial; font-size: 18px; border-left: 10px solid #a02f27;
padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 7px; margin: 0px;">
Fermentum quam donec imperde lorem ipsum dolar amet consect</h2>
<p style="color: #333333; margin-top: 15px; margin-left: 0; margin-bottom: 20px;
margin-right: 0;">
<img src="/App_Themes/Main/Images/Ec/TemplateImages/main-content-inline-small.jpg" border="0" alt="Main Content Inline Small" hspace="10" width="147" height="147" align="left">Aliquam facilisis nisl in nisi. Ut ultricies massa eget est.
Donec eget orci eget urna aliquam egestas. Nulla vitae felis. Maecenas bibendum,
nunc eu aliquet ultricies, massa massa aliquet est, nec dignissim nisl ante eget
lectus.Aliquam facilisis nisl in nisi. Ut ultricies massa eget est. Donec eget orci
eget urna aliquam egestas. Nulla vitae felis. Maecenas bibendum, nunc eu aliquet
ultricies, massa massa aliquet est, nec dignissim nisl ante eget lectus.%%%%last_name%%%%</p>
<p style="margin-top: 0; margin-left: 0; margin-bottom: 5px; margin-right: 0; width: 100%;
text-align: right; padding: 0;">
<a href="#top" style="color: #344692; font-size: 11px; margin-top: 0; margin-left: 4px;
margin-bottom: 0; margin-right: 0;">Back to top</a></p>
<img src="/App_Themes/Main/Images/Ec/TemplateImages/hr-big.gif" border="0" alt="hr" width="550" height="10" style="display: block;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table bgcolor="#8da2b2" border="0" cellpadding="0" cellspacing="0" width="581">
<tbody>
<tr>
<td style="font-family: Arial; font-size: 11px; font-weight: normal; color: #333333;" align="center" valign="bottom" height="100">
<p style="margin-top: 0; margin-left: 0; margin-bottom: 20px; margin-right: 0; text-align: center;">
XYZ Company and the XYZ Company Logo are registered trademarks of <span>XYZ Company
Corp</span>.<br>
XYZ Company Corp - 123 Some Street, City, ST 99999. ph +1 4 1477 89 745</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Then the webmethod is not getting called at all. When i give simple data in for div then ther will be no errors.
[System.Web.Services.WebMethod]
public static string AddorRemoveViewInBrowser(string html, string isAddorRemove)
{
string returnHtml = string.Empty;
if (isAddorRemove == "add")
{
CampaignManager ocampaignmanger = new CampaignManager();
returnHtml = ocampaignmanger.AddViewInbrowser(html);
}
else
{
CampaignManager ocampaignmanger = new CampaignManager();
returnHtml = ocampaignmanger.RemoveViewInbrowser(html);
}
return returnHtml;
}
what is the problem?
firstly you need to know that you have specified contentType and dataType to json. So in your case, data that is being sent to server and that's being sent back from the server has to be json data only.
do change like this.
$.ajax({
type: "POST",
....
data: {'html':encodeURIComponent(editorContent),'isAddorRemove':'add'},
....
});
Secondly you are sending string object as plain from the server you need to use JavaScriptSerializer or JsonConvert.SerializeObject(json.NET)