HTML e-mail template help

[El Jimben]

Spoiler

<TD class=ee_pad style="WIDTH: auto; PADDING-BOTTOM: 6px; PADDING-TOP: 6px; PADDING-RIGHT: 6px">
<DIV class="ee_editable eev_element" style="WIDTH: 269px; POSITION: static">
<SPAN style="FONT-FAMILY: georgia, serif; COLOR: #333333"><I><SPAN style="FONT-SIZE: 14px">Connect with </SPAN></I></SPAN><SPAN style="COLOR: #333333"><SPAN style="FONT-SIZE: 12px; FONT-FAMILY: georgia, serif"><BR></SPAN></SPAN>
<DIV></DIV>
<DIV></DIV>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>

<A href="https://twitter.com/"><IMG class="ee_smallimage ee_editable ee_pnggif_image vedpw29" style="HEIGHT: 29px; WIDTH: 29px; MARGIN-LEFT: 0px; MARGIN-TOP: 0px; DISPLAY: block" border=0 hspace=3 alt=t src="https://i.emlfiles.com/cmpimg/9/6/4/5/8/files/4549587_ictwit.png" width=29 align=left height=29></A>

<A href="https://www.facebook.com/"><IMG class="ee_smallimage ee_editable ee_pnggif_image vedpw29" style="HEIGHT: 29px; WIDTH: 29px; MARGIN-LEFT: 0px; MARGIN-TOP: 0px; DISPLAY: block" border=0 hspace=3 alt=f src="https://i.emlfiles.com/cmpimg/9/6/4/5/8/files/4549588_icfb.png" width=29 align=left height=29></A>

<A href="http://www.youtube.com/user/"><IMG class="ee_smallimage ee_editable ee_pnggif_image vedpw29" style="HEIGHT: 29px; WIDTH: 29px; MARGIN-LEFT: 0px; MARGIN-TOP: 0px; DISPLAY: block" border=0 hspace=3 alt=yt src="https://i.emlfiles.com/cmpimg/9/6/4/5/8/files/4549589_icyt.png" width=29 align=left height=29></A>

<A href="https://itunes.apple.com/podcast/chatham-house-podcast/"><IMG class="ee_smallimage ee_editable ee_pnggif_image vedpw29" style="HEIGHT: 29px; WIDTH: 29px; MARGIN-LEFT: 0px; MARGIN-TOP: 0px; DISPLAY: block" border=0 hspace=3 alt=iT src="https://i.emlfiles.com/cmpimg/9/6/4/5/8/files/4549590_icitunes.png" width=29 align=left height=29></A>

<A href="https://www.linkedin.com/company/"><IMG class="ee_smallimage ee_editable ee_pnggif_image vedpw29" style="HEIGHT: 29px; WIDTH: 29px; MARGIN-LEFT: 0px; MARGIN-TOP: 0px; DISPLAY: block" border=0 hspace=3 alt=in src="https://i.emlfiles.com/cmpimg/9/6/4/5/8/files/4549591_icin.png" width=29 align=left height=29></A>

<A href="https://www.flickr.com/photos/"><IMG class="ee_smallimage ee_editable ee_pnggif_image vedpw29" style="HEIGHT: 29px; WIDTH: 29px; MARGIN-LEFT: 0px; MARGIN-TOP: 0px; DISPLAY: block" border=0 hspace=3 alt=fl src="https://i.emlfiles.com/cmpimg/9/6/4/5/8/files/4549592_icflick.png" width=29 align=left height=29></A>
</DIV>

I've been asked to look at an issue with an e-mail template for a client so this isn't my code and unfortunately, I know very little about HTML! I've managed to address some minor formatting changes but the issue that I'm having now is the way that the template is displayed in Outlook 2010 (bottom screenshot) vs 2013 (top screenshot).

I need it so that the 'Connect with' text is aligned left so that it's over the 6 social media icons but I also want the spacing between the icons. Above is a snippet of the code, can anyone offer any pointers?

 

[hargi]

<TD class=ee_pad style="WIDTH: auto; PADDING-BOTTOM: 6px; PADDING-TOP: 6px; PADDING-RIGHT: 6px">
<DIV class="ee_editable eev_element" style="WIDTH: 269px; POSITION: static">
<SPAN style="FONT-FAMILY: georgia, serif; COLOR: #333333"><I><SPAN style="FONT-SIZE: 14px">Connect with </SPAN></I></SPAN><SPAN style="COLOR: #333333"><SPAN style="FONT-SIZE: 12px; FONT-FAMILY: georgia, serif"><BR></SPAN></SPAN>
<DIV></DIV>
<DIV></DIV>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>

<A href="https://twitter.com/"><IMG class="ee_smallimage ee_editable ee_pnggif_image vedpw29" style="HEIGHT: 29px; WIDTH: 29px; MARGIN-LEFT: 0px; MARGIN-TOP: 0px; DISPLAY: block" border=0 hspace=3 alt=t src="https://i.emlfiles.com/cmpimg/9/6/4/5/8/files/4549587_ictwit.png" width=29 align=left height=29></A>

<A href="https://www.facebook.com/"><IMG class="ee_smallimage ee_editable ee_pnggif_image vedpw29" style="HEIGHT: 29px; WIDTH: 29px; MARGIN-LEFT: 5px; MARGIN-TOP: 0px; DISPLAY: block" border=0 hspace=3 alt=f src="https://i.emlfiles.com/cmpimg/9/6/4/5/8/files/4549588_icfb.png" width=29 align=left height=29></A>

<A href="http://www.youtube.com/user/"><IMG class="ee_smallimage ee_editable ee_pnggif_image vedpw29" style="HEIGHT: 29px; WIDTH: 29px; MARGIN-LEFT: 5px; MARGIN-TOP: 0px; DISPLAY: block" border=0 hspace=3 alt=yt src="https://i.emlfiles.com/cmpimg/9/6/4/5/8/files/4549589_icyt.png" width=29 align=left height=29></A>

<A href="https://itunes.apple.com/podcast/chatham-house-podcast/"><IMG class="ee_smallimage ee_editable ee_pnggif_image vedpw29" style="HEIGHT: 29px; WIDTH: 29px; MARGIN-LEFT: 5px; MARGIN-TOP: 0px; DISPLAY: block" border=0 hspace=3 alt=iT src="https://i.emlfiles.com/cmpimg/9/6/4/5/8/files/4549590_icitunes.png" width=29 align=left height=29></A>

<A href="https://www.linkedin.com/company/"><IMG class="ee_smallimage ee_editable ee_pnggif_image vedpw29" style="HEIGHT: 29px; WIDTH: 29px; MARGIN-LEFT: 5px; MARGIN-TOP: 0px; DISPLAY: block" border=0 hspace=3 alt=in src="https://i.emlfiles.com/cmpimg/9/6/4/5/8/files/4549591_icin.png" width=29 align=left height=29></A>

<A href="https://www.flickr.com/photos/"><IMG class="ee_smallimage ee_editable ee_pnggif_image vedpw29" style="HEIGHT: 29px; WIDTH: 29px; MARGIN-LEFT: 5px; MARGIN-TOP: 0px; DISPLAY: block" border=0 hspace=3 alt=fl src="https://i.emlfiles.com/cmpimg/9/6/4/5/8/files/4549592_icflick.png" width=29 align=left height=29></A>

 

[El Jimben]

Thanks hargi but I've now found that using 5px makes the icons extend passed the text. When I look at the e-mail in webmail however, there is padding not shown in the Outlook 2013 display.

 

[radderfire]

I think the reason you can see the spacing between icons in Outlook 2010 is because the code uses the hspace property which is suitable for Outlook 2010, but it is an "old" HTML technique and that is probably why it's not recognised in Outlook 2013. I'm not sure what the accepted spacing technique is for Outlook 2013, but in modern browsers it would be by using CSS to add margin to an image.

See also:

http://robcubbon.com/create-html-email-newsletters-outlook/

 

[iKettles]

You should check out Litmus, very useful when you need to quickly prototype email templates across platforms.