Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
MS Outlook 2007 & 2010 eroding spacing when including a link

sheixt

Newbie
Total Posts:  2
Posted: 22 March 2012 06:26 AM

Hi guys,

I was wondering if you can help me. I am coding up an email and (as usual) Outlook 07+10 are being the bane of my existence! I have coded up the email following the advice from Email on Acid (massive thanks!!) & the Email Boilerplate (http://htmlemailboilerplate.com/).

The problem I am having is with paragraph margins. This is the section my code:

div style=" font-size:11px; line-height:13px; font-weight: normal; font-family: Helvetica, Arial, sans-serif; color:#666666; text-decoration:none; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;" class=footerText>
<
p style="margin-top: 0; margin-right: 0; margin-bottom: 1em; margin-left: 0; text-align: right;text-align: right;">
<
span style=" font-size:11px; line-height:13px; font-weight: normal; font-family: Helvetica, Arial, sans-serif; color:#666666; text-decoration:none; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;" class=footerText>
<
a href='#' title='' style='cursor:pointer'>Edit your preferences</a>
</
span>
</
p>
</
div>
<
div style=" font-size:11px; line-height:13px; font-weight: normal; font-family: Helvetica, Arial, sans-serif; color:#666666; text-decoration:none; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;" class=footerText>
<
p style="margin-top: 0; margin-right: 0; margin-bottom: 1em; margin-left: 0; text-align: right;text-align: right;">
<
span style=" font-size:11px; line-height:13px; font-weight: normal; font-family: Helvetica, Arial, sans-serif; color:#666666; text-decoration:none; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;" class=footerText>
<
a href='#' title='' style='cursor:pointer'>Forward this email</a>
</
span>
</
p>
</
div

This is two simple links, each in a paragraph. As I have in-lined a margin definition the text should space out fine. However MS Outlook 07+10 completely strips out the margin! You can see the results here.

I have taken steps to attempt to resolve this including; adding margin/padding definitions within the anchor tag. Alas no joy!

If anyone can suggest the reason/a solution for this I would be massively grateful!! I can provide any additional information if need be.

Thanks
George


 

Michelle Klann

Avatar
Administrator
Total Posts:  204
Posted: 23 March 2012 09:17 AM
[ # 1 ]

Hey George,

Sometimes it’s easier to convert to tables and use td padding.  This worked for me to get your desired effect:

<table width="100%" cellpadding="0" cellspacing="0">
    <
tr>
        <
td align="right" class="footerText" style="
            padding: 0 0 10px 0; 
            font-size:11px; 
            line-height:13px; 
            font-weight: normal; 
            font-family: Helvetica, Arial, sans-serif; 
            color:#666666; 
            text-decoration:none; 
            -webkit-font-smoothing:antialiased; 
            -webkit-text-size-adjust:none; 
            -ms-text-size-adjust:none;" 
>
            <
a href='#' title='' style='cursor:pointer'>
                
Edit your preferences
            
</a>
        </
td>
    </
tr>
    <
tr>
        <
td align="right" class="footerText" style="
            padding: 0 0 10px 0; 
            font-size:11px; 
            line-height:13px; 
            font-weight: normal; 
            font-family: Helvetica, Arial, sans-serif; 
            color:#666666; 
            text-decoration:none; 
            -webkit-font-smoothing:antialiased; 
            -webkit-text-size-adjust:none; 
            -ms-text-size-adjust:none;" 
>
            <
a href='#' title='' style='cursor:pointer'>
                
Edit your preference
            
</a>
        </
td>
    </
tr>    
</
table

 

sheixt

Newbie
Total Posts:  2
Posted: 26 March 2012 05:33 AM
[ # 2 ]

Hi Michelle,

Thanks for the suggestion. A shed-load of trail & error testing allowed me to find a cause for the problem.

The whole issue was related to the class=classname references in my code.

I had used a little script to in-line the styling where ever it found a class. As part of it’s processing that script removed the quote marks around the class name.

If you simply remove out that (bad) class-name reference it all works fine:

<div style=" font-size:11px; line-height:13px; font-weight: normal; font-family: Helvetica, Arial, sans-serif; color:#666666; text-decoration:none; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;">
<
p style="margin-top: 0; margin-right: 0; margin-bottom: 1em; margin-left: 0; text-align: right;text-align: right;">
<
span style=" font-size:11px; line-height:13px; font-weight: normal; font-family: Helvetica, Arial, sans-serif; color:#666666; text-decoration:none; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;">
<
a href='#' title='' style='cursor:pointer'>Edit your preferences</a>
</
span>
</
p>
</
div

I hope this helps someone!