Hey all!
Working on a new master template and having some issues with a design in Outlook (shocking).
I have these sections in the middle and when it renders in Outlook, sometimes I get these white lines at the bottom of the boxes. It is not consistent which makes it hard to debug. Curious if this is a known issue with Outlook.
Here is the snippet of code:
<!--SB Icon Section-->
<table cellpadding="10" class="mktoModule" mktoName="SBIconText" id="SBIconText" width="100%" style="width: 100%!important;height:350px; background-color: #000000;">
<tr>
<td colspan="3">
<div class="mktoText" id="IconSB" mktoname="IconSB" style="font-family: Zuume, Impact; color: #FFFFFF; margin: 40px 0px 0px 0px; font-size: 25px;">
SAMPLE FOR ICON SECTION
</div>
</td>
</tr>
<!--TOP ROW-->
<tr>
<td>
<!--Left Block Top-->
<table>
<tr>
<td style="font-family:nimbus sans, arial; border: 1px solid #666666; border-radius: 5px;">
<div class="mktoImg" mktoName="LeftBlockImg1" id="LeftBlockImg1" style="margin: 5px 5px 5px 5px;">
<img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Camera_Black.png" height="16">
</div>
<div class="mktoText" mktoName="LeftBlockHeader1" id="LeftBlockHeader1" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-weight: bold; font-size: 17px;">
Confidence in Growth:
</div>
<div class="mktoText" mktoName="LeftBlockText1" id="LeftBlockText1" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-size: 14px;">
We're the only auto shop management software with a money-back growth guarantee.
</div>
</td>
</tr>
</table>
<!--Left Block Top End-->
</td>
<td>
<!--Mid Block Top-->
<table>
<tr>
<td style="font-family:nimbus sans, arial; border: 1px solid #666666; border-radius: 5px;">
<div class="mktoImg" mktoName="MidBlock1" id="MidBlockImg1" style="margin: 5px 5px 5px 5px;">
<img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Car_Black.png" height="16">
</div>
<div class="mktoText" mktoName="MidBlockHeader1" id="MidBlockHeader1" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-weight: bold; font-size: 17px;">
Confidence in Growth:
</div>
<div class="mktoText" mktoName="MidBlockText1" id="MidBlockText1" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-size: 14px;">
We're the only auto shop management software with a money-back growth guarantee.
</div>
</td>
</tr>
</table>
<!--Mid Block Top End-->
</td>
<td>
<!--Right Block Top-->
<table>
<tr>
<td style="font-family:nimbus sans, arial; border: 1px solid #666666; border-radius: 5px;">
<div class="mktoImg" mktoName="RightBlock1" id="RightBlockImg1" style="margin: 5px 5px 5px 5px;">
<img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Chat_Black.png" height="16">
</div>
<div class="mktoText" mktoName="RightBlockHeader1" id="RightBlockHeader1" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-weight: bold; font-size: 17px;">
Confidence in Growth:
</div>
<div class="mktoText" mktoName="RightBlockText1" id="RightBlockText1" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-size: 14px;">
We're the only auto shop management software with a money-back growth guarantee.
</div>
</td>
</tr>
</table>
<!--Right Block Top End-->
</td>
</tr>
<!--TOP ROW END-->
<!--BOTTOM ROW-->
<tr>
<td>
<!--Left Block Top-->
<table>
<tr>
<td style="font-family:nimbus sans, arial; border: 1px solid #666666; border-radius: 5px;">
<div class="mktoImg" mktoName="LeftBlockImg2" id="LeftBlockImg2" style="margin: 5px 5px 5px 5px;">
<img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Phone_Black.png" height="16">
</div>
<div class="mktoText" mktoName="LeftBlockHeader2" id="LeftBlockHeader2" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-weight: bold; font-size: 17px;">
Confidence in Growth:
</div>
<div class="mktoText" mktoName="LeftBlockText2" id="LeftBlockText2" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-size: 14px;">
We're the only auto shop management software with a money-back growth guarantee.
</div>
</td>
</tr>
</table>
<!--Left Block Top End-->
</td>
<td>
<!--Mid Block Top-->
<table>
<tr>
<td style="font-family:nimbus sans, arial; border: 1px solid #666666; border-radius: 5px;">
<div class="mktoImg" mktoName="MidBlockImg2" id="MidBlockImg2" style="margin: 5px 5px 5px 5px;">
<img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Shop_Black.png" height="16">
</div>
<div class="mktoText" mktoName="MidBlockHeader2" id="MidBlockHeader2" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-weight: bold; font-size: 17px;">
Confidence in Growth:
</div>
<div class="mktoText" mktoName="MidBlockText2" id="MidBlockText2" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-size: 14px;">
We're the only auto shop management software with a money-back growth guarantee.
</div>
</td>
</tr>
</table>
<!--Mid Block Top End-->
</td>
<td>
<!--Right Block Top-->
<table>
<tr>
<td style="font-family:nimbus sans, arial; border: 1px solid #666666; border-radius: 5px;">
<div class="mktoImg" mktoName="RightBlockImg2" id="RightBlockImg2" style="margin: 5px 5px 5px 5px;">
<img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Ribbon_Black.png" height="16">
</div>
<div class="mktoText" mktoName="RightBlockHeader2" id="RightBlockHeader2" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-weight: bold; font-size: 17px;">
Confidence in Growth:
</div>
<div class="mktoText" mktoName="RightBlockText2" id="RightBlockText2" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-size: 14px;">
We're the only auto shop management software with a money-back growth guarantee.
</div>
</td>
</tr>
</table>
<!--Right Block Top End-->
</td>
</tr>
<!--BOTTOM ROW END-->
</table>
<!--SB Icon Section END-->
.png)