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>
I am trying to make the following page responsive. But when I hit 550px width I got the following result. If I go further down the resolution all my stuff will be slanted to the left except for the footer. I am a beginner trying to learn responsive design. I really appreciate all the help I can get. If you can provide a bit of explanation it will be great. All help is deeply appreciated. Thank you in advance.
https://jsfiddle.net/hansheung/Lhyk3s86/1/
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans">
<title>Benefits</title>
<style type="text/css">
body {
width: 100%;
background-color: #ffffff;
margin: 0;
padding: 0;
font-family: 'Open Sans'
}
p,
h1,
h2,
h3,
h4 {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
html {
width: 100%;
}
table {
font-size: 14px;
border: 0;
}
/* ----------- responsivity ----------- */
#media only screen and (max-width: 640px) {
/*------ top header ------ */
.main-header {
font-size: 20px !important;
}
.main-section-header {
font-size: 28px !important;
}
.show {
display: block !important;
}
.hide {
display: none !important;
}
.align-center {
text-align: center !important;
padding-top: 20px;
}
.align-left {
text-align: left !important;
padding-bottom: 20px;
}
.no-bg {
background: none !important;
}
/*----- main image -------*/
.main-image img {
width: 640px !important;
height: auto !important;
}
/*-------- container --------*/
.container600 {
width: 460px !important;
}
/*-------- secions ----------*/
/* .section-img img {
width: 640px !important;
height: auto !important;
} */
}
#media only screen and (max-width: 600px) {
/*------ top header ------ */
.main-header {
font-size: 18px !important;
}
.main-section-header {
font-size: 26px !important;
}
/*-------- container --------*/
.container600 {
width: 400px !important;
}
/*-------- secions ----------*/
/* .section-img img {
width: 600px !important;
height: auto !important;
} */
}
.responsive{
width: 100%;
height: auto;
}
#font-face {
font-family: Kollektif Regular;
src: url(http://www.talent-trust.com/public-html/fonts/Kollektif.woff);
}
#font-face {
font-family: Kollektif Bold;
src: url(http://www.talent-trust.com/public-html/fonts/Kollektif-Bold.woff);
}
#font-face {
font-family: Kollektif Italic;
src: url(http://www.talent-trust.com/public-html/fonts/Kollektif-Italic.woff);
}
#font-face {
font-family: Kollektik BoldItalic;
src: url(http://www.talent-trust.com/public-html/fonts/Kollektif-BoldItalic.woff);
}
.text{
color: #2d2a26;
font-size: 16px;
line-height: 28px;
text-align: justify;
}
.singleLine{
line-height:16px;
}
.doubleLine{
line-height:40px;
}
.subtitle{
font-size: 20px;
color:#FF7F30;
}
.text-color{
color: #ffffff;
font-size: 14px;
line-height: 23px;
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- header -->
<table width="100%" bgcolor="ffffff">
<tr>
<td >
<table align="center" width="600" class="container600">
<tr>
<td height="10" > </td>
</tr>
<tr>
<td>
<table border="0" align="center" width="600" class="container600">
<tr>
<td class="section-img">
<a href="http://www.talent-trust.com" ><img src="http://www.talent-trust.com/documents/img/j19-ttc_header.png" width="640"/></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end header -->
<!-- big banner section -->
<table width="100%" >
<tr>
<td align="center" valign="top" style="background:#ffffff url(http://www.talent-trust.com/documents/img/j19-ttc_banner.jpg);background-repeat:no-repeat;background-position:center;background-size:cover;border-top:0;border-bottom:0;padding-top:150px;padding-bottom:150px">
<table align="center">
<tr>
<td valign="top"></td>
</tr>
</table>
</td>
</tr>
</table>
<!--end banner-->
<table border="0" align="center" width="70%" cellpadding="0" cellspacing="0" class="container600">
<tr>
<td style="line-height: 50px;"> </td>
</tr>
<tr>
<td align="justified" style="color: #053D56; font-size: 40px; font-family: Kollektif; line-height: 28px;">
<p>Member Benefits</p>
</td>
</tr>
<tr>
<td class="doubleLine"> </td>
</tr>
<tr>
<td class="text">
At TTc, we aim to give missionaries the security, physical health, mental health, and wellness support and resources that they need to excel in their calling and stay in the field longer.
</td>
</tr>
<tr>
<td class="doubleLine"> </td>
</tr>
<tr>
<td align="center">
<table border="0" width="70%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ff7f30">
<tr>
<td height="2" style="font-size: 2px; line-height: 2px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- 2 Column Blog Layout-->
<table width="100%">
<tr>
<td align="center">
<table border="0" align="center" width="100%" cellpadding="0" cellspacing="0" class="container600">
<tr>
<td>
<table width="50%" align="left" cellpadding="80px" cellspacing="0" class="container600">
<tr>
<td class="align-center">
<div>
<p style="color: #053D56; font-size: 30px; font-family: Kollektif; line-height: 28px;">Keeping your costs down</p>
<br>
<p class="text">We know cost is a big deal, so we provide multiple ways to keep costs down:</p>
<br>
<p class="text">
No Claims Bonus – We reward our members for staying healthy, which helps us to keep our premiums down. See how you can save up to 50% of your premium. <a href="http://www.talent-trust.com/benefits/ncb.html" target="blank" >Read more…</a>
</p>
<br>
</div>
</td>
</tr>
</table>
<table width="50%" align="right" cellpadding="80px" cellspacing="0" class="container600">
<tr>
<td class="align-center">
<div >
<p style="color: #053D56; font-size: 30px; font-family: Kollektif; line-height: 28px;">Tailored Services help you THRIVE Long-Term</p>
<br>
<p class="text">We look at what services and technology we can offer that will help our members to stay in the field longer.</p>
<br>
<p class="text">
vHealth – a 24/7 service that connects you to a European based family doctor from anywhere in the world for free. Using an app on your phone, you can video call or have a vHealth doctor visit whenever and wherever you need it. <a href="http://www.talent-trust.com/benefits/vhealth.html" target="blank" >Read more…</a>
</p>
<br>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="50" style="font-size: 50px; line-height: 50px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end section -->
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td height="50" style="font-size: 30px; line-height: 30px;"> </td>
</tr>
</table>
<!-- end section -->
<!-- contact section -->
<table width="100%" bgcolor="#053D66">
<tr>
<td height="40" style="font-size: 40px; line-height: 40px;"> </td>
</tr>
<tr>
<td >
<table width="600" cellpadding="0" cellspacing="0" bgcolor="#ff7f30">
<tr>
<!-- <td height="2" style="font-size: 2px; line-height: 2px;"> </td> -->
</tr>
</table>
</td>
</tr>
<tr>
<td >
<table align="center" width="700" class="container600">
<tr>
<td>
<table width="300" align="left" cellpadding="0" cellspacing="0" class="container600">
<tr>
<!-- logo -->
<td align="right" class="align-center">
<a href="http://www.talent-trust.com" ><img width="200" border="0" style="display: block; width: 200px;" src="http://www.talent-trust.com/documents/img/j19-logo_footer.png" alt="" /></a>
</td>
</tr>
<tr>
<td height="25"> </td>
</tr>
<tr>
<td style="text-align:right;" class="align-left"><img width="24" height="24" src="http://www.talent-trust.com/documents/img/j19-fb_icon.png" ></td>
</tr>
</table>
<table width="2" align="left" cellpadding="20" cellspacing="0" style="border-collapse:collapse;" class="container600">
<tr>
<td class="hide" width="2" height="25"></td>
</tr>
</table>
<table width="250" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse;" class="container600">
<tr>
<td align="left">
<div class="text-color">
Email us: abc#hotmail.com
</div>
</td>
</tr>
<tr>
<td height="15" style="font-size: 15px; line-height: 15px; color: #ffffff;">Tel: +604-899-8945</td>
</tr>
<tr>
<td height="33" style="font-size: 33px; line-height: 33px;"></td>
</tr>
<tr>
<td>
<table align="left" cellpadding="0" cellspacing="0">
<tr>
<td class="text-left p1"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-youtube_icon.png" ></td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="60"> </td>
</tr>
</table>
<!-- end section -->
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!!
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 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/