I am creating an email template to send out to a few people, however, for some reason I am running in to some trouble placing a simple left-hand side border on the two right-hand side table cells.
<table class="content" style="table-layout:fixed; background: none repeat scroll 0% 0% #FFFFFF; width: 600px; max-width: 600px; margin: 0px auto;" cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#FFFFFF">
<thead cellspacing="0" cellpadding="0" border="0">
<tr style="width: 100%; background: red;" bgcolor="red" cellspacing="0" cellpadding="0" border="0">
<td style="width: 70%;" rowspan="2" align="left" valign="middle" colspan="8" cellspacing="0" cellpadding="0" border="0">
<h1>
<a style="text-decoration: none; font-weight: normal; letter-spacing: -1.5px; line-height: 22px; color: #ffffff; font-size: 22px; padding: 20px 20px 20px 20px;" href="#">
<img src="http://dummyimage.com/178x32/000000/fff.jpg&text=Image" alt="image" width="178" height="32" />
</a>
</h1>
</td>
<td style="width: 30%; border-left: 1px solid #FFFFFF;" align="right" colspan="4" cellspacing="0" cellpadding="0" border="0">
<table cellspacing="0" cellpadding="0" border="0">
<tbody cellspacing="0" cellpadding="0" border="0">
<tr cellspacing="0" cellpadding="0" border="0">
<td cellspacing="0" cellpadding="0" border="0" style="color: #ffffff; text-align: center; padding: 20px 20px 20px 20px; border-bottom: 1px solid #FFFFFF; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase;">Ipsum Dolor Sit</td>
</tr>
<tr cellspacing="0" cellpadding="0" border="0">
<td cellspacing="0" cellpadding="0" border="0" style="color: #ffffff; text-align: center; padding: 20px 20px 20px 20px;">
<a style="text-decoration: none; color: #ffffff; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase;" href="#" target="_blank">Cras Odio Ligula</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
JSFiddle
How do remove the empty space being created (which can be found in-between the vertical and horizontal lines) so that the template is laid out correctly?
I have given the inner table (inside the right-side <td> tag) a width of 100% and the empty space went away because the inner table spans the whole available width:
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody cellspacing="0" cellpadding="0" border="0">
...
</tbody>
</table>
If you do not define a width of 100% the table consumes only the amount of width it actually needs for all the content + padding + margin.
Fixed Fiddle
Give 100% width to the table inside 'td' having 30% width. Your problem will be solved.
Change this following code:
<td style="width: 21%; border-left: 1px solid #FFFFFF;" align="right" colspan="4" cellspacing="0" cellpadding="0" border="0">
<table cellspacing="0" cellpadding="0" border="0">
Related
I am setting up HTML template with 600 px as parent body width, but in outlook 2007 - 2019, full available width is being occupied.
Image is taking 100% of width in outlook versions but it should take only 600 px of width. For others, it is working fine.
Expected Image:
Error Image:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>test</title>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900"
rel="stylesheet"
type="text/css"
/>
<style type="text/css">
.main-wrapper .email_content p {
padding-left: 10px;
}
img {
max-width: 600px;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
table {
border-collapse: collapse !important;
}
#outlook a {
padding: 0;
}
table td {
border-collapse: collapse;
}
</style>
</head>
<body>
<table align="center" width="100%" class="main-wrapper">
<tr>
<td style="background-color: #dddddd">
<table
cellpadding="0"
cellspacing="0"
border="0"
width="100%"
style="font-family: Roboto, Arial; font-size: 13px"
>
<tr bgcolor="#eeeeee">
<td align="center">
<table cellpadding="0" cellspacing="0" width="600" border="0">
<tr>
<!-- <td style="padding: 20px 20px 20px 20px;"> -->
<td style="padding: 20px 0px 20px 0px">
<table
cellspacing="0"
cellpadding="0"
border="0"
width="100%"
style="box-shadow: 0px 0px 4px 2px #e0e0e0"
>
<tr bgcolor="#ffffff">
<!-- <td style="padding: 25px; border: 1px solid #e2e2e2; color: #666666;"> -->
<td style="color: #666666; padding: 0">
<table
cellpadding="0"
cellspacing="0"
border="0"
width="100%"
>
<tr>
<td
class="email_content"
style="
padding-bottom: 15px;
background-color: #fafafa;
"
>
<div
style="
padding: 5px;
border-radius: 4px 4px 0px 0px;
background-color: #fdaf74;
"
></div>
<!-- <img src="https://res.cloudinary.com/dyyjph6kx/image/upload/f_auto/webui/eng/xoxoday-logo.svg" height="40"> -->
<!-- <img src=https://xoxoday-dropbox-uat.s3.ap-southeast-1.amazonaws.com/image/clients/10178600000000000/platform_setting/First_American_Logo_0.jpg height="40"> -->
<img style="padding : 20px 0 0 25px;"
src=https://xoxoday-dropbox-uat.s3.ap-southeast-1.amazonaws.com/image/clients/10178600000000000/platform_setting/First_American_Logo_0.jpg
height="40">
</td>
</tr>
<tr>
<table style="margin: 0 7px">
<table
align="center"
width="100%"
class="main-wrapper"
style="border-bottom: 1px solid #eee"
>
<tr>
<td>
<table
cellpadding="0"
cellspacing="0"
border="0"
width="100%"
style="font-family: Roboto, Arial"
>
<tr bgcolor="#F2F2F2">
<td align="center">
<table
cellpadding="0"
cellspacing="0"
width="600"
border="0"
>
<tr>
<td>
<table
cellspacing="0"
cellpadding="0"
border="0"
width="100%"
>
<tr bgcolor="#ffffff">
<td>
<table
cellpadding="0"
cellspacing="0"
border="0"
width="100%"
>
<tr>
<td
style="
text-align: left;
font-size: 16px;
padding: 6px 0
10px 18px;
"
>
<p
style="
color: #1a1a1a;
"
>
Hi Sheetal
Chourasiya,
</p>
<p
style="
color: #505050;
"
>
You have
received Plum
E-Gift Card.
Congratulations!
</p>
</td>
</tr>
<tr>
<td
align="center"
>
<img
src="http://xoxoday-testing.s3.amazonaws.com/store/template/belatedBirthday/belated-happy-birthday-3.jpg"
style="
margin: 0;
border: 0;
padding: 0;
display: block;
"
width="600px"
height="300px"
alt="Image"
/>
</td>
</tr>
<tr>
<td
style="
padding: 24px
60px 0;
"
>
<table
cellpadding="0"
cellspacing="0"
border="0"
width="100%"
style="
text-align: left;
font-size: 14px;
background-color: #fafafa;
border-radius: 6px;
margin-bottom: 30px;
"
>
<tr>
<th
style="
padding: 24px
0 10px
24px;
text-align: left;
font-size: 16px;
color: #505050;
"
>
Plum
E-Gift
Card
</th>
<td
style="
text-align: right;
padding-right: 20x;
"
>
<a
href="https://docs.xoxoday.com/docs/getting-started-1"
target="_blank"
style="
color: #c7417b;
text-decoration: none;
display: none;
"
>What is
Plum?</a
>
</td>
</tr>
<tr
style="
box-shadow: 0px -1px
0 0 #eaeaea;
"
>
<td
style="
padding: 20px
0 20px
24px;
"
>
<table
cellpadding="0"
cellspacing="0"
border="0"
>
<tr>
<td>
<span
style="
color: #909090;
font-size: 16px;
margin: 0;
"
>Gift
Card
Code</span
>
</td>
</tr>
<tr>
<td>
<span
style="
color: #505050;
font-size: 20px;
margin: 6px
0
0
0;
font-weight: 500;
letter-spacing: 0.025rem;
"
>77m43dddb46b</span
>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</table>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Change this line:
<table align="center" style="width: 100%" class="main-wrapper">
To:
<table align="center" style="width: >100%" class="main-wrapper">
(>100% is a number smaller than 100, for example 90)
The initial width of a block-level element like div or p is auto.
Use [ width: auto ] to undo explicitly specified widths.
if you specify [ width:100% ], the element’s total width will be 100% of its containing block plus any horizontal margin, padding and border.
width: auto; will try as hard as possible to keep an element the same width as its parent container when additional space is added from margins, padding, or borders.
width: 100%; will make the element as wide as the parent container. Extra spacing will be added to the element's size without regard to the parent. This typically causes problems.
Check the image link below to get more information.
HTML Width - by Shashank
You have px value on your image of the birthday code it seems. I have removed it and updated your code slightly through and online cleaner. I am a dreamweaver user and your code was not working for me. If the below code has issues, just change the width value of your birthday image (belated-happy-birthday-3.jpg) and assign width value without the pixels.
Try out this code to see if it works for you.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
<style type="text/css">
.main-wrapper .email_content p {
padding-left: 10px;
}
img {
max-width: 600px;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
table {
border-collapse: collapse !important;
}
#outlook a {
padding: 0;
}
table td {
border-collapse: collapse;
}
</style>
</head>
<body>
<table align="center" width="100%" class="main-wrapper">
<tr>
<td style="background-color: #dddddd">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="font-family: Roboto, Arial; font-size: 13px">
<tr bgcolor="#EEEEEE">
<td align="center">
<table cellpadding="0" cellspacing="0" width="600" border="0">
<tr>
<!-- <td style="padding: 20px 20px 20px 20px;"> -->
<td style="padding: 20px 0px 20px 0px">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="box-shadow: 0px 0px 4px 2px #e0e0e0">
<tr bgcolor="#FFFFFF">
<!-- <td style="padding: 25px; border: 1px solid #e2e2e2; color: #666666;"> -->
<td style="color: #666666; padding: 0">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td class="email_content" style="padding-bottom: 15px; background-color: #fafafa;">
<div style="padding: 5px; border-radius: 4px 4px 0px 0px; background-color: #fdaf74;"></div><!-- <img src="https://res.cloudinary.com/dyyjph6kx/image/upload/f_auto/webui/eng/xoxoday-logo.svg" height="40"> --><!-- <img src=https://xoxoday-dropbox-uat.s3.ap-southeast-1.amazonaws.com/image/clients/10178600000000000/platform_setting/First_American_Logo_0.jpg height="40"> --><img src="https://xoxoday-dropbox-uat.s3.ap-southeast-1.amazonaws.com/image/clients/10178600000000000/platform_setting/First_American_Logo_0.jpg" alt="First_American_Logo_0" width="142" height="40" style="padding : 20px 0 0 25px;">
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="font-family: Roboto, Arial">
<tr bgcolor="#F2F2F2">
<td align="center">
<table cellpadding="0" cellspacing="0" width="600" border="0">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr bgcolor="#FFFFFF">
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="text-align: left; font-size: 16px; padding: 6px 0 10px 18px;">
<p style="color: #1a1a1a;">Hi Sheetal Chourasiya,</p>
<p style="color: #505050;">You have received Plum E-Gift Card. Congratulations!</p>
</td>
</tr>
<tr>
<td align="center"><img src="http://xoxoday-testing.s3.amazonaws.com/store/template/belatedBirthday/belated-happy-birthday-3.jpg" style="margin: 0; border: 0; padding: 0; display: block;" width="600" height="300" alt="Image"></td>
</tr>
<tr>
<td style="padding: 24px 60px 0;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="text-align: left; font-size: 14px; background-color: #fafafa; border-radius: 6px; margin-bottom: 30px;">
<tr>
<th style="padding: 24px 0 10px 24px; text-align: left; font-size: 16px; color: #505050;">Plum E-Gift Card</th>
<td style="text-align: right; padding-right: 20x;">
What is Plum?
</td>
</tr>
<tr style="box-shadow: 0px -1px 0 0 #eaeaea;">
<td style="padding: 20px 0 20px 24px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><span style="color: #909090; font-size: 16px; margin: 0;">Gift Card Code</span></td>
</tr>
<tr>
<td><span style="color: #505050; font-size: 20px; margin: 6px 0 0 0; font-weight: 500; letter-spacing: 0.025rem;">77m43dddb46b</span></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
The problem is in the following line:
<table align="center" style="width: 100%" class="main-wrapper">
When you use style = "width: 100%", you are saying that you want the width of the table to be the entire browser width; the width of the parent container and the margins combined.
There are a few ways you can fix this problem:
The first way is to use width: auto:
<table align="center" style="width: auto" class="main-wrapper">
Another way it to just set the pixels manually:
<table align="center" style="width: 600px" class="main-wrapper">
Or, you can just get rid of the style as a whole so it'll auto fit to the parent width:
<table align="center" class="main-wrapper">
All three of these methods will produce the same result.
I'm formatting a table on 2 rows with 3 images but the 2nd image in each row keeps dipping down and hugging to the wrong direction. I'm not sure what's causing it.
This is for an email and I'm just trying to pick apart some of the template to better fit my needs, thus all that inline CSS.. The responsiveColumn class is just for a media query just an fyi.
<!-- 2nd Image -->
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="34%" valign="top" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 5px; padding-bottom: 20px; padding-left: 5px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div class="" style="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td>
<p style="text-align: center;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div></td></tr>
</tbody></table></td>
I put it in jsfiddle so you can see it more clearly. You'll see how the 2nd image in each row just dips down and moves to the left opposed to keeping everything evenly on one line
https://jsfiddle.net/9f5c2zh6/1/
Remove the padding-top
<td style="padding-top: 20px;padding-right: 5px;padding-bottom: 20px;padding-left: 5px;background-color: #ffffff;color: #000000;" valign="top" bgcolor="#ffffff">
This is why we avoid inline styles because it's difficult to debug, However after some fiddling around, i found some problems
First: certain p elements have the following styles, And some others don't
p {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding: 0;
}
Second: certain td elements have the following styles, And some others don't
td {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
color: #000000;
}
The fix is to add the missing styles to where they belongs so everything is aligned nicely together
td {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
color: #000000;
}
p {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding: 0;
}
<tr>
<td width="100%" valign="top" style="color: #000000;">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="33%" valign="top" bgcolor="#ffffff">
<!-- 1st Image -->
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 0px; padding-bottom: 20px; padding-left: 20px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div class="" style="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: #000000;">
<p style="margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; padding: 0;">
<img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="border: 0px solid #000000; display: block;" width="175" height="150">
</p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<!-- 2nd Image -->
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="34%" valign="top" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 5px; padding-bottom: 20px; padding-left: 5px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div class="" style="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td>
<p style="text-align: center;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<!-- 3rd Image -->
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="33%" valign="top" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 0px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div style="" class="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td style="color: #000000;">
<p style="margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; padding: 0;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="float: right; border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- end 3 column section -->
<!-- 3 column section -->
<tr>
<td width="100%" valign="top" style="color: #000000;">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="33%" valign="top" bgcolor="#ffffff">
<!-- 1st Image on 2nd row -->
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 0px; padding-bottom: 20px; padding-left: 20px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div class="" style="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: #000000;">
<p style="margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; padding: 0;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<!-- 2nd Image on 2nd row -->
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="34%" valign="top" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 5px; padding-bottom: 20px; padding-left: 5px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div class="" style="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td>
<p style="text-align: center;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<!-- 3rd Image on 2nd row -->
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="33%" valign="top" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 0px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div style="" class="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td style="color: #000000;">
<p style="margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; padding: 0;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="float: right; border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
I'm new to Dreamweaver and I have no idea how to code, but I managed to make an HTML newsletter. But the issue now is, whenever I send it via Gmail, my pictures are shown as alt_text.
The images are on the same folder as the newsletter.html file.
What am I doing wrong?
Here's the document and images for download if anyone needs it:
https://drive.google.com/file/d/0B6idya0YoPGnekc5V28tRGljWDQ/view
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>EmailTemplate-Responsive</title>
<style type="text/css">
html, body {
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
.ExternalClass {
width: 100%;
}
div[style*="margin: 16px 0"] {
margin: 0 !important;
}
table, td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
img {
-ms-interpolation-mode: bicubic;
}
.yshortcuts a {
border-bottom: none !important;
}
a[x-apple-data-detectors] {
color: inherit !important;
}
</style>
<style type="text/css">
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td:hover,
.button-a:hover {
background: #555555 !important;
border-color: #555555 !important;
}
#media screen and (max-width: 600px) {
.email-container {
width: 100% !important;
}
.fluid,
.fluid-centered {
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
}
</style>
</head>
<body bgcolor="#e0e0e0" width="100%" style="margin: 0;" yahoo="yahoo">
<table bgcolor="#e0e0e0" cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" style="border-collapse:collapse;">
<tr>
<td><center style="width: 100%;">
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;"> (Optional) This text will appear in the inbox preview, but not the email body. </div>
<!-- Visually Hidden Preheader Text : END -->
<!-- Email Header : BEGIN -->
<table align="center" width="600" class="email-container">
<tr>
<td style="padding: 20px 0; text-align: center"><img src="Headers.png" width="600" height="150" alt="" border="0"></td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="600" class="email-container">
<tr> </tr>
<tr>
<td background="SJCAM-Logo.png" bgcolor="#222222" valign="middle" style="text-align: center; background-position: center center !important; background-size: cover !important;"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:175px; background-position: center center !important;">
<v:fill type="tile" src="assets/Responsive/Image_600x230.png" color="#222222" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="middle" style="text-align: center; padding: 40px; font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #ffffff;"> </td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 10px;"><table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="M20.png" width="270" height="270" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">16MP<br>
4K#24fps<br>
2K#30fp<br>
1080P#60fps<br>
Sony IMX206 sensor <br>
NTK96660 Novatek CPU <br>
Gyro Anti-shake & WiFi </td>
</tr>
</table></td>
<td class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="SJ6LegendAir.png" width="270" height="270" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">14MP<br>
4K#24fps <br>
2K#30fp <br>
1080P#60fps <br>
Panasonic MN34112PA sensor <br>
SJCAM A9s CPU <br>
Gyro Anti-shake & WiFi<br></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 10px;"><table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="SJ6Legend.png" width="270" height="270" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">16MP <br>
4K#24fps <br>
2K#30fp <br>
1080P#60fps <br>
Panasonic MN34120PA sensor<br>
NTK96660 Novatek CPU <br>
Gyro Anti-shake & WiFi</td>
</tr>
</table></td>
<td class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="SJ7Star.png" width="270" height="270" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">16MP <br>
4K#30fps <br>
2K#60/30fp <br>
1080P#120/60fps <br>
Sony IMX117 sensor<br>
Ambarella A12S75 CPU<br>
Gyro Anti-shake & WiFi</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 10px;"><table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="33.33%" class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="Battery.png" width="170" height="170" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">1000mAh high capacity substitutive Li-ion battery is the best choice for keeping your action camera away from powering off. For SJ6 Legend and S7 Star.<br>
<br></td>
</tr>
</table></td>
<td width="33.33%" class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="DualBatteryCharger2.png" width="170" height="170" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">2-slot battery charger for SCJAM SJ6 Legend or SJ7 Star.<br>
<br>
<br>
<br>
<br>
<br></td>
</tr>
</table></td>
<td width="33.33%" class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="EXTERNAL-MIC.png" width="170" height="170" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow"> External Microphone for SJ6 Legend, SJ7 Star and SJ360<br>
<br>
<br>
<br>
<br>
<br></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td dir="ltr" align="center" valign="top" width="100%" style="padding: 10px;"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="33.33%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="padding: 0 10px;"><img src="RemoteWatch.png" width="170" alt="alt_text" border="0" class="center-on-narrow"></td>
</tr>
</table></td>
<td width="66.66%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 10px; text-align: left;" class="center-on-narrow"><font color="#111111"><strong>Smart Remote WristWatch</strong></font><br>
<br>
Smart Remote Wristwatch, features include: Power, Video-Photo, WiFi on/off, Burst mode, Waterproof up to 3 meters.<br>
<br>
<table cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:left;">
<tr> </tr>
</table>
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td dir="rtl" align="center" valign="top" width="100%" style="padding: 10px;"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="33.33%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="padding: 0 10px;"><img src="Selfiestick.png" width="170" alt="alt_text" border="0" class="center-on-narrow"></td>
</tr>
</table></td>
<td width="66.66%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 10px; text-align: left;" class="center-on-narrow"><font color="#111111"><strong><br>
Remote Controller Selfie Stick</strong></font> <br>
<br>
Smart Remote Controller features include: Power, Video-Photo, WiFi on/off, Burst mode, Waterproof up to 3 meters.<br>
Folded Length (mm): 280 ; Extended Length (mm):900<br>
<br>
<table><br>
</table>
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table align="center" width="600" class="email-container">
<tr>
<td style="padding: 40px 10px;width: 100%;font-size: 12px; font-family: sans-serif; mso-height-rule: exactly; line-height:18px; text-align: center; color: #888888;"><webversion style="color:#cccccc; text-decoration:underline; font-weight: bold;">View as a Web Page</webversion>
<br>
<br>
SIA AVEX<br>
Katlakalna iela 9,Rīga<br>
3. Stāvs<br>
<br>
<br><unsubscribe style="color:#888888; text-decoration:underline;">unsubscribe</unsubscribe></td>
</tr>
</table>
</center></td>
</tr>
</table>
</body>
</html>
I have an issue with excess padding appearing around either the table or image on mobile with a HTML email signature and I'm unable to find the solution.
I must of tried every single solution I have researched including:
Adding display:block to the image
Adding a line-height: 1px to the td
Adding font-size: 0; to the td
Making sure every section had padding: 0; and margin: 0;
Adding cellpadding="0" and cellspacing="0" to all tables, tr and td elements
Adding width and height to the table and td (which didn't have any effect)
Adding float: left and align="left"
Adding table-layout:fixed;
Adding border: 0; border-spacing: 0; and border-collapse; on elements
The issue seems to appear on Samsung and iPhone devices that I have tested.
Any new suggestions would be appreciated.
The image that specifically has extra spacing is here:
<table align="left" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; table-layout:fixed; mso-table-lspace:0pt;mso-table-rspace:0pt; padding:0; margin: 0; float:left; line-height: 1px; font-size: 0;" width="180">
<tr style="padding: 0; margin: 0;">
<td valign="bottom" style="padding:0 25px 0 0; margin:0; font-size: 0 !important;" cellpadding="0" cellspacing="0"><img src="logo.png" width="" alt="" style="display: block !important;"></td>
</tr>
</table>
How here is the entire code as I have two tables side by side which may be the cause of the issue:
<!DOCTYPE html>
<html>
<head>
<style>
a {
color: #00001b;
text-decoration: underline;
}
table {
padding: 0;
margin: 0;
display: block;
}
</style>
</head>
<body>
<table style="font-family: Helvetica, sans-serif; max-width: 367px;" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<table style="border-bottom: 3px solid #000; padding-bottom: 8px;" width="367" cellspacing="0">
<tr style="padding: 0; margin: 0;">
<td cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace:0pt;mso-table-rspace:0pt; padding:0; margin: 0;" border="0" height="10">
<table align="left" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; table-layout:fixed; mso-table-lspace:0pt;mso-table-rspace:0pt; padding:0; margin: 0; float:left; line-height: 1px; font-size: 0;" width="180">
<tr style="padding: 0; margin: 0;">
<td valign="bottom" style="padding:0 25px 0 0; margin:0; font-size: 0 !important;" cellpadding="0" cellspacing="0"><img src="logo.png" width="" alt="" style="display: block !important; padding: 0; margin: 0;"></td>
</tr>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; mso-table-lspace:0pt;mso-table-rspace:0pt; margin: 0; padding: 0 0 7px 0; line-height:1px; font-size:0; float:left;">
<tr>
<td cellpadding="0" cellspacing="0" width="165" style="text-align: left;">
<strong style="font-size: 16px; font-family: Garamond;">First Name Last Name</strong><br />
<span style="font-size: 11px; line-height: 100%;"><em>Job Title / GIA GG, BA</em></span><br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<p style="font-size: 11px; line-height: 160%; margin: 10px 0;">
<strong>T:</strong> 00000000 |
<strong>W:</strong> www.website.com.au<br /> Street Address | City | State Postcode</p>
<p style="margin:6px 0;"><img src="facebook.png" alt="Facebook" width="28" height="28"> <img src="instagram.png" alt="Instagram" width="28" height="28"></p>
</td>
</tr>
</table>
</body>
</html>
<table style="font-family: Helvetica, sans-serif; max-width: 367px;" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<table style="border-bottom: 3px solid #000; padding-bottom: 8px;" width="345" cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="top">
<table align="left" cellpadding="0" cellspacing="0" border="0" width="180">
<tr>
<td valign="bottom" cellpadding="0" cellspacing="0"><img src="logo.png" width="180" height="100" alt="" style="display: block"></td>
</tr>
</table>
</td>
<td valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="165">
<tr>
<td style="text-align: left;padding:0 0 0 25px;">
<strong style="font-size: 16px; font-family: Garamond;">First Name Last Name</strong><br />
<span style="font-size: 11px; line-height: 100%;"><em>Job Title / GIA GG, BA</em></span><br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<p style="font-size: 11px; line-height: 160%; margin: 10px 0;">
<strong>T:</strong> 00000000 |
<strong>W:</strong> www.website.com.au<br /> Street Address | City | State Postcode</p>
<p style="margin:6px 0;"><img src="facebook.png" alt="Facebook" width="28" height="28"> <img src="instagram.png" alt="Instagram" width="28" height="28"></p>
</td>
</tr>
</table>
You may want to add a </td><td> between your two tables. I've also moved the 25px padding to the left of the copy, rather than the image. (I've assumed the img dimensions here). This looked ok on my EoA previews, if it doesn't help could you post a screenshot of your issue?
Code it like an email! Try the hybrid method! This method allows you to cater for outlook email clients and the use of divs means you dont have to worry about the extra gaps.
<table style="font-family: Helvetica, sans-serif; max-width: 367px;" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<table style="border-bottom: 3px solid #000; padding-bottom: 8px;" width="367" cellspacing="0">
<tr style="padding: 0; margin: 0;">
<td style="text-align: center; vertical-align: top; font-size: 0px; padding: 0px; width: 367px;">
<!--[if (gte mso 9)|(IE)]>
<table width="367" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="180">
<![endif]-->
<div style="width: 180px; display: inline-block; vertical-align: top;">
<table align="left" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; table-layout:fixed; mso-table-lspace:0pt;mso-table-rspace:0pt; padding:0; margin: 0; float:left; line-height: 1px; font-size: 0;" width="100%">
<tr style="padding: 0; margin: 0;">
<td valign="bottom" style="padding:0 25px 0 0; margin:0; font-size: 0 !important;" cellpadding="0" cellspacing="0"><img src="logo.png" width="" alt="" style="display: block !important; padding: 0; margin: 0;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="180">
<![endif]-->
<div style="width: 180px; display: inline-block; vertical-align: top;">
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; mso-table-lspace:0pt;mso-table-rspace:0pt; margin: 0; padding: 0 0 7px 0; line-height:1px; font-size:0; float:left;" width="100%">
<tr>
<td cellpadding="0" cellspacing="0" width="165" style="text-align: left;">
<strong style="font-size: 16px; font-family: Garamond;">First Name Last Name</strong><br />
<span style="font-size: 11px; line-height: 100%;"><em>Job Title / GIA GG, BA</em></span><br />
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<p style="font-size: 11px; line-height: 160%; margin: 10px 0;">
<strong>T:</strong> 00000000 |
<strong>W:</strong> www.website.com.au<br /> Street Address | City | State Postcode</p>
<p style="margin:6px 0;"><img src="facebook.png" alt="Facebook" width="28" height="28"> <img src="instagram.png" alt="Instagram" width="28" height="28"></p>
</td>
</tr>
</table>
Let me know if this method works for you.
I'm having an issue with an email I am coding that I haven't been able to find an answer to. I have an area that appears alright when viewing the HTML file in the browser but GMail and browsers like Firefox and IE are causing some problems. Alignments get screwed up, images don't sit in the right place, etc. I think the problem I am having is that in certain browsers my right column with text gets pushed beneath my bullet column. I was wondering if any can find some flaws in my code that might help me. Here's the section that's giving me trouble:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ISSGT 2013</title>
</head>
<body>
<!--Header-->
<table border="0" align="center" cellpadding="0" cellspacing="0" style="border-collapse:0px;margin-bottom:5px;">
<tr>
<td>
<img src="header.jpg" alt="Header" height="86" width="600" style="display:block;border:0;vertical-align:bottom;"/>
</td>
</tr>
</table>
<!--Headline-->
<table width="600" border="0" align="center" cellspacing="0">
<tr>
<td align="center" style="background-color:#436ead; padding-top:10px; padding-right:30px; padding-bottom:10px; padding-left:30px;">
<table cellspacing="0">
<tr>
<td style="font-family:Arial, Helvetica, sans-serif;font-size:19px;line-height:22px;font-weight:normal;color:#fff;text-align:center;margin-top:-15px;">The 4th Annual IEEE PES Conference on<br />Innovative Smart Grid Technologies is less than<br /><span style="font-family:Arial, Helvetica, sans-serif;font-size:44px;line-height:43px;font-weight:bold;color:#fff;text-align:center;">6 WEEKS AWAY!</span></td>
</tr>
</table>
</td>
</tr>
</table>
<!--Body-->
<table align="center" cellspacing="0" style="margin-top:10px; vertical-align:top;">
<tr>
<td width="540" style="font-family:Arial, Helvetica, sans-serif;font-size:17px;line-height:18px;font-weight:bold;color:#141313;text-align:left;">Very soon, hundreds of your colleagues – smart grid practitioners, executives, researchers and policy makers – will gather in Washington D.C. to review and discuss ground–breaking innovations in smart grid technologies.</td>
</tr>
</table>
<table align="center" cellspacing="0" style="margin-top:10px;vertical-align:top;">
<tr>
<td align="center" cellpadding="0" cellspacing="0" style="border-collapse:0px;vertical-align:top;">
<table width="540" align="center" cellspacing="0" style="margin-top:10px;vertical-align:top;">
<tr>
<td height="auto" width="540" style="font-family:Arial, Helvetica, sans-serif;font-size:17px;line-height:18px;font-weight:normal;color:#141313;text-align:left;margin-top:10px">In addition to the impressive roster of keynote speakers, and presentations by recognized leaders in the field, here are some compelling reasons <span style="font-family:Arial, Helvetica, sans-serif;font-size:17px;line-height:18px;font-weight:bold;color:#141313;text-align:left;">why you MUST attend this year’s event: </span></td>
</tr>
</table>
<!--Container-->
<table height="auto" width="600" align="center" cellspacing="0" cellpadding="0" style="margin-top:15px;border-collapase:0px;vertical-align:top;">
<tr>
<!--Image-->
<td height="298" width="243" cellpadding="0" cellspacing="0" style="font-size:0px;line-height:0px;border-collapse:0px;"><img src="dc1.jpg" alt="Washington DC" height="298px" width="243px" style="display:block;border:0;overflow:hidden;margin:0px;padding:0px;vertical-align:bottom;font-size:0px;line-height:0px;"/></td>
<!--Bullet Container-->
<td style="vertical-align:top;border:0;border-collapse:0;">
<table height="auto" width="357" cellspacing="0" align="center" style="vertical-align:top;border-collapse:0px;float:right;display:inline;">
<!-- Bullet 1-->
<tr>
<td height="auto" width="8" cellpadding="0" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;color:#141313;text-align:left;float:left;font-weight:bold;text-align:left;vertical-align:top;border-collapse:0px;">•</td>
<td height="auto" width="311" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;color:#141313;float:right;text-align:left:10px;padding-right:30px;"><span style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;font-weight:bold;color:#168116;text-align:left;margin-right:3px;">RESULTS:</span>Learn about real-practice technology, deployment experience, and customer acceptance issues related to smart grid.</td>
</tr>
<!-- Bullet 2-->
<tr>
<td height="auto" width="8" cellpadding="0" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;color:#141313;text-align:left;float:left;font-weight:bold;text-align:left;vertical-align:top;padding-top:10px;border-collapse:0px;">•</td>
<td height="auto" width="311" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;color:#141313;float:right;text-align:left:10px;padding-top:10px;padding-right:30px;"><span style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;font-weight:bold;color:#168116;text-align:left;margin-right:3px;">NETWORKING:</span>Meet and speak directly with industry leaders, regulators and entrepreneurs working with the smart grid.</td>
</tr>
<!-- Bullet 3-->
<tr>
<td height="auto" width="8" cellpadding="0" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;color:#141313;text-align:left;float:left;font-weight:bold;text-align:left;vertical-align:top;padding-top:10px;border-collapse:0px;">•</td>
<td height="auto" width="311" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;color:#141313;float:right;text-align:left:10px;padding-top:10px;padding-right:30px;"><span style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;font-weight:bold;color:#168116;text-align:left;margin-right:3px;">OPPORTUNITY:</span>International speakers will report on real success stories and pitfalls – as well as current business.</td>
</tr>
<!-- Bullet 4-->
<tr>
<td height="auto" width="8" cellpadding="0" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;color:#141313;float:left;font-weight:bold;text-align:left;vertical-align:top;padding-top:10px;border-collapse:0px;">• </td>
<td height="auto" width="311" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;color:#141313;float:right;text-align:left:10px;padding-top:10px;padding-right:30px;"><span style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;font-weight:bold;color:#168116;text-align:left;margin-right:3px;">RESEARCH:</span>Noted academics and practitioners talk candidly about their work in making smart grid a cost-effective proposition.</td>
</tr>
</table>
</td>
</tr>
</table>
<table height="auto" width="600" align="center" cellspacing="0" cellpadding="0" style="border-collapse:0px;font-size:0px;line-height:0px;">
<tr>
<td><img src="dc2.jpg" alt="Washington DC" height="48px" width="600px" style="display:block;border:0;overflow:hidden;vertical-align:bottom"/></td>
</tr>
</table>
<table width="600px" height="auto" align="center" style="background-color:#168116;vertical-align:top;">
<tr>
<td style="font-family:Arial, Helvetica, sans-serif;font-size:27px;line-height:31px;color:#fff;text-align:center;padding-top:30px;">SEATS ARE FILLING UP FAST!
</td>
</tr>
<tr>
<td align="center" cellpadding="0" cellspacing="0" style="border-collapse:0px;">
<img src="button2.jpg" alt="Register" height="48" width="312" style="border:0px;vertical-align:top;"/>
</td>
</tr>
<tr>
<td style="font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:17px;color:#fff;text-align:center;padding-top:10px;padding-bottom:20px;">For more information on programs<br />and speakers, visit <span style="font-family:Arial, Helvetica, sans-serif;font-size:15px;font-style:italic;line-height:17px;color:#fff;">www.ieee-isgt.org</span>
</td>
</tr>
</table>
<!--Footer-->
<table height="auto" width="600" border="0" align="center" style="margin-top:5px;">
<tr>
<td height="auto" width="auto" align="center" style="background-color:#e5e4e4; padding-top:10px; padding-right:30px; padding-bottom:10px; padding-left:30px;">
<p style="font-family:Arial, Helvetica, sans-serif;font-size:11px;line-height:17px;font-weight:bold;color:#3e3e3e;text-align:left;">ISGT 2013 conference co-sponsoring societies include IEEE-USA, IEEE Dielectrics and Electrical Insulation Society, IEEE Industry Applications Society, IEEE Industrial Electronics Society, IEEE Power Electronics Society, IEEE Systems Council and IEEE Signal Processing Society.</p>
</td>
</tr>
<!--Unsubscribe-->
<tr>
<td height="40" width="600" align="center">
<p style="font-family:Arial, Helvetica, sans-serif;font-size:11px;line-height:14px;font-weight:normal;color:#141313;text-align:center;">If you no longer wish to receive these types of messages from IEEE PES Media,<br />please click here or fax 703-860-1623, or write 445 Hoes Lane, Piscataway, N.J. 08854.</p>
</td>
</tr>
</table>
</body>
</html>
How it should look...
Here's it it appears in the browsers as an HTML file, which is how I want it to appear in every instance. If anyone can put out something blaring that I am missing I would really appreciate it.
<style>
.content span{color:green;}
</style>
<table>
<tr>
<td>
<img src="topleft_background.png"/>
</td>
<td>
<ul class="content">
<li><span>Green Text:</span> Regular text.</li>
<li><span>Green Text:</span> Regular text.</li>
<li><span>Green Text:</span> Regular text.</li>
<li><span>Green Text:</span> Regular text.</li>
</ul>
</td>
</tr>
<tr>
<td>
<img src="bottomleft_background.png"/>
</td>
<td>
<img src="bottomright_background.png"/>
</td>
</tr>
</table>
Can i suggest mailrox.com
Does all this sort of thing for you.
Edit:
try this:
<html style="width: 100%; margin-top: 0px !important; padding-top: 0px !important;"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head><body style="width: 100%; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; letter-spacing: normal; word-spacing: 0px; text-shadow: none; color: #000000; font-size: 13px; line-height: 17px; background-color: #FEFEFE; margin: 0px 0 0 0px; padding: 0px 0 0;" bgcolor="#FEFEFE"><table width="100%" cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse; border-spacing: 0px; background-color: #FEFEFE; margin: 0px; padding: 0px; border: 0px none;" bgcolor="#FEFEFE">
<tbody>
<tr align="center" style="border-collapse: collapse; border-spacing: 0px; border: 0px none;">
<td valign="top" align="center" style="border-collapse: collapse; border-spacing: 0px; border: 0px none;">
<table width="603" cellspacing="0" cellpadding="0" border="0" align="center" style="border-collapse: collapse; border-spacing: 0px; margin: 0px; padding: 0px; border: 0px none;">
<tbody>
<tr align="left" style="border-collapse: collapse; border-spacing: 0px; border: 0px none;">
<td width="603">
<table width="603" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0px; margin-top: 0px !important; padding-top: 0px !important; border: 0px none;">
<tbody>
<tr align="left" style="border-collapse: collapse; border-spacing: 0px; border: 0px none;">
<td width="603">
<table width="603" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0px; margin-top: 0px !important; padding-top: 0px !important; border: 0px none;">
<tbody>
<tr style="border-collapse: collapse; border-spacing: 0px; height: 20px; border: 0;"><td width="603" valign="top" height="20" align="left" style="background-color: #FEFEFE;" bgcolor="#FEFEFE"><img width="1" height="20" style="display: block; line-height: 1; opacity: 0; padding: 0px; border: 0;" src="images/clear.gif" alt=""></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; border-spacing: 0; background-color: #FEFEFE; margin: 0px 0 0; padding: 0px 0 0; border: 0;" bgcolor="#FEFEFE"><tbody><tr align="center" style="border-collapse: collapse; border-spacing: 0; border: 0;">
<td align="center" valign="top" style="border-collapse: collapse; border-spacing: 0; border: 0;">
<table width="603" align="center" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; margin: 0px 0 0; padding: 0px 0 0; border: 0;">
<tbody>
<tr align="left" style="border-collapse: collapse; border-spacing: 0; border: 0;">
<td width="603">
<table width="603" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; margin-top: 0px !important; padding-top: 0px !important; border: 0;">
<tbody>
<tr style="border-collapse: collapse; border-spacing: 0; border: 0;"><td width="242" height="376" align="left" valign="top" style="">
<img height="376" src="images/image-268344-530390.jpg" style="display: block; line-height: 1; padding: 0; border: 0;" width="242">
</td>
<td width="361" align="left" valign="top">
<table width="361" align="center" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; margin: 0px 0 0; padding: 0px 0 0; border: 0;">
<tbody>
<tr align="left" style="border-collapse: collapse; border-spacing: 0; border: 0;">
<td width="361">
<table width="361" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; margin-top: 0px !important; padding-top: 0px !important; border: 0;">
<tbody>
<tr style="border-collapse: collapse; border-spacing: 0; border: 0;"><td width="361" height="257" align="left" valign="top" style="">
<table height="auto" width="357" cellspacing="0" align="center" style="vertical-align:top;border-collapse:0px;float:right;display:inline;">
<!-- Bullet 1-->
<tbody><tr>
<td height="auto" width="8" cellpadding="0" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;color:#141313;text-align:left;float:left;font-weight:bold;text-align:left;vertical-align:top;border-collapse:0px;">•</td>
<td height="auto" width="311" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;color:#141313;float:right;text-align:left:10px;padding-right:30px;"><span style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;font-weight:bold;color:#168116;text-align:left;margin-right:3px;">RESULTS:</span>Learn about real-practice technology, deployment experience, and customer acceptance issues related to smart grid.</td>
</tr>
<!-- Bullet 2-->
<tr>
<td height="auto" width="8" cellpadding="0" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;color:#141313;text-align:left;float:left;font-weight:bold;text-align:left;vertical-align:top;padding-top:10px;border-collapse:0px;">•</td>
<td height="auto" width="311" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;color:#141313;float:right;text-align:left:10px;padding-top:10px;padding-right:30px;"><span style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;font-weight:bold;color:#168116;text-align:left;margin-right:3px;">NETWORKING:</span>Meet and speak directly with industry leaders, regulators and entrepreneurs working with the smart grid.</td>
</tr>
<!-- Bullet 3-->
<tr>
<td height="auto" width="8" cellpadding="0" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;color:#141313;text-align:left;float:left;font-weight:bold;text-align:left;vertical-align:top;padding-top:10px;border-collapse:0px;">•</td>
<td height="auto" width="311" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;color:#141313;float:right;text-align:left:10px;padding-top:10px;padding-right:30px;"><span style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;font-weight:bold;color:#168116;text-align:left;margin-right:3px;">OPPORTUNITY:</span>International speakers will report on real success stories and pitfalls – as well as current business.</td>
</tr>
<!-- Bullet 4-->
<tr>
<td height="auto" width="8" cellpadding="0" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;color:#141313;float:left;font-weight:bold;text-align:left;vertical-align:top;padding-top:10px;border-collapse:0px;">• </td>
<td height="auto" width="311" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;color:#141313;float:right;text-align:left:10px;padding-top:10px;padding-right:30px;"><span style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;font-weight:bold;color:#168116;text-align:left;margin-right:3px;">RESEARCH:</span>Noted academics and practitioners talk candidly about their work in making smart grid a cost-effective proposition.</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr align="left" style="border-collapse: collapse; border-spacing: 0; border: 0;">
<td width="361">
<table width="361" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; margin-top: 0px !important; padding-top: 0px !important; border: 0;">
<tbody>
<tr style="border-collapse: collapse; border-spacing: 0; border: 0;"><td width="361" height="119" align="left" valign="top" style="">
<img height="119" src="images/image-268346-530393.jpg" style="display: block; line-height: 1; padding: 0; border: 0;" width="361">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody></table>
<style type="text/css">
body { width: 100% !important; margin-top: 0px !important; padding-top: 0px !important; }
body { background-color: #FEFEFE !important; margin-top: 0px !important; padding-top: 0px !important; font-family: sans-serif !important; }
body { letter-spacing: normal !important; word-spacing: 0px !important; margin-top: 0 !important; padding-top: 0 !important; margin-right: 0 !important; padding-right: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; margin-left: 0 !important; padding-left: 0 !important; text-shadow: none !important; color: #000000 !important; font-size: 13px !important; line-height: 17px !important; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important; }
</style>
</body></html>