CODEWITHSUNDEEP
outlookhtml-tablehtml-emailoutlook-2010outlook-2007
user1933083
user1933083

Reputation: 11

HTML Table Spacing weirdness in Outlook 2010 and 2007

I'm coding a HTML email newsletter and I'm getting very weird spacing issues for my tables in Outlook 2007 and 2010

My code which works fine in all other clients is here:

<table width="575" align="center" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td bgcolor="#0054a4" style="padding-left:20px; padding-right:20px; padding-top:20px; padding-bottom:20px; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px">
            <a href="http://www.lgfhfghfhfhfghf" target="_blank" style="font-family:Myriad Pro, Verdana, Georgia; font-size:30px; line-height: 34px; font-style:normal; color:#ffffff; text-decoration:none;">
                <center>
                    <span style="font-weight:bold;">register</span> for <span style="font-style:lighter;color:#fce000;">mkk</span><span style="color:#fce000; font-weight:bold;"> 56565464646 </span><span style="font-weight:normal; text-decoration:underline;">click here</span></strong>
                </center>
            </a>
        </td>
    </tr>
    <tr>
        <td bgcolor="#fce000" style="padding-left:20px; padding-right:20px; padding-top:10px; padding-bottom:15px; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px"><a href="http://www.fgdfgdg" target="_blank" style="font-family:Myriad Pro, Verdana, Georgia; font-size:30px; line-height: 30px; font-style:normal; color:#ffffff; text-decoration:none;">
                <center>
                    <span style="font-style:lighter;color:#0054a4;">lll</span><span style="color:#0054a4; font-weight:bold;"> ffgfgf </span><span style="font-weight:normal; color:#000000; text-decoration:none;">is proudly sponsored by</span></strong>
                </center>
            </a></td>
    </tr>
    <tr>
        <td bgcolor="#0054a4" style="padding-left:0px; padding-right:0px; padding-top:0px; padding-bottom:0px; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px">
            <a href="http://www.gdfgdfgdf" target="_blank"><img name="fgdgfg" src="http://fgfdgdgdg" width="575" height="76" style="font-size:20px; color:#fce000;" alt="fgfdgdfgdfg" border="0"/></a>
        </td>
    </tr>
</table>
<table bgcolor="#0055a5" align="center" width="575" border="0" cellspacing="0" cellpadding="10">
    <tr>
        <td align="left" bgcolor="#0055a5" valign="top">
            <img src="http://www.fdgfdgdfgdfgdf.png" height="50" width="50" alt="gggggg" align="top" border="no" style="margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;" />
        </td>
        <td align="right" bgcolor="#0055a5" valign="top" style="margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:30px;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:20px;color:#fce000;" >
            <span style="font-weight:bold;color:##fce000;" >gfrtryrtytryrtyrty</span><br />
            rtrtrtrtertretertetertertertertertertertetert <font style="text-decoration:none;">tertetertetetet</font> <a href=mailto:fgdfgdfgdgdfgfdstyle="color:#fce000; text-decoration:none;" >rtdfgdfgdfgdfg</a> / <a href="http://www.fgdfgdfgdgdgdf" target="_blank" style="color:#fce000;text-decoration:none;">www.fgfgdfgfgd/expo</a><br />
            <strong> To unsubscribe from this newsletter </strong><a href="http://$UNSUB$" style="color:#fce000; font-weight: bold; text-decoration: underline" >click here</a>
        </td>
    </tr>
</table>

Screenshot of the weirdness: weirdness

Screenshot of working email:

working

Upvotes: 1

Views: 1881

Answers (2)

Josh Moore
Josh Moore

Reputation: 381

Here's a helpful list of quirks in Outlook 2007, 2010 and 2013 in how it displays HTML emails: http://www.emailonacid.com/blog/details/C13/tips_and_tricks_outlook_07-13#outlook07-13_tip16

The page includes this tip, which fits with the way you've coded the table:

Avoid using “margin” or “padding” CSS properties in your TABLE tag. Cellpadding and Cellspacing attributes are generally safe but margin or padding will often be added to every TD within the table.

Hope that helps get to the bottom of it.

Upvotes: 1

NoLifeKing
NoLifeKing

Reputation: 1939

Take a look at this page:

http://www.campaignmonitor.com/css/

They have a pdf that contains what works in mailclients, css, html and more.

Upvotes: 1

Related Questions