Issues with Email Template in Outlook

Forum|Forum|1 year ago
June 12, 2024
2 replies
1088 views

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-->

Marketo

suanntan

Oh the joys of Outlook.

I've also experienced templates doing strange things when rendered in Outlook and had to add custom code to the template just for Outlook. Have you tried adjusting the cell padding of your outermost table to "0"? My guess is maybe the inner tables aren't fully occupying the cell

I'm also curious if changing the color (from the other possible solution) fixes the issue

AshleighMo1

Is it not consistent among different versions of outlook? I have seen certain versions (years) and devices have issues where others don't. My gut says it is an issue with outlook, like you said - shocker, but one fix you could potentially try changing the color in this div tag:

<div class="mktoText" id="IconSB" mktoname="IconSB" style="font-family: Zuume, Impact; color: #FFFFFF; margin: 40px 0px 0px 0px; font-size: 25px;">

Instead of #FFFFFF try #666666. That's the only thing that I could think to try. Let us know if that works or if you find a different resolution!

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded