MS
1
Small Gap Due to Table in Table in Yahoo Mail and Gmail Mobile
Hey Litmus Community!
I am having trouble with a small gap of 1px in my E-Mail Template. Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<title></title> <!-- the <title> tag shows on email notifications on Android 4.4. -->
<style type="text/css">
/* ensure that clients don't add any padding or spaces around the email design and allow us to style emails for the entire width of the preview pane */
body,
#bodyTable {
height:100% !important;
width:100% !important;
margin:0;
padding:0;
}
/* Ensures Webkit- and Windows-based clients don't automatically resize the email text. */
body,
table,
td,
p,
a,
li,
blockquote {
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
/* Forces Yahoo! to display emails at full width */
.thread-item.expanded .thread-body .body, .msg-body {
width: 100% !important;
display: block !important;
}
/* Forces Hotmail to display emails at full width */
.ReadMsgBody,
.ExternalClass {
width: 100%;
background-color: #f4f4f4;
}
/* Forces Hotmail to display normal line spacing. */
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height:100%;
}
/* Resolves webkit padding issue. */
table {
border-spacing:0;
}
/* Resolves the Outlook 2007, 2010, and Gmail td padding issue, and removes spacing around tables that Outlook adds. */
table,
td {
border-collapse:collapse;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
/* Corrects the way Internet Explorer renders resized images in emails. */
img {
-ms-interpolation-mode: bicubic;
}
/* Ensures images don't have borders or text-decorations applied to them by default. */
img,
a img {
border:0;
outline:none;
text-decoration:none;
}
/* Styles Yahoo's auto-sensing link color and border */
.yshortcuts a {
border-bottom: none !important;
text-decoration: none !important;
}
/* Styles the tel URL scheme */
a {
color: #83CFF0;
}
a[href^=tel],
.mobile_link,
.mobile_link a {
color:#222222 !important;
text-decoration: underline !Important;
}
/*Android 4.4 code*/
body { margin:0 !important; }
div[style*="margin: 16px 0"] { margin:0 !important; }
table th {font-weight:normal !important; }
/* Media queries for when the viewport is smaller than the default email width but not too narrow. */
@media screen and (max-device-width: 600px), screen and (max-width: 600px) {
/* Constrains email width for small screens */
table[class="email-container"] {
width: 100% !important;
}
/* Constrains tables for small screens */
table[class="fluid"] {
width: 100% !important;
}
/* Forces images to resize to full width of their container */
img[class="fluid"],
img[class="force-col-center"] {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
/* And centers these ones */
img[class="force-col-center"] {
margin: auto !important;
}
/* Forces table cells into rows */
td[class="force-col"],
td[class="force-col-center"] {
display: block !important;
width: 100% !important;
clear: both;
}
/* And centers these ones */
td[class="force-col-center"] {
text-align: center !important;
}
/* Forces table cells into rows */
/* Floats a previously stacked image to the left */
img[class="col-3-img-l"] {
float: left;
margin: 0 15px 15px 0;
}
/* Floats a previously stacked image to the right */
img[class="col-3-img-r"] {
float: right;
margin: 0 0 15px 15px;
}
/* Makes buttons full width */
table[class="button"] {
width: 100% !important;
}
}
/* Media queries for when the viewport is narrow. */
/* Rules prefixed with 'hh-' (for 'handheld') repeat much of what's above, but these don't trigger until the smaller screen width. */
@media screen and (max-device-width: 425px), screen and (max-width: 425px) {
/* Helper only visible on handhelds. All styles are inline along with a `display:none`, which this class overrides */
div[class="hh-visible"] {
display: block !important;
}
/* Center stuff */
div[class="hh-center"] {
text-align: center;
width: 100% !important;
}
div[class="footer-div"] {
text-align: center !important;
margin: auto !important;
width: 100% !important;
}
/* Constrain tables for small screens */
table[class="hh-fluid"] {
width: 100% !important;
}
/* Force images to resize to full width of their container */
img[class="hh-fluid"],
img[class="hh-force-col-center"] {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
/* And center these ones */
img[class="hh-force-col-center"] {
margin: auto !important;
}
/* Force table cells into rows */
td[class="hh-force-col"],
td[class="hh-force-col-center"] {
display: block !important;
width: 100% !important;
clear: both;
}
/* And center these ones */
td[class="hh-force-col-center"] {
text-align: center !important;
}
th[class="hh-force-col"],
th[class="hh-force-col-center"] {
display: block !important;
width: 100% !important;
clear: both;
}
/* And center these ones */
th[class="hh-force-col-center"] {
text-align: center !important;
}
/* Stack the previously floated images */
img[class="col-3-img-l"],
img[class="col-3-img-r"] {
float: none !important;
margin: 15px auto !important;
text-align: center !important;
}
div[class="button-container"] {
text-align: center !important;
}
.remove-on-mobile{
display: none !important;
}
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#f4f4f4" style="margin:0; padding:0; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;">
<table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" bgcolor="#f4f4f4" id="bodyTable" style="border-collapse: collapse;table-layout: fixed;margin:0 auto;"><tr><td>
<!-- CSS Image background in Outlook : BEGIN -->
<!-- Best used with absolute image paths -->
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" color="#f4f4f4" src="assets/nice_snow.png">
</v:background>
<![endif]-->
<!-- CSS Image background in Outlook : END -->
<!-- Logo Left Nav Right + Vertical Padding : BEGIN -->
<table border="0" width="600" cellpadding="0" cellspacing="0" align="center" class="email-container" style="margin: auto;">
<tr>
</tr>
</table>
<!-- Logo Left Nav Right + Vertical Padding : END -->
<!-- Email Container : BEGIN -->
<!-- This table wraps the whole body email within it's width (600px), sets the background color (white) and border (thin, gray, solid) -->
<table border="0" width="600" cellpadding="0" cellspacing="0" align="center" bgcolor="#f4f4f4" style="margin: auto;" class="email-container">
<!-- Header number 1-->
<tr>
<td>
<tr style="background: #B9E9F9;">
<td style="padding-top:30px;">
<div style="text-align: center; font-family:Helvetica, arial, sans-serif; font-size: 24px; font-weight: lighter; color: #ffffff; text-align:center;line-height: 30px">Header Block with full-width pic</div><br>
<img alt="" border="0" class="fluid" height="350" src="http://placehold.it/600x350" style="display: block;" width="600" /></td>
</tr>
</td>
</tr>
<!-- End Header Number 1 -->
<!-- Header Number 2-->
<tr style="background: #6dbee1 ; color: white;" border="0">
<td style="padding: 0 30px;">
<img alt="" border="0" class="hh-force-col-center" src="http://placehold.it/200x350" style="display: block;margin: auto;" width="200" height="350" />
<table align="center" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" border="0" cellpadding="0" cellspacing="0" class="fluid" width="100%">
<tbody>
<tr>
<th class="hh-force-col-center" style="padding-right: 30px; vertical-align:top; font-weight:normal;" valign="top">
<img alt="" border="0" class="hh-force-col-center" src="http://placehold.it/200x350" style="display: block;margin: auto;" width="200" height="350" />
</th>
<th class="hh-force-col" style="padding-left: 0;font-weight:normal;" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="width:100%; font-family: sans-serif; font-size: 22px; line-height: 28px; color: white; text-align: left;">
<br>
<div class="hh-center" style="font-size: 28px;line-height: 1; color: white;">LOREM IPSUM DOLOR SIT AMET</div>
<br />
Header block with vertical pic and button; on mobile devices pic above text
<table border="0" cellpadding="0" cellspacing="0" class="mobile-button-container" width="100%">
<tbody>
<tr>
<td class="padding-copy" style="width:100%; padding: 25px 0 0 0;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="responsive-table">
<tbody>
<tr>
<td width="100%" >
<div class="button-container" style="text-align: left;">
<a class="mobile-button" href="http://miamed.de" style="font-size: 20px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #70aac3; text-decoration: underline; background-color: #F1F9FC; border-top: 15px solid #F1F9FC; border-bottom: 15px solid #F1F9FC; border-left: 25px solid #F1F9FC; border-right: 25px solid #F1F9FC; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank">Jetzt loslegen!</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<br>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- End Header Number 2-->
<!-- Header number 3-->
<tr>
<td>
<img src="http://placehold.it/600x350/888888/7777777" alt="alt text" height="350" width="600" border="0" style="display: block;" class="fluid">
</td>
</tr>
</table>
<!-- Email Container : END -->
</td></tr></table>
</body>
</html>
In the "header 2" yahoo Mail and Gmail mobile add a small gap so the pictures do not have contact to the margin. I personally think it's due to the table in the table. I added any kind of inline css available to my knowledge... Here's the screenshot by the way: https://litmus.com/checklist/tests/4559729#ffyahoo
Thanks!
Well, I found out, that it's the th tag... Though it's needed there in order to use the css for android 4.4...
Yep that's spot on :) Yahoo adds 1px padding to every TH, you'll normally only notice the left and right but if you're still having issues remove the top and bottom.
But yeah, do this:
<th class="split" style="padding-left:0px; padding-right:0px;">Enjoy!
Thought I had tested that -.- Thank you so much!