CODEWITHSUNDEEP
htmlemailoutlook
Mindaugas
Mindaugas

Reputation: 1183

html email outlook doubles size of my table

I have this table in my e.mail template and for some reason in outlook 2013 it apears double the height than it is actualy set:

[EDIT now codel looks like this]

<table align="center" border="0" cellpadding="0" cellspacing="0" height="6" width="100%" style="height: 6px; font-size: 6px; background-color:#d8ebf6; line-height= 6px;">
            <tr class="preheader" width="100%" style="background-color:#d8ebf6;">
                <td style="background-color:#d8ebf6;" align="left"></td><td height="6" width="600" align="center" style="background-color: #00568A;" valign="top"></td><td style="background-color:#d8ebf6;" align="right"></td>
            </tr>
        </table>

DEMO Maybe some ideas why this happens or how to solve the issue?

Upvotes: 0

Views: 112

Answers (2)

Lloyd Birch
Lloyd Birch

Reputation: 31

Outlook will ignore height on empty table cells, it's minimum height is about 10px. You can add a non breaking space &nbsp; and this will look empty but satisfy outlooks desire to always be awkward.

Upvotes: 1

Mindaugas
Mindaugas

Reputation: 1183

So I wanted to share the solution I found which works fine both in outlook and common email inboxes: Basically I needed to nest table in a table to get this dark blue part in the middle which on lower than 600 resolution takes up 100% width. And I needed to add font size and invisible char &#8203;, because otherwise outlook was making two lines instead of intended one line.

Using previously posted code and adding invisible chars between <td></td> tags and adding font size helped as well, but on mobile(lower than 600 resolution) these invisible chars were leaving small whitespaces from left and right, so dark blue was not taking whole width as wanted.

Code:

<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" class="res_width">
                <tr class="preheader" style="background-color:#d8ebf6;">
                    <td align="center" valign="top">
                        <table border="0" cellpadding="0" cellspacing="0" width="600" class="res_width">
                            <tr>
                                <td valign="middle" height="6" width="600" style="background-color: #00568A; font-size: 6px;">
                                &#8203;
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>

DEMO

Upvotes: 0

Related Questions