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?
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>
Is it possible to vertically align table 3 at the bottom in the following example?
This is for a mail signature, hence the use of tables and the hack with align to make the tables responsive (they'll stack underneath each other if viewport gets too small). Now, the client wants the logo in table 3 to be aligned at the bottom (see example image) and I'm beginning to wonder if this is even possible while keeping it mobile friendly.
I've tried vertical-alignment: bottom pretty much everywhere and margin-top: auto; margin-bottom: 0; on table 3 to no avail. I'm guessing the align="left" overrides pretty much ever vertical alignment styling I'm trying to make.
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #000 solid; max-width: 903px; width: 100%">
<tr>
<td>
<!-- "responsive" tables -->
<!-- table 1 -->
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #ff0000 solid; width: 300px;">
<tr>
<td>
Company logo
</td>
</tr>
</table>
<!-- table 2 -->
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #00ff00 solid; width: 300px;">
<tr>
<td>
Contact details<br>
<br>
<br>
</td>
</tr>
</table>
<!-- table 3 -->
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #0000ff solid; width: 300px;">
<tr>
<td>
Another logo
</td>
</tr>
</table>
</td>
</tr>
</table>
You could use a vertical-align and give the cell a height using CSS.
#media (min-width: 1000px) {
.logoHolder td {
height: 50px;
vertical-align: bottom;
}}
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #000 solid; max-width: 903px; width: 100%">
<tr>
<td>
<!-- "responsive" tables -->
<!-- table 1 -->
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #ff0000 solid; width: 300px;">
<tr>
<td>
Company logo
</td>
</tr>
</table>
<!-- table 2 -->
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #00ff00 solid; width: 300px;">
<tr>
<td>
Contact details<br>
<br>
<br>
</td>
</tr>
</table>
<!-- table 3 -->
<table class="logoHolder" align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #0000ff solid; width: 300px;vertical-align: bottom;">
<tr>
<td style="vertical-align: bottom;">
Another logo
</td>
</tr>
</table>
</td>
</tr>
</table>
I am writing an email which is only having issues in "Windows 10 Mail." I have a 3 table cell with a graphic in the middle TD. The left & right TDs contain a 2-pixel height table with a gray background. This is to make it look like the icon is surrounded by 2 gray lines.
The small tables all have height=2 applied. I've tried using VML code, no effect. Any ideas?
Results:
Code below:
<table cellpadding="0" cellspacing="0" border="0" width="300" style="max-width: 300px">
<tr>
<td valign="middle" width="35%" style="max-width: 108px; line-height: 0; font-size: 0">
<!-- Left Gray Table -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width: 108px; max-height: 2px" height="2">
<tr>
<td height="2" bgcolor="#EAEAEA" style="height: 2px; background-color: #eaeaea; font-size: 0; line-height: 0"><img src="http://go.rocketlawyer.com/rs/148-CGS-511/images/spacer.gif" height="2" width="100%" style="min-width: 74px; max-width: 108px; min-height: 2px; max-height: 2px; display: block">
</td>
</tr>
</table>
<!-- END Left Gray Table -->
</td>
<td align="center" valign="middle" width="53" class="full-width-image" height="92"><img src="http://go.rocketlawyer.com/rs/148-CGS-511/images/icon-quick-answers.png" alt="Chat bubble icon" width="106" height="92" style="border-width:0;display:block;width:100%;max-width:53px;height:auto; max-height:92px">
</td>
<td valign="middle" width="35%" style="max-width: 108px;">
<!-- RIGHT Gray Table -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width: 108px; min-height: 2px; max-height: 2px" height="2">
<tr>
<td height="2" bgcolor="#EAEAEA" style="height: 2px; background-color: #eaeaea; font-size: 0; line-height: 0"><img src="http://go.rocketlawyer.com/rs/148-CGS-511/images/spacer.gif" height="2" width="100%" style="min-width: 74px; max-width: 108px; min-height: 2px; max-height: 2px; display: block">
</td>
</tr>
</table>
<!-- END RIGHT Gray Table -->
</td>
</tr>
</table>
For some reason the email client is making the height too high for the columns. Give this method a try to see how it goes.
<table cellpadding="0" cellspacing="0" border="0" width="300" style="max-width: 300px">
<tr>
<td valign="middle" width="35%" style="max-width: 108px; ">
<!-- Left Gray Table -->
<img src="https://i.stack.imgur.com/T24O6.png" height="2" width="100%" style="min-width: 74px; max-width: 108px; min-height: 2px; max-height: 2px; display: block">
<!-- END Left Gray Table -->
</td>
<td align="center" valign="middle" width="53" class="full-width-image" height="92"><img src="http://go.rocketlawyer.com/rs/148-CGS-511/images/icon-quick-answers.png" alt="Chat bubble icon" width="106" height="92" style="border-width:0;display:block;width:100%;max-width:53px;height:auto; max-height:92px">
</td>
<td valign="middle" width="35%" style="max-width: 108px;">
<!-- RIGHT Gray Table -->
<img src="https://i.stack.imgur.com/T24O6.png" height="2" width="100%" style="min-width: 74px; max-width: 108px; min-height: 2px; max-height: 2px; display: block">
<!-- END RIGHT Gray Table -->
</td>
</tr>
</table>
Tested in Outlook as well. What i have done is added a grey image with 1px height.
Hope this is what you were after.
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%;
I have a image that I'd like to use as a horizontally-repeating banner with a non-white background color underneath in an HTML email, that also scales to fit the height. Although it is currently repeating, I cannot get the image to scale down properly. The header element is set to 100px, but the image does not resize and is cut off by the next element.
HTML
<body style="margin: 0; padding: 0;" >
<!-- CONTAINER TABLE (HEADER) -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style=" table-layout: fixed;">
<tr>
<td align="center" bgcolor="#339969" style="padding: 0 0 0 0;">
<!-- HIDDEN PREHEADER -->
<div style="display: none; font-size: 1px; color:#333333; line-height: 1px; font-family: Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all;">
Some text.
</div>
<!-- WRAPPER TABLE -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="wrapper">
<!-- HEADER -->
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- HERE need to properly scale then repeat this image -->
<td align="left"
background="img/large_christmasbanner.png"
background-size="contain"
alt="Bappy Bolidays!"
width="100%"
height="100">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
background-size="contain" is not a valid html attribute. Use this instead:
style="background-size: contain;"