1

We use the Magento 1.9.1 email template for sending emails to customers. Everything works great, except for Outlook.com.

Outlook.com does not support margin-left: auto; and margin-right: auto;.
So how can we fix the problem that the email is aligned left, not in the center?

We use this code:

{{template config_path="design/email/header"}}
{{inlinecss file="email-inline.css"}}

<table  class="table-bestelling-content" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#ffffff">
    <tr align="center" class="header" style="max-width: 600px; display: block; margin-left: auto; margin-right: auto;">
        <td align="center">
            <table cellpadding="0" cellspacing="0" border="0" width="100%;" >
                <tr>
                    <td class="email-heading head">
                        <h1>ORDERBEVESTIGING</h1>
                        <p>Hi {{htmlescape var=$order.getCustomerFirstname()}},</p> 
                        <p>Bedankt voor je bestelling!</p>
                        <p>Je bestelling heeft ordernummer {{var order.increment_id}}.</p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr class="details">
        <td class="order-details">
            <h1>OVERZICHT BESTELLING</h1>
        </td>
    </tr>
    <tr class="order-information">
        <td>
            {{if order.getEmailCustomerNote()}}
            <table cellspacing="0" cellpadding="0" class="message-container">
                <tr>
                    <td>{{var order.getEmailCustomerNote()}}</td>
                </tr>
            </table>
            {{/if}}
            {{layout handle="sales_email_order_items" order=$order}}
            <table cellpadding="0" cellspacing="0" border="0">
                <tr class="address-block">
                    <td class="address-details">
                        <h6>FACTUURADRES</h6>
                        <p><span class="no-link">{{var order.getBillingAddress().format('html')}}</span></p>
                    </td>
                    {{depend order.getIsNotVirtual()}}
                    <td class="address-details">
                        <h6>AFLEVERADRES</h6>
                        <p><span class="no-link">{{var order.getShippingAddress().format('html')}}</span></p>
                    </td>
                    {{/depend}}
                </tr>
                <tr>
                    <td class="method-info">
                        <h6>BETAALWIJZE</h6>
                        {{var payment_html}}
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
{{template config_path="design/email/footer"}}

Header:

<!--@subject Email - Header @-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
</head>
<body>
{{var non_inline_styles}}
<!-- Begin wrapper table -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" id="background-table">
    <tr>
        <td valign="top" class="container-td" align="center">
            <table cellpadding="0" cellspacing="0" border="0" align="center" class="container-table">
                <tr>
                    <td>
                        <table class="table-bestelling-header" cellpadding="0" width="100%" cellspacing="0" border="0" class="logo-container" style="background-color:#f0575c;">
                            <tr style="max-width: 600px; display: block; margin-left: auto; margin-right: auto;">
                                <td class="logo">
                                    <a href="{{store url=""}}">
                                        <img
                                            {{if logo_width}}
                                            width="{{var logo_width}}"
                                            {{else}}
                                            width="165"
                                            {{/if}}

                                            {{if logo_height}}
                                            height="{{var logo_height}}"
                                            {{else}}
                                            height="50"
                                            {{/if}}

                                            src="{{var logo_url}}"
                                            alt="{{var logo_alt}}"
                                            border="0"/>
                                    </a>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td valign="top" class="content-data top-content">
                    <!-- Begin Content -->

Footer:

<!--@subject Email - Footer @-->
                    <!-- End Content -->
                    </td>
                </tr>
                <tr class="footer-blocks">
                <td style="background-color:#f2f2f2; border-radius:5px;">

                    <table class="footer-blocks-side" width="600" border="0" cellpadding="0" cellspacing="0">
                        <tr class="footer-blocks-topper">
                            <td class="footer-blocks-top">
                                <table class="footer-blocks-left" width="225" border="0" cellspacing="0" cellpadding="20" align="left">
                                    <tr>
                                        <td>
                                        <h4 class="footer-blocks-title">SUGGESTIES?</h4>
                                        <p>Text</p>
                                        <p>Text</p>
                                        <a class="underline" style="color: #333333;" href="/test">
                                        Mail je suggesties door</a>
                                        </td>
                                    </tr>
                                </table>

                                <table class="footer-blocks-center" width="225" border="0" cellspacing="0" cellpadding="20" align="left">
                                    <tr>
                                        <td>
                                        <h4 class="footer-blocks-title">SERVICE</h4>
                                        <div style="padding-top: 10px;">
                                        <img class="icon-vinkje" style="width:22px; height:22px; vertical-align:middle" src=/test">
                                        <p class="tekst-vinkje" style="padding-left: 5px; display: inline-block;">Gratis verzending</p>
                                        </div>
                                        <div>
                                        <img class="icon-vinkje" style="width:22px; height:22px; vertical-align:middle" src="/test">
                                        <p class="tekst-vinkje" style="padding-left: 5px; display: inline-block;">14 dagen bedenktermijn</p>
                                        </div>
                                        <div>
                                        <img class="icon-vinkje" style="width:22px; height:22px; vertical-align:middle" src="/test">
                                        <p class="tekst-vinkje" style="padding-left: 5px; display: inline-block;">Statusupdates via e-mail</p>
                                        </div>
                                        <div>
                                        <img class="icon-vinkje" style="width:22px; height:22px; vertical-align:middle" src="/test">
                                        <p class="tekst-vinkje" style="padding-left: 5px; display: inline-block;">Deskundig hulp en advies</p>
                                        </div>
                                        </td>
                                    </tr>
                                </table>

                                <table class="footer-blocks-right" width="150" border="0" cellspacing="0" cellpadding="20" align="left">
                                    <tr>
                                        <td>
                                        <img src="/test">
                                        </td>
                                    </tr>
                                </table>

                            </td>
                        </tr>
                    </table>

                    <table class="footer-blocks-side" width="600" border="0" cellpadding="0" cellspacing="0">
                        <tr class="footer-blocks-bottom">
                            <td class="footer-blocks-bottom">
                                <table class="footer-blocks-left contact" width="150" border="0" cellspacing="0" cellpadding="20" align="left">
                                    <tr>
                                        <td class="icon">
                                        <a href="/test">
                                        <img style="height: 30px;" src="/test">
                                        </a>
                                        </td>
                                        <td class="contact">
                                        <a class="non-link" href="/test">
                                        <h4 class="footer-blocks-title contact">BELLEN</h4>
                                        <p class="footer-blocks-contact"></p>
                                        </a>
                                        </td>
                                    </tr>
                                </table>

                                <table class="footer-blocks-center contact" width="150" border="0" cellspacing="0" cellpadding="20" align="left">
                                    <tr>
                                        <td class="icon">
                                        <a href="/test">
                                        <img style="height: 30px;" src="/test">
                                        </a>
                                        </td>
                                        <td class="contact">
                                        <a class="non-link" href="/test">
                                        <h4 class="footer-blocks-title contact">MAILEN</h4>
                                        <p class="footer-blocks-contact">Antwoord in 2 uur</p>
                                        </a>
                                        </td>
                                    </tr>
                                </table>

                                <table class="footer-blocks-left contact" width="150" border="0" cellspacing="0" cellpadding="20" align="left">
                                    <tr>
                                        <td class="icon">
                                        <a href="/test">
                                        <img style="height: 30px;" src="/test">
                                        </a>
                                        </td>
                                        <td class="contact">
                                        <a class="non-link" href="/test">
                                        <h4 class="footer-blocks-title contact">FACEBOOK</h4>
                                        <p class="footer-blocks-contact">Antwoord in 30 min.</p>
                                        </a>
                                        </td>
                                    </tr>
                                </table>

                                <table class="footer-blocks-right contact" width="150" border="0" cellspacing="0" cellpadding="20" align="left">
                                    <tr>
                                        <td class="icon">
                                        <a href="/test">
                                        <img style="height: 30px;" src="/test">
                                        </a>
                                        </td>
                                        <td class="contact">
                                        <a class="non-link" href="/test">
                                        <h4 class="footer-blocks-title contact">Twitter</h4>
                                        <p class="footer-blocks-contact">Antwoord in 30 min.</p>
                                        </a>
                                        </td>
                                    </tr>
                                </table>


                            </td>
                        </tr>
                    </table>

                    </tr>

                    <tr class="footer-block-payment">
                <td style="background-color:#ffffff; border-radius:5px;">

                    <table class="footer-blocks-side" width="600" border="0" cellpadding="0" cellspacing="0">
                        <tr class="footer-blocks-bottomfoot">
                            <td class="footer-blocks-bottom">
                                <table class="footer-blocks-left icon" width="200" border="0" cellspacing="0" cellpadding="20" align="left">
                                    <tr>
                                        <td class="payment-icon" style="display: none;">
                                        <img src="/test">
                                        </td>
                                        <td class="payment-icon">
                                        <img src="/test">
                                        </td>
                                        <td class="payment-icon">
                                        <img src="/test">
                                        </td>
                                    </tr>
                                </table>

                                <table class="footer-blocks-right icon" width="300" border="0" cellspacing="0" cellpadding="20" align="right">
                                    <tr>
                                        <td class="contact">
                                        <a class="footer-blocks-link" href="/test">Algemene voorwaarden</a>
                                        </td>
                                        <td class="contact">
                                        <a class="footer-blocks-link" href="/test">Privacy</a>
                                        </td>
                                        <td class="contact">
                                        <a class="footer-blocks-link" href="/test">Contact</a>
                                        </td>
                                    </tr>
                                </table>

                            </td>
                        </tr>
                    </table>

                    </tr>
                    </tbody>
                    </table>
                </td>

                </tr>
               </tbody>
               </table>
                </td>
                </tr>
                </tr>            
            </table>
        </td>
    </tr>
</table>
<!-- End wrapper table -->
</body>
Improve this question

1 Answer 1

Reset to default
1

Try wrapping the existing table in another 100% width <table> with align="center" and then make your existing <table> max-width: 600px instead of the <tr>.

<table  class="table-bestelling-content" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#ffffff">
    <tr align="center">
        <td align="center">
            <table  class="table-bestelling-content" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#ffffff; max-width: 600px; display: block;">
                <tr align="center" class="header">
                    <td align="center">
                        <table cellpadding="0" cellspacing="0" border="0" width="100%;" >
                            <tr>
                                <td class="email-heading head">
                                    <h1>ORDERBEVESTIGING</h1>
                                    <p>Hi {{htmlescape var=$order.getCustomerFirstname()}},</p> 
                                    <p>Bedankt voor je bestelling!</p>
                                    <p>Je bestelling heeft ordernummer {{var order.increment_id}}.</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr class="details">
                    <td class="order-details">
                        <h1>OVERZICHT BESTELLING</h1>
                    </td>
                </tr>
                <tr class="order-information">
                    <td>
                        {{if order.getEmailCustomerNote()}}
                        <table cellspacing="0" cellpadding="0" class="message-container">
                            <tr>
                                <td>{{var order.getEmailCustomerNote()}}</td>
                            </tr>
                        </table>
                        {{/if}}
                        {{layout handle="sales_email_order_items" order=$order}}
                        <table cellpadding="0" cellspacing="0" border="0">
                            <tr class="address-block">
                                <td class="address-details">
                                    <h6>FACTUURADRES</h6>
                                    <p><span class="no-link">{{var order.getBillingAddress().format('html')}}</span></p>
                                </td>
                                {{depend order.getIsNotVirtual()}}
                                <td class="address-details">
                                    <h6>AFLEVERADRES</h6>
                                    <p><span class="no-link">{{var order.getShippingAddress().format('html')}}</span></p>
                                </td>
                                {{/depend}}
                            </tr>
                            <tr>
                                <td class="method-info">
                                    <h6>BETAALWIJZE</h6>
                                    {{var payment_html}}
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

{{template config_path="design/email/footer"}}

This also might be better in a more generalized Stackexchange post, as it's not really specific to Magento, but is just an HTML email question.

Improve this answer
3
  • Thanks Tyler, it works for this part, but I can't get it fixed with the footer and header. How do I need the fix these? I edit my question with footer and header.
    – JGeer
    Commented Feb 3, 2015 at 21:18
  • Check the final HTML that you end up with in the email that gets sent out. Most likely the block that is included in your first template ({{template config_path="design/email/footer"}}) needs to be moved into the wrapper table.
    – Tyler V.
    Commented Feb 3, 2015 at 21:27
  • Thats what I tried, but that did not work. I also tried to add your lines to the header and footer template, but that also did not work.
    – JGeer
    Commented Feb 3, 2015 at 21:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.