发表新帖
发表新帖

Rich HTML emails in Outlook 2007 and 2010… how do you remove the top margin?

前端 未结
关注
7 683
无人及你
无人及你 2020-12-14 12:16

I have a rich HTML email. I was wondering how, in Outlook 2010 and 2007, you get the table in the layout to sit flush with the edge of the browser?

Have a look at th

相关标签:
7条回答
  • 甜味超标
    2020-12-14 12:26

    Try using margintop="0" marginleft="0" marginright="0" on the <body> tag (updated to full example):

    <html>
<head>
  <title>Title Tag</title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body margintop="0" marginleft="0" marginright="0" bgcolor="#ff00ff">
<table width="100%" cellmargin="0" cellspacing="0" border="0"><tr><td width="100%">
<table width="600" cellpadding="0" cellspacing="0" bgcolor="#ffffff"><tr><td width="600">

</td></tr></table>
</td></tr></table>
</body>
</html>

    You will need to set the width of 600 to whatever the width of your email is.

    There are cross-email client bugs with body tags, and padding/margin values in CSS.

    NB - this is only necessary, and only works, on the body tag.

    0 讨论(0)
  • 执念已碎
    2020-12-14 12:27

    I know this is a bit late, but I came across this post and thought you might be able to test this method as well.

    http://theboywhocriedfox.com/code-snippets/fixing-the-forced-body-padding-in-outlook-2007-2010-and-2013/

    "Fixing the forced body padding in Outlook 2007, 2010 and 2013

    Testing a html email recently with a high percentage of recipients likely to be users of Microsoft Outlook I came across a bug where it’s not possible to overwrite the forced body padding in versions of outlook (which use MS Words rendering engine 2007, 2010, 2013).

    This was breaking the design and causing unwanted whitespace on the left margin of the email. The offending versions of outlook support margin (including negative margin) but only support inline styles. So the fix/hack is to wrap the entire email in a wrapper table and apply negative margin to just the problematic email clients – using html ‘if statements’ as below."

    <!--[if !gte mso 9]><!---->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
   <td>
<!--<![endif]-->

<!--[if gte mso 9]>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-left:-10px;">
 <tr>
   <td>
<![endif]-->
    <!-- YOUR CONTENT HERE -->
    </td>
  </tr>
</table>
    0 讨论(0)
  • 离开以前
    2020-12-14 12:28

    Outlook uses the broken Microsoft Word HTML engine and is not based on any reasonable resemblance to a browser.

    If you have Word, you can at least open your email as html and see how it renders it without having to go through the whole mail cycle.

    Outlook really in the bane of any email marketer. It is an absolute pile of crap and fails to support even the most basic CSS expectations.

    I'd have to have many frank and disappointing discussions with graphic designers over the limitations of email as a platform due to Outlook. Microsoft has seriously made a step backwards in using the Word engine for Outlook.

    0 讨论(0)
  • 爱一瞬间的悲伤
    2020-12-14 12:29

    Stange that the <body style="padding:0px; margin:0px;"> doesn't work.

    I find that with outlook 2007/2010 that if you have padding-top applied to a column but not the other columns in the same row Outlook will apply that padding to all the columns for some reason. Are you able to paste more of the email code so we can have a look that its not something else causing the issue.

    0 讨论(0)
  • 既然无缘
    2020-12-14 12:37

    As outlook doesn't support margin -reference. My work around to this issue was as below. Hope it will help someone. 

                    <table cellpadding="0" cellspacing="0" border="0" style="width:100% !important;  margin:0; padding:0; background-color:#ffffff; line-height: 100% !important; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                    <!-- SECTION:TOP -->
                    <tr style="margin:0; padding:0; border:0;">
                        <td>
                            <img src="/assets/images/10049-2013-Email_03.gif" alt="" height="104" width="145" border="0" style="display:block;" />
                        </td>
                        <td>
                            <img src="/assets/images/10049-2013-Email_04.gif" alt="" height="104" width="261" border="0" style="display:block;" />
                        </td>
                        <td>
                            <img src="/assets/images/10049-2013-Email_05.gif" alt="" height="104" width="144" border="0"style="display:block;" />
                        </td>
                    </tr>
                    <tr style="margin:0; padding:0; border:0;">
                        <td>
                            <img src="/assets/images/10049-2013-Email_06.gif" alt="" height="104" width="145" border="0" style="display:block;" />
                        </td>
                        <td>
                            <img src="/assets/images/10049-2013-Email_07.gif" alt="" height="104" width="261" border="0" style="display:block;" />
                        </td>
                        <td>
                            <img src="/assets/images/10049-2013-Email_08.gif" alt="" height="104" width="144" border="0"style="display:block;" />
                        </td>
                    </tr>

    0 讨论(0)
  • 青春惊慌失措
    2020-12-14 12:45

    With pure CSS (I'm not sure the makers of IE like reading that), you can use !important to force the margin and padding of the <table> and the <body> to be 0px:

    html, body
{
  margin: 0px !important;
  padding: 0px !important;
}

table
{
  margin: 0px !important;
}

    Maybe it'll work, but maybe not. I'm not sure how Outlook handles CSS...

    0 讨论(0)
 看不清?
提交回复
热议问题