Your Achievements
Level 1
0% to
Level 2
Next /
to gain points, level up, and earn exciting badges like the new Applaud 5 BadgeLearn more!
View All BadgesSign in to view all badges
Open Alert Bar

Issues with Email Template in Outlook

kenmckown
Level 3
Level 3
2 weeks ago
2 weeks ago

Issues with Email Template in Outlook

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.

 

kenmckown_0-1718204195626.png

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-->
148
Reply
2 REPLIES 2
AshleighMo
Level 4
Level 4
2 weeks ago
2 weeks ago

Re: Issues with Email Template in Outlook

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!

78
Reply
suanntan
Level 3
Level 3
2 weeks ago
2 weeks ago

Re: Issues with Email Template in Outlook

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

 

 

0 Likes
72
Reply
Home