DA0
Outlook 2016: Tiny Rectangle of Background IMG Peeks Through
So this is driving me insane. I'm building an email nav. It works as intended on every client, device, browser -- expect for Outlook 2016, which happens to be our in-house client. There is a tiny rectangle of space, the background color, peaking through between the two TDs. Tried everything within my limited technical scope to no avail. Some is askey about the right div column. Any insight would be greatly appreciated. Code below.
Thanks,
Dan
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style type="text/css">
body {
Margin: 0;
padding: 0;
min-width: 100%;
background-color: #ffffff;}
table {
border-spacing: 0;
font-family: sans-serif;
color: #333333;}
td {
padding: 0;}
img {
border: 0;}
.wrapper {
width: 100%;
table-layout: fixed;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;}
.webkit {
max-width: 600px;}
.full-width-image img {
width: 100%;
max-width: 600px;
height: auto;}
.inner {
padding: 20px;}
p {
Margin: 0;}
a {
color: #000000;
text-decoration: none;}
.h1 {
font-size: 20px;
line-height: 26px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: bold;
Margin-bottom: 18px;}
.h2 {
font-size: 13px;
Margin-bottom: 12px;}
.one-column .contents {
text-align: left;}
.one-column p {
font-size: 13px;
Margin-bottom: 10px;}
.outer {
Margin: 0 auto;
width: 100%;
max-width: 600px;}
.two-column {
text-align: center;
font-size: 0;
}
.two-column .column {
width: 100%;
max-width: 300px;
display: inline-block;
vertical-align: top;
}
.contents {
width: 100%;
}
.two-column .contents {
font-size: 13px;
text-align: left;
}
.two-column img {
width: 100%;
max-width: 260px;
height: auto;
}
.two-column .text {
padding-top: 10px;
}
.left-sidebar {
text-align: center;
font-size: 0;
background: #d2b887;
}
.left-sidebar .column {
width: 100%;
display: inline-block;
vertical-align: middle;
}
.left-sidebar .left {
max-width: 180px;
}
.left-sidebar .right {
max-width: 420px;
}
.left-sidebar .img {
width: 100%;
max-width: 80px;
height: auto;
}
.left-sidebar .contents {
font-size: 13px;
text-align: center;
}
.left-sidebar a {
color: #85ab70;
}
.nav {
padding: 20px 15px;
background: #d2b887;
}
.left-sidebar2 {
text-align: left;
font-size: 0;
background: #efefef;}
.left-sidebar2 .column {
width: 100%;
display: inline-block;
vertical-align: middle;}
.left-sidebar2 .left {
max-width: 300px;}
.left-sidebar2 .right {
max-width: 300px;}
.left-sidebar2 .img {
width: 100%;
max-width: 250px;
height: auto;}
.left-sidebar2 .contents {
font-size: 13px;
text-align: center;}
.left-sidebar2 a {
color: #85ab70;}
.three-column {
text-align: center;
font-size: 0;
padding-top: 10px;
padding-bottom: 10px;}
.three-column .column {
width: 100%;
max-width: 200px;
display: inline-block;
vertical-align: top;}
.three-column .contents {
font-size: 13px;
text-align: center;}
.three-column img {
width: 100%;
max-width: 170px;
height: auto;
padding-top:20px;}
.three-column .text {
padding-top: 20px;}
input{
display: none;}
}
</style>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse !important !important;}
</style>
<![endif]-->
</head>
<body style="Margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#ffffff;table-layout:fixed;" >
<div style="background-color:#efefef;" >
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" color="#efefef"/>
</v:background>
<![endif]-->
<table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="table-layout: fixed;Margin:0 auto;border-spacing:0;font-family:sans-serif;color:#333333;border-collapse:collapse;" >
<tr>
<td valign="top" align="center" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<center class="wrapper" style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;border-collapse:collapse;" >
<div class="webkit" style="max-width:600px;" >
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;font-family:sans-serif;color:#333333;" >
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<![endif]-->
<table class="outer" align="center" style="border-spacing:0;font-family:sans-serif;color:#333333;Margin:0 auto;width:100%;max-width:600px;background-repeat:repeat;background-position:top left;background-attachment:scroll;table-layout:fixed;border-collapse:collapse;" >
<tr>
<td class="one-column" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<table width="100%" style="border-spacing:0;font-family:sans-serif;color:#FFFFFf;table-layout:fixed;" >
<tr>
<td style="padding-top:10px;padding-bottom:0px;padding-right:20px;padding-left:10px;" >
<p style="font-family: Helvetica, Arial, sans-serif;font-size:11px;line-height:11px;Margin:0;Margin-bottom:10px;color:#000000;" >Catch the NBA's top talent prep for the Olympics. | <a target="blank" href="{{system.forwardToFriendLink}}" style="color:#000000;text-decoration:underline;" >Forward to a Fan.</a></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-color:#0c2340;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
<table width="100%" style="border-spacing:0;border-collapse:collapse;table-layout:fixed;" >
<tr>
<td class="left-sidebar" style="background-color:#0c2340;padding-top:15px;padding-bottom:15px;padding-right:10px;padding-left:10px;text-align:center;font-size:0;border-collapse:collapse;" bgcolor="#0c2340">
<!--[if (gte mso 9)|(IE)]>
<table width="100%" style="border-spacing:0;font-family:sans-serif;color:#333333;background-color:#0c23405;border-collapse:collapse;table-layout:fixed;" bgcolor="#0c2340">
<tr>
<td width="150" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;background-color:#0c2340;" bgcolor="#0c2340">
<![endif]-->
<div class="column left" style="width:100%;display:inline-block;vertical-align:middle;max-width:150px;" >
<table width="100%" style="border-spacing:0;font-family:sans-serif;color:#333333;border-collapse:collapse;" >
<tr>
<td class="inner" style="padding-top:10px;padding-bottom:10px;padding-right:20px;padding-left:20px;background-color:#0c2340;" >
<img src="http://go2.pelicanssaints.com/rs/204-HUD-558/images/pelicans-primary-logo-blue-bgr-200x149.jpg" width="110" alt="Pelicans Logo" style="border-width:0;display:block;border-collapse:collapse;" />
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td width="430" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;background-color:#0c2340;" bgcolor="#0c2340">
<![endif]-->
<div class="column right" style="width:100%;display:inline-block;vertical-align:middle;max-width:430px;" >
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-spacing:0;font-family:sans-serif;color:#333333;background-color:#0c2340;" bgcolor="#0c2340">
<tr>
<td style="padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;background-color:#0c2340;background-image:none;background-repeat:repeat;background-position:top left;background-attachment:scroll;" >
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border-spacing:0;font-family:sans-serif;color:#333333;background-color:#0c2340;" >
<tr>
<td style="background-color:#0c2340;background-image:none;background-repeat:repeat;background-position:top left;background-attachment:scroll;font-family: Helvetica, Arial,
sans-serif;font-size:14px;line-height:14px;color:#ffffff;text-align:left;" ><a href="http://saints50.com/" target="_blank" alt="Pelicans Team Store" style="text-decoration:none;color:#ffffff;" >TEAM GEAR</a></td>
<td style="background-color:#0c2340;background-image:none;background-repeat:repeat;background-position:top left;background-attachment:scroll;font-family:Helvetica, Arial,
sans-serif;font-size:14px;line-height:14px;color:#ffffff;text-align:center;" ><a href="http://www.neworleanssaintsteamshop.com/" target="_blank" alt="Game Schedule" style="text-decoration:none;color:#ffffff;" >JR PELICANS</a></td>
<td style="background-color:#0c2340;background-image:none;background-repeat:repeat;background-position:top left;background-attachment:scroll;font-family:Helvetica, Arial,
sans-serif;font-size:14px;line-height:14px;color:#ffffff;text-align:right;" ><a
href="http://www.neworleanssaints.com/tickets-and-stadium/suites.html" target="_blank" alt="Pelicans Tickets" style="text-decoration:none;color:#ffffff;" >COMMUNITY</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
</td>
</tr>
</table>
</div>
</body>
</html>
First a foremost the code is extremely heavy for what you are trying to achieve. Secondly when using inline-block to create columns, you will have 4pixels margin added in which is a bit of nasty one. The way to overcome this is to ensure there are absolutely 0 gaps in the actual code between each column. LITERALLY NO GAPS. so
<div></div>
<div></div> becomes <div></div><div></div>
Also what you may want to try as a quick fix, is to give the main parent cell a bgcolor as the nav uses one colour. This may solve the issue quickly.
Thanks, Nicholas. It's indeed a bit Frankensteined, but the nav area works on every single client/device except Outlook 2016, where there's this thin vertical window. Seems like it's tied to the right column (in the left-right fluid hybrid context) as it appears to match the line height. Scratching my head as to why 2016 wouldn't approve.