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!!
Related
I need to put a circle on a card for a mailing
but I can't put styles like these for mailing:
position: absolute;
left: 50%;
transform: translateX(-58%) translateY(-75%);
I opted to use margin-top but it doesn't work either!
Actually, I have:
My code is:
..code header
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="590" style="min-width: 590px; color: white;padding: 0px 8px 0px 8px; border-collapse:separate; background-color:#5619A4;">
<tr>
<td valign="top" style="font-size: 13px;">
<div align="center">
<table border="0" cellpadding="10" cellspacing="0" width="590" style="max-width: 50px; color: white;padding: 0px 8px 0px 8px; border-collapse:separate; background-color:transparent;margin-top:-12%;width: 25px;">
<tbody>
<tr>
<td >
<div style="max-width: 75%;background-color:white;border-radius: 16px;margin: 12%;background-color: transparent;">
<div align="center"><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="margin-top:-10%;height:100px;v-text-anchor:middle;width:100px;" arcsize="600%" stroke="f" fillcolor="#ff8080">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://"
style="background-color:#ff8080;border-radius:50%;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:100px;text-align:center;text-decoration:none;width:100px;-webkit-text-size-adjust:none;">1</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
As you noticed, support for absolute positioning is pretty bad across email clients. But it can be emulated using the max-height property and the faux absolute position technique.
Here’s a full example of what you're trying to achieve based on your code.
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>Overlap</title>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" align="center" style="margin:0 auto; width:590px; background:#fff;">
<tr>
<td>
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" align="center" style="width:100%;"><tr><td style="font-size:0; height:50px;">
<v:oval xmlns:v="urn:schemas-microsoft-com:vml" style="position:absolute; top:0; left:245px; width:100px; height:100px; v-text-anchor:middle;" fillcolor="#ff8080" stroke="false">
<v:textbox style="color:#fff;">
1
</v:textbox>
</v:oval>
</td></tr></table>
<![endif]-->
<!--[if !mso]><!-->
<div style="max-height:50px; text-align:center;">
<div style="display:inline-block; width:100px; height:100px; border-radius:50px; background-color:#ff8080; text-align:center; font:bold 16px/100px sans-serif; color:#fff;">
1
</div>
</div>
<!--<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" align="center" style="margin:0 auto; width:100%; background:#5619a4;">
<tr>
<td style="padding:16px; padding-top:66px;">
<p style="margin:0; color:#fff; font:16px/24px sans-serif;">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolore alias accusamus repudiandae soluta, provident nam aut iste! Facilis, blanditiis, voluptatum.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
How about using position: relative ?
The tag a would have these rules:
background-color: white;
border-radius:50%;
text-align:center;
text-decoration:none;
width:100px;
height: 100px;
display: block;
position: relative;
margin: 0 auto;
bottom: -75px;
left: 0;
right: 0;
padding: 0;
color: black;
line-height: 50px;
text-align: center;
You can adjust how much of the circle overlaps with bottom: -75px;
<table border="0" cellpadding="0" cellspacing="0" width="590" style="min-width: 590px; color: white;padding: 0px 8px 0px 8px; border-collapse:separate; background-color:#5619A4;">
<tbody><tr>
<td valign="top" style="font-size: 13px;">
<div align="center">
<table border="0" cellpadding="10" cellspacing="0" width="590" style=" color: white; border-collapse:separate; background-color:transparent;">
<tbody>
<tr>
<td>
<div style="">
<div align="center" style="width: 100%;text-align: center;"><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="margin-top:-10%;height:100px;v-text-anchor:middle;width:100px;" arcsize="600%" stroke="f" fillcolor="#ff8080">
<w:anchorlock/>
<center>
<![endif]-->
1
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody></table>
Below is the code which i have written and please help me out in making that as responsive :
<!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" /><!--supports all Unicode characters in our document-->
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!--Windows Phones will display our mobile version correctly-->
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<!-- <link rel="stylesheet" type="text/css" href="styles.css" /> -->
<style>
/* Basics */
body {
margin: 0 !important; /* used for avoiding spaces and align from top */
padding: 0;
background-color: #3C3C3C;
}
table {
border-spacing: 0; /* to avoid spacing to borders */
font-family: sans-serif;
color: #333333;
}
td {
padding: 0;
}
img {
border: 0;
}
div[style*="margin: 16px 0"] {
margin:0 !important;
}
.wrapper {
width: 100%;
table-layout: fixed;
-webkit-text-size-adjust: 100%;/* to prevent the iPhone and iPad from inflating some fonts*/
-ms-text-size-adjust: 100%;
}
.webkit {
max-width: 600px;
margin: 0 auto;
background-color:#FFFFFF;
}
.outer {
Margin: 0 auto;
width: 100%;
max-width: 600px;
}
.full-width-image img {
width: 100%;
max-width: 600px;
height: auto;
}
.full-width-image h1{
margin: 0 auto;
font-size:22px;
border-bottom:3px solid #919191;
color:#3C3C3C;
padding-bottom:5px;
}
.inner {
padding: 10px;
}
p {
Margin: 0;
}
.h1 {
font-size: 21px;
font-weight: bold;
Margin-bottom: 18px;
}
.h2 {
font-size: 18px;
font-weight: bold;
Margin-bottom: 12px;
}
/* One column layout */
.one-column .contents {
text-align: left;
}
.one-column p {
padding:10px 0px 5px 5px;
color:#15717D;
font-size:20px;
font-family:sans-serif;
font-weight:bold;
}
.two-column{
background-color:#F36533;
padding:15px 0px 10px 35px;
}
.text1{
color:#FFFFFF;
font-size:22px;
font-family:sans-serif;
}
.text2{
color:#FFFFFF;
font-family:sans-serif;
font-size:12px;
}
.col-text{
padding-left:15px;
padding-top:10px;
font-size:16px;
font-family:sans-serif;
font-weight:bold;
color:#15717D;
}
.safety-text p{
font-size:21px;
font-weight:bold;
padding: 25px 0 25px 15px;
line-height:26px;
}
.safety-text span{
font-size:14px;
font-weight:lighter;
}
.safety-text a{
font-weight:bold;
color:#3C3C3C;
}
.brand-text{
padding:8px 0px 40px 15px;
font-size:30px;
color:#6FFEEC;
text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000;
}
.box-content p{
padding:20px 135px 5px 10px;
background-color:#000000;
<!-- width:420px; -->
}
.register-button{
background-color:#000000;
padding: 15px 0px 20px 10px;
}
.register-button p {
color:#15717D;
border:1px solid #FFFFFF;
border-radius:30px;
background-color:#FFFFFF;
width:220px;
text-align:center;
padding: 15px;
}
.indication-text p{
font-size: 20px;
width: 560px;
color:#72635C;
}
.indication-text{
padding:0px 0px 0px 20px;
line-height:2em;
}
.speakers-text{
padding:0 0 0 20px;
}
.list-items{
font-size: 20px;
color:#72635C;
font-weight:bold;
list-style:none;
}
li::before {
content: "•";
color: #F16532
}
.speaker-details1{
vertical-align:top;
padding-left: 15px;
}
.speaker-details2{
vertical-align:top;
padding-left: 15px;
}
.speaker-details2 h2{
color:#72635C;
}
.speaker-details2 p{
color:#FFFFFF;
border:1px solid #FFFFFF;
border-radius:30px;
background-color:#15717D;
width:220px;
text-align:center;
padding: 15px;
}
.bottom-text{
padding:15px 0 40px 10px;
}
.bottom-text p{
font-size: 19px;
color:#72635C;
}
.bottom-text a {
color:#72635C;
}
</style>
</head>
<body>
<center class="wrapper">
<div class="webkit">
<table class="outer" align="center">
<tr>
<td>
<div class="column">
<table class="outer" align="center">
<tr>
<td class="full-width-image">
<h1>Main Heading Goes here for the following template</h1>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="one-column">
<div class="column">
<table width="100%">
<tr>
<td class="inner contents">
<p>From:<br>
TO:<br>
Date:<br>
Subject:<br>
[Pre header]
</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="two-column">
<div class="column">
<table width="100%">
<tr>
<td class="two-column-img">
<img src="images/gsk-logo.png" alt="gsk" style="width:80px;height:55px;"/>
</td>
<td class="text1">
For HealthCare Professionals
</td>
</tr>
<tr>
<td colspan="2" class="text2">
<p style="font-size:12px;font-family:sans-serif;"><u>[Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.]</u></p>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="information-column">
<div class="column">
<table width="100%">
<tr>
<td class="col-text">
<u>Prescribing Information</u></p>
</td>
<td class="col-text">
<u>[Patient Information Leaflet]</u>
</td>
</tr>
<tr>
<td colspan="2" class="safety-text">
<p>
Important Safety Information<br>
<span>Lorem ipsum dolor sit amet, consectetur,sed to euismod temper incididunt<br>ut labore et dolore magna aquila.<a>Continued Below</a></span>
</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="one-column">
<div class="column">
<table width="100%">
<tr>
<td class="brand-text">
[BRAND LOGO,GENERIC,STRENGTHS]
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="one-column">
<div class="column">
<table width="90%" style="margin-left:10px;">
<tr>
<td class="box-content">
<p style="color:#FFFFFF;">You're invited to:</p>
<p style="color:#FFFFFF;">[Title,Speaker First name Last name] <br>[Work Area]</p>
<p style="color:#FFFFFF;">[Date] | [Time] | Website</p>
</td>
</tr>
<tr>
<td class="register-button">
<p>Register for Website</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="indication">
<div class="column">
<table width="100%">
<tr>
<td class="indication-text">
<h2>Indication</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="indication">
<div class="column">
<table width="100%">
<tr>
<td class="indication-text">
<h2>[Greeting Salutation]</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="indication">
<div class="column">
<table width="100%">
<tr>
<td class="indication-text">
<h2>[List of Website Listings]</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul class="list-items">
<li>
Unordered list item
</li>
<li>
Unordered list item
</li>
</ul>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="speakers-text">
<h2>Speakers</h2>
</td>
</tr>
<tr>
<td class="speakers-list">
<div class="column">
<table width="100%">
<tr>
<td class="inner">
<table class="contents">
<tr>
<td>
<img src="images/img1.png" width="270" height="185" alt="" />
</td>
<td class="speaker-details1" align="top">
<h3>[Follow MI template for speaker bio]</h3>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="speakers-list">
<div class="column">
<table width="100%">
<tr>
<td class="inner">
<table class="contents">
<tr>
<td>
<img src="images/img2.png" width="270" height="185" alt="" />
</td>
<td class="speaker-details2">
<h3>[Follow MI template for speaker bio]</h3>
</td>
</tr>
<tr>
<td colspan="2" class="full-text">
<h2>[Full Important Safety Information]</h2>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="speakers-list">
<div class="column">
<table width="100%">
<tr>
<td class="inner" style="border-top:5px solid #F36533;">
<table class="contents">
<tr>
<td>
<img src="images/img3.png" width="270" height="185" alt="" />
</td>
<td class="speaker-details2">
<h2>[Join and Speaker name text.]</h2>
<p>Register for Website</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="bottom-text">
<p>Please see full <u>Prescribing information</u>,including <u>[Patient Information Leaflet]</u>, for [PRODUCT(Generic)]</p><br>
<p>This email is intented for US healthcare professionals only.</p><br>
<p>To report SUSPECTED ADVERSE REACTIONS, contact MadhuriChiluka at 1-835-965-1254 of FAD at 1-756-FAD-8475 or <a>www.fad.div/telecomh</a>.</p><br>
<p>[PRODUCT] is a registered trademark of ABC.</p><br>
<p><u>[ABC LOGO]</u> © [YYYY] ABC group of companies.All rights reserved.Produced in INDIA.[Activity ID][Month YYYY]</p><br>
<p>Do not reply to this e-mail.Replies sent to this e-mail address are not received.</p><br>
<p>[MadhuriChiluka Response Center, P.O.Box 201, 1 Mreoo Dr.,Researchpark Park, NC 58794]</p><br>
<p>[If you are not interested in receiving further e-mail communications like this one,or if you received this message in error,please visit <a>www.contactus.abc.com/genius.html</a>]</p><br>
<p>[Third Party mailing address and 125-YGOO statment]</p><br>
<p><u>[Privacy Statement]</u></p>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</center>
</body>
</html>
I think you must learn the CSS responsive stuff.
And then try it out, if you stuck on something then come back.
http://learn.shayhowe.com/advanced-html-css/responsive-web-design/
Br Christoph
I have spent hours trying to create an email template that acutally works. I am trying to position DIVs next to each other in the BODY of an confirmation email, that is to be sent from my website. So in the resulting email I have this :
<div class="view-content" style="margin-bottom: 20px;">
<h3 style="margin: 0px;font-size: 14px;background-color: #eff1f7;border-top: 1px solid #dedede;border-left: 1px solid #dedede;border-right: 1px solid #dedede;padding: 15px 15px 0 15px;">TESTO 925 - temperaturmätare, typ K, radio, larm,</h3>
<div class="views-responsive-grid views-responsive-grid-horizontal views-columns-3 checkout">
<div class="views-row views-row-1 views-row-first" style="background-color: #eff1f7;border-bottom: 1px solid #dedede;border-left: 1px solid #dedede;border-right: 1px solid #dedede;margin: 0px;">
<div class="views-column views-column-1 views-column-first" style="color: #000;">
<div class="views-field views-field-line-item-label" style="float: left;"> <span class="views-label views-label-line-item-label" style="font-weight: bold;font-size: 13px;">Artikelnr: </span> <div class="field-content artikelnr">0560 9250</div> </div>
<div class="views-field views-field-commerce-unit-price" style="float: left;"> <span class="views-label views-label-commerce-unit-price" style="font-weight: bold;font-size: 13px;">Pris: </span> <div class="field-content price">995 kr</div> </div>
<div class="views-field views-field-quantity" style="float: left;"> <span class="views-label views-label-quantity" style="font-weight: bold;font-size: 13px;">Antal: </span> <div class="field-content antal">1</div> </div>
<div class="views-field views-field-commerce-total" style="float: left;"> <span class="views-label views-label-commerce-total" style="font-weight: bold;font-size: 13px;">Summa: </span> <div class="field-content price">995 kr</div> </div> </div>
</div>
</div>
</div>
As you can see I try to use float:left here, but I have also tried using display:table in the container (.view-content), and display:table-row and display:table-cell respectively in the other DIVs. Other things I tried is using display:block and display:inline-block... with no luck. So what am I doing wrong here? Why do the DIVS with the class views-field above refuse to position themselves next to each other? There are reasons why I cannot use a simple table, a bit to lengthy to explain here.
UPD: OK, so I finally have to give this up and use a simple table approach because of lacking support for positioning of DIV's in popular email clients like Outlook 2013...
No option should be considered except for table tag when creating Mailers.Even SendGrid prefers to send mail which are coded using table tag.
I prefer to two create two DIVs with different or same width,resulting in a total of 600px. Then, apply maxwidth to keep both DIVs stackable on mobile devices.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<table style="max-width:600px;font-family:Arial,Helvetica,sans-serif" align="center" width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td valign="top">
<table style="text-align:left" align="center" width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="width:100%;border:1px solid #dddddd" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="padding:5px 10px 5px 10px;border-bottom:3px solid #2e3192" valign="top">
<table style="max-width:600px" width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<img src="http://images.sixrevisions.com/2009/02/03-09_3d_logo_tutorial.jpg" style="display:block;max-width:80%;margin-right:15px" align="left" border="0" class="CToWUd" width="150px" height="80px">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="font-family:Arial;font-size:15px;padding-top:9px;padding-bottom:9px" width="100%">
<span style="color:#000000;font-weight:bold;font-size:15px;padding-left:9px;font-family:arial">Dear</span>
<span style="font-size:14px;font-weight:bold">Amandeep,</span>
<br>
</td>
</tr>
<tr>
<td><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="background:#f1f1f1;padding:7px">
<table style="font-family:Arial;font-size:14px" border="0" bgcolor="#ffffff" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="background:#ffffff;padding:10px">
<table style="font-family:Arial;font-size:14px" border="0" bgcolor="#ffffff" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<h1 style="color:#4e4e4e;font-size:18px;font-weight:bold;display:inline;padding-right:10px">Teddybear Soft Toy </h1>
</td>
</tr>
<tr>
<td colspan="" rowspan="" headers="" style="border-bottom:1px solid #c4c4c4;padding-top:10px"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center">
<div style="display:inline-block;max-width:350px;width:100%;vertical-align:middle">
<table style="padding:5px;font-family:Arial;font-size:13px" border="0" bgcolor="#ffffff" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="2">We Want To Buy Teddybear Soft Toy. Kindly share the quotation for the same.</td>
</tr>
</tbody>
</table>
</div>
<div style="display:inline-block;max-width:220px;width:100%;text-align:center;vertical-align:middle">
<table align="center" width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center"><a style="padding:10px 20px;text-align:center;text-decoration:none;font-weight:bold;border:1px solid #5e9122;background:#5e9122;background:-webkit-gradient(linear,left top,left bottom,from(#5e9122),to(#5e9122));background:-moz-linear-gradient(top,#5e9122,#5e9122);color:#ffffff;border-radius:4px;font-size:17px;width:200px;display:table-cell;margin-left:auto;margin-right:auto" rel="external" href="#">Contact Buyer
</a></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
You can test your Mailer from this site PUTSMAIL
Works like a charm on all Mail clients.
I'll go ahead and post my example as well. Sudhir Kaushik's example looks good.
<head>
<style>
#outlook a{padding:0}body{width:100%!important;background-color:#333;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;margin:0!important;padding:0!important}.ReadMsgBody{width:100%}.ExternalClass{width:100%}ol li{margin-bottom:15px}img{height:auto;line-height:100%;outline:none;text-decoration:none}#backgroundTable{height:100%!important;margin:0;padding:0;width:100%!important}p{margin:1em 0}h1,h2,h3,h4,h5,h6{color:#222!important;font-family:Arial,Helvetica,sans-serif;line-height:100%!important}table td{border-collapse:collapse}.yshortcuts,.yshortcuts a,.yshortcuts a:link,.yshortcuts a:visited,.yshortcuts a:hover,.yshortcuts a span{color:#000;text-decoration:none!important;border-bottom:none!important;background:none!important}.im{color:#000}div[id='tablewrap']{width:100%;max-width:600px!important}table[class='fulltable'],td[class='fulltd']{max-width:100%!important;width:100%!important;height:auto!important}#media screen and (max-device-width: 430px),screen and (max-width: 430px){td[class=emailcolsplit]{width:100%!important;float:left!important;padding-left:0!important;max-width:430px!important}td[class=emailcolsplit] img{margin-bottom:20px!important}}
</style>
</head>
<body style='width:100% !important; margin:0 !important; padding:0 !important; -webkit-text-size-adjust:none; -ms-text-size-adjust:none; background-color:#FFFFFF;'>
<table border='0' cellpadding='0' align='center' cellspacing='0' id='backgroundTable' style='height:auto !important; margin:0; padding:0; width:100% !important; background-color:#333; color:#222222;'>
<tr>
<td>
<div id='tablewrap' align='center' style='width:100% !important; max-width:600px !important; text-align:center !important; margin-top:0 !important; margin-right: auto !important; margin-bottom:0 !important; margin-left: auto !important;'>
<table align='center' border='0' cellpadding='0' cellspacing='0' id='contenttable' style='background-color:#FFFFFF; text-align:center !important; margin-top:0 !important; margin-right: auto !important; margin-bottom:0 !important; margin-left: auto !important; border:none; width: 100% !important; max-width:600px !important;'
width='600'>
<tr>
<td width='100%'>
<table bgcolor='#FFFFFF' border='0' cellspacing='0' style='padding-right:25px' width='100%'>
<tr>
<td bgcolor='#FFFFFF' style='text-align:right;' width='100%'>
<a href='#'><img alt='Main banner image and link' border='0' src='http://placehold.it/72x100' style='display:inline-block; max-width:72px !important; width:100% !important; height:auto !important;'></a>
</td>
</tr>
</table>
<table bgcolor='#FFFFFF' border='0' cellpadding='25' cellspacing='0' width='100%'>
<tr>
<td bgcolor='#FFFFFF' style='text-align:left;' width='100%'>
<p style='color:#222222; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:19px; margin-top:0; margin-bottom:20px; padding:0; font-weight:normal;'>
Dear Customer,
</p>
<p style='color:#222222; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:19px; margin-top:0; margin-bottom:20px;margin-left:20px; padding:0; font-weight:normal;'>
Lorem ipsum dolor sit amet, consectetur adipiscing 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>
<table border='0' cellpadding='0' cellspacing='0' class='emailwrapto100pc' width='100%'>
<tr>
<td align='right' class='emailcolsplit' valign='top' width='100%'>
<p style='color:#222222; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:19px; margin-top:0; margin-bottom:20px; margin-left:20px; padding:0; font-weight:normal; text-align:left;'>
Please call us at 555-555-5555 with any questions.
</p>
</td>
</tr>
<tr>
<td align='left' class='emailcolsplit' valign='top' width='58%'>
<address style='font-size:15px; margin: 0; line-height: 1.25em; font-family: Helvetica, Arial'>
<p>
<span style='font-weight:600; font-size: 18px'>Your Company Inc</span><br>
400 Tech Drive<br>
Some City, State 22222<br>
<abbr title='Phone'><strong>P:</strong></abbr>555.555.5555<br>
<strong>Email:</strong><a href='mailto:hr#yourcompany.com'>hr#yourcompany.com</a>
</p>
</address>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
So beautiful right? This formatting drives me crazy. My email was a response to customers, but I'm sure it can be easily applied to other scenarios. Good Luck!
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)