
0
Outlook 365 White Gaps
Hello,
I'm struggling with a problem in the Outlook 365 client, that I hope you can help me with.
I have a very simple table setup with some space in top, and 365 thinks it should insert white lines in top and bottom:
https://www.screencast.com/t/mWFj57wIGx
Here is the complete code example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Email Framework Version 1.0.1</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no">
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<style type="text/css">
.ReadMsgBody {
width: 100%;
background-color: #F6F6F6;
}
.ExternalClass {
width: 100%;
background-color: #F6F6F6;
}
body {
width: 100%;
background-color: #f6f6f6;
margin: 0;
-webkit-font-smoothing: antialiased;
font-family: Arial, Times, serif
}
h1,
h2,
h3,
p,
td {
line-height: normal !important;
}
table {
border-collapse: collapse !important;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
@media only screen and (max-width: 639px) {
.wrapper {
width: 100%;
padding: 0 !important;
}
}
@media only screen and (max-width: 480px) {
.centerClass {
margin: 0 auto !important;
}
.imgClass {
width: 100% !important;
height: auto;
}
.wrapper {
width: 320px !important;
padding: 0 !important;
}
.header {
width: 320px !important;
padding: 0 !important;
background-image: url(http://dummyimage.com/320x400/fff/fff) !important;
}
.container {
width: 300px !important;
padding: 0 !important;
}
.mobile {
width: 300px !important;
display: block !important;
padding: 0 !important;
text-align: center !important;
}
.mobile25 {
width: 150px !important;
padding: 0 !important;
text-align: center;
display: inline-table;
}
.mobile50 {
width: 300px !important;
padding: 0 !important;
text-align: center;
}
.mobileOff {
width: 0px !important;
display: none !important;
}
}
</style>
</head>
<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" style="background-color:#F6F6F6; font-family:Arial,serif; margin:0; padding:0; min-width: 100%; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;">
<!-- Start Background -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#F6F6F6">
<tr>
<td width="100%" valign="top" align="center">
<!-- Start TEST -->
<table width="760" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#111111">
<tr>
<td height="20" style="font-size:20px; line-height:20px;"> </td>
<!-- Spacer -->
</tr>
<tr>
<td align="center">
<!-- Start Container -->
<table width="720" cellpadding="0" cellspacing="0" border="0" class="container">
<tr>
<td width="360" class="mobile" style="font-family:arial; font-size:12px; color:#fff; line-height:18px; margin:0;" align="center">
Menu 1
</td>
<td width="360" class="mobile" style="font-family:arial; font-size:12px; color:#fff; line-height:18px; margin:0;" align="center">
Menu 2
</td>
</tr>
</table>
<!-- End Container -->
</td>
</tr>
<tr>
<td height="20" style="font-size:20px; line-height:20px;"> </td>
<!-- Spacer -->
</tr>
</table>
<!-- End TEST -->
<!-- Start Content -->
<table width="760" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#ffffff">
<tr>
<td height="10" style="font-size:10px; line-height:10px;"> </td>
<!-- Spacer -->
</tr>
<tr>
<td align="center">
<!-- Start Container -->
<table width="720" cellpadding="0" cellspacing="0" border="0" class="container">
<tr>
<td width="720" class="mobile" style="font-family:arial; font-size:12px; line-height:18px; margin:0;">
{content}
</td>
</tr>
</table>
<!-- End Container -->
</td>
</tr>
<tr>
<td height="10" style="font-size:10px; line-height:10px;"> </td>
<!-- Spacer -->
</tr>
</table>
<!-- End Content -->
</td>
</tr>
</table>
<!-- End Background -->
</body>
</html>
Try this https://codepen.io/Sayo1337/pen/GEqZRd
All you need to do is apply the bgcolor onto the containing cell / table and it should fill in the white spaces.
Hope this helps