I am creating HTML Emailer.
When I see in the browser by clicking in the mail then background is not appearing proper.
<table>
<tr>
<td align="middle" style="background-image: url(http://i.imgur.com/ixr4wNC.jpg); background-size: cover; height: 740px; ">
<table cellspacing="0" cellpadding="0" border="0" style=" margin: 0 auto !important; padding: 0px; width:600px !important; line-height: 100% !important; border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;" >
<tbody>
<tr>
<td valign="top" align="center">
<table cellspacing="0" cellpadding="0" border="0" style="width: 100%; border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; font-family: SansSerif; ">
<tbody>
<tr>
<td style="height: 450px; visibility: hidden;">text</td>
</tr>
<tr>
<td style="padding-top: 10px; font-size: 12px; padding-left: 20px;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
Apparently google's parser doesn't like a standalone background-size declaration so it must be included as shorthand or it will be stripped out.
background: url('image.gif') no-repeat center center / 100%;
Related
There appears to be a white line above the image in Gmail app on IOS in dark mode.
I've tried many solutions regarding this but could not remove the white line/space.
img[class="visual"] {
width: 100% !important;
height: auto !important;
text-align: center;
margin: 0 auto;
}
<tr>
<td bgcolor="transparent" valign="middle">
<table cellpadding="0" cellspacing="0" border="0" class="content" align="center" width="640">
<tr>
<td bgcolor="transparent" align="center" valign="top" style="width: 640px;">
<img src="https://via.placeholder.com/150.jpg" width="640" height="250" style="display: block; border: none; max-height: 250px;" border="0" alt="Banner" class="visual" />
</td>
</tr>
</table>
</td>
</tr>
I'm working on an e-mail building tool and on e-mails received on Outlook, when I click the left border of the e-mail a white line appears below the clicked table.
The code is structured in this way:
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-spacing: 0px; border-collapse: collapse; table-layout: fixed; margin: 0px auto;">
<tbody>
<!-- For each image: -->
<tr>
<td style="font-size: 0px; background-color: transparent;" valign="top" align="center">
<table width="600" border="0" cellpadding="0" cellspacing="0" style="border-spacing: 0px; border-collapse: collapse; table-layout: fixed; margin: auto;" align="center">
<tbody>
<tr>
<!-- Other nested tables that are irrelevant since their -->
<!-- width is <= 600 and they have the same attributes -->
<td style="border: 0px;">
<a><img align="center" border="0" style="display: block; margin: 0px auto; height: auto; max-width: 560px; border: 0px !important; outline: none !important; text-decoration: none !important;" src="..." height="124" width="560"></a>
</td>
<!-- End nested tables -->
</tr>
</tbody>
</table>
</td>
</tr>
<!-- repeat code above for other images -->
</tbody>
</table>
How can I prevent that white line from showing up?
I'm having a padding issue on a table in gmail. Any help would be most appreciated. Remember this is a gmail email, so all css must be inline unfortunately. Thanks!
It looks like this in the composed message with proper padding:
And then it appears to remove the padding in on the table in the actual email:
This is the piece of code with the padding in the td element:
<td background="http://timshoemake.io/wp-content/uploads/email-template/prowler3.png" style="line-height:10px; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;padding-top:40px !important;padding-right:30px !important;padding-bottom:20px !important;padding-left:30px !important; background-image:url('http://timshoemake.io/wp-content/uploads/email-template/prowler3.png'); background-size: cover; -webkit-background-size: cover; -moz-background-size: cover -o-background-size: cover; background-position: center; background-repeat: no-repeat;">
code:
<table style="max-width: 600px;" align="center" cellpadding="0" cellspacing="0" border="0" >
<tr>
<td background="http://timshoemake.io/wp-content/uploads/email-template/prowler3.png" style="line-height:10px; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;padding-top:40px !important;padding-right:30px !important;padding-bottom:20px !important;padding-left:30px !important; background-image:url('http://timshoemake.io/wp-content/uploads/email-template/prowler3.png'); background-size: cover; -webkit-background-size: cover; -moz-background-size: cover -o-background-size: cover; background-position: center; background-repeat: no-repeat;">
<table width="70" align="left" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td height="70" style="padding: 0 20px 20px 0;">
<img src="http://timshoemake.io/wp-content/uploads/email-template/shoemaker_repair_blue#2x-2.png" style="height: auto; "width="70" height="70" border="0" alt="" / >
</td>
<td>
<!--[if (gte mso 9)|(IE)]>
<table width="425" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 425px!important; width: 100%; max-width: 425px;">
<tr>
<td height="70">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px; padding: 0 0 0 3px;">
CREATING
</td>
</tr>
<tr>
<td style="font-size: 33px; line-height: 38px; font-weight: bold; color: #ffffff; padding: 5px 0 0 0;">
Beautiful Fitness Web Design
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
All I can say is, what a nightmare. I had to create td blocks of space and completely take out the padding. This is the finished code, I unfortunately don't have time to make edit so you can compare using a tool.
Finished product, after about 2 hours of work:
<table style="width: 600px;" align="center" cellpadding="0" cellspacing="0" border="0" >
<tr>
<td background="http://timshoemake.io/wp-content/uploads/email-template/prowler3.png" style="line-height:10px; background-image:url('http://timshoemake.io/wp-content/uploads/email-template/prowler3.png'); background-size: cover; -webkit-background-size: cover; -moz-background-size: cover -o-background-size: cover; background-position: center; background-repeat: no-repeat;" >
<table width="70" align="left" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td width="40px"> </td>
<td height="70" style="padding: 0 20px 20px 0;">
<img src="http://timshoemake.io/wp-content/uploads/email-template/shoemaker_repair_blue#2x-2.png" style="height: auto; "width="70" height="70" border="0" alt="" / >
</td>
<td>
<!--[if (gte mso 9)|(IE)]>
<table width="425" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 425px; width: 100%; max-width: 425px;">
<!-- top padding -->
<tr>
<td width="600px" height="40px"></td>
</tr>
<!-- header content -->
<tr>
<td height="70">
<table width="425px" border="0" cellspacing="0" cellpadding="0" style="font-family: 'Raleway', Helvetica, Arial, sans-serif;" >
<tr>
<td style="font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px; padding: 0 0 0 3px;">
Creating
</td>
</tr>
<tr>
<td style="font-size: 30px; line-height: 38px; font-weight: bold; color: #ffffff; padding: 5px 0 0 0;">
Beautiful Fitness Web Design
</td>
<!-- <td width="20px"></td> -->
</tr>
</table>
</td>
</tr>
<!-- bottom padding -->
<tr>
<td width="600px" height="40px"></td>
</tr>
</table>
</td>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</tr>
</table>
</td>
</tr>
</table>
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">
I've tried everything but nothing short of setting the outer-most table's border to 0 works. I want to get rid of the line below the cell with "big cell text" in it. Code is pretty messy but here's the link to jsfiddle so you could... fiddle around with it. The code to the table structure is exactly the same as what I use in the site but obviously the data is replaced.
Any clues?
Set border-bottom and border-top to none: http://jsfiddle.net/nUrE7/
Here you go. Added border-bottom:none; and border-top:none; in your code.
<table cellspacing="0" cellpadding="1" border="1" style="width: 100%;">
<tr >
<td colspan="7" border="0" style="width: 100%; text-align: left; height: 100px; vertical-align:middle;border-bottom:none;"> big cell text </td>
</tr>
<tr border="0">
<td colspan="7" border="0" style="width: 100%; text-align: left; vertical-align:middle;border-top:none; "><table cellspacing="0" cellpadding="1" border="0" style="width: 100%;">
<tr border="0">
<td border="0" width="10%"><strong>1:</strong></td>
<td border="0" width="90%" style="text-align: left;">text1</td>
</tr>
<tr border="0">
<td border="0" width="10%"><strong>2: </strong></td>
<td border="0" width="90%" style="text-align: left;">text2</td>
</tr>
</table></td>
</tr>
<tr border="0">
<td colspan="5" style="width: 74%;text-align: right;">Total</td>
<td style="width: 13%; text-align: right; height: 20px; vertical-align:middle;">a</td>
<td style="width: 13%; text-align: right; height: 20px; vertical-align:middle;">b</td>
</tr>
<tr border="0">
<td colspan="5" style="width: 74%; vertical-align:middle; text-align: center; height: 20px;"><strong>c</strong></td>
<td colspan="2" style="width: 26%; text-align: center; height: 20px; vertical-align:middle;">d</td>
</tr>
</table>