CODEWITHSUNDEEP
htmloutlookhtml-emailnewsletter
bmoneruxui
bmoneruxui

Reputation: 313

Table Email Issues in Windows Outlook 365

To answer questions ahead of time, the client DEMANDS we create it this way. We've explained how inefficient and sloppy it can look on different email clients but they don't care. Old, tried and true is their motto.

Now...we seem to be having an issue with their email news latter. The bottom portion o the newsletter is breaking. This issue only shows on Windows Outlook clients. None else. We can't find errors in the code...so we decided to turn to StackOverflow for a possible solution.

<html>
<head>
<title>Want to grab their attention?</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="600" height="1100" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td style="line-height:106px;" colspan="3">
            <img style="display:block;" src="https://s3.amazonaws.com/thehenryford/eblast_36828/MKTG_5245_MI_meeting_and_events_01.jpg" width="600" height="106" alt=""></td>
    </tr>
    <tr>
        <td style="line-height:362px;" colspan="3">
            <a href="http://www.thehenryford.org/privateevents/venues2.aspx">
                <img style="display:block;" src="https://s3.amazonaws.com/thehenryford/eblast_36828/Grab-Their-Attention.jpg" width="600" height="362" border="0" alt="Grab Their Attention"></a></td>
    </tr>
    <tr>
        <td style="line-height:25px;" colspan="3">
            <img style="display:block;" src="https://s3.amazonaws.com/thehenryford/eblast_36828/MKTG_5245_MI_meeting_and_events_03.jpg" width="600" height="25" alt=""></td>
    </tr>
    <tr>
        <td style="line-height:607px;" rowspan="2">
            <img style="display:block;" src="https://s3.amazonaws.com/thehenryford/eblast_36828/MKTG_5245_MI_meeting_and_events_04.jpg" width="39" height="607" alt=""></td>
        <td style="line-height:39px;">
            <a href="http://www.thehenryford.org/plan/">
                <img style="display:block;" src="https://s3.amazonaws.com/thehenryford/eblast_36828/Get-Started.jpg" width="125" height="39" border="0" alt="Get started"></a></td>
        <td style="line-height:607px;" rowspan="2">
            <img style="display:block;" src="https://s3.amazonaws.com/thehenryford/eblast_36828/MKTG_5245_MI_meeting_and_events_06.jpg" width="436" height="607" alt=""></td>
    </tr>
    <tr>
        <td style="line-height:586px;">
            <img style="display:block;" src="https://s3.amazonaws.com/thehenryford/eblast_36828/MKTG_5245_MI_meeting_and_events_07.jpg" width="125" height="568" alt=""></td>
    </tr>
</table>
</body>
</html>

Upvotes: 0

Views: 300

Answers (1)

edu8rdo
edu8rdo

Reputation: 214

I was able to replicate break in bottom and fix.
1 - avoid rowspan like plague
2 - line height served no purpose

Code below: 

<html>
<head>
    <title>Want to grab their attention?</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <table border="0" cellpadding="0" cellspacing="0" width="600">
        <tr>
            <td colspan="3" style="line-height:106px;"><img alt="" height="106" src="https://s3.amazonaws.com/thehenryford/eblast_36828/MKTG_5245_MI_meeting_and_events_01.jpg" style="display:block;" width="600"></td>
        </tr>
        <tr>
            <td colspan="3" style="line-height:362px;">
                <a href="http://www.thehenryford.org/privateevents/venues2.aspx"><img alt="Grab Their Attention" border="0" height="362" src="https://s3.amazonaws.com/thehenryford/eblast_36828/Grab-Their-Attention.jpg" style="display:block;" width="600"></a>
            </td>
        </tr>
        <tr>
            <td colspan="3" style="line-height:25px;"><img alt="" height="25" src="https://s3.amazonaws.com/thehenryford/eblast_36828/MKTG_5245_MI_meeting_and_events_03.jpg" style="display:block;" width="600"></td>
        </tr>
        <tr>
            <td style="line-height:607px;"><img alt="" height="607" src="https://s3.amazonaws.com/thehenryford/eblast_36828/MKTG_5245_MI_meeting_and_events_04.jpg" style="display:block;" width="39"></td>
        </td>
        <td align="left" valign="top">
            <table cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>
                    <td align="left" valign="top">
                        <a href="http://www.thehenryford.org/plan/"><img alt="Get started" border="0" height="39" src="https://s3.amazonaws.com/thehenryford/eblast_36828/Get-Started.jpg" style="display:block;" width="125"></a>
                    </td>
                </tr>
                <tr>
                    <td><img alt="" height="568" src="https://s3.amazonaws.com/thehenryford/eblast_36828/MKTG_5245_MI_meeting_and_events_07.jpg" style="display:block;" width="125"></td>
                </tr>
            </table>
        </td>
        <td style="line-height:607px;"><img alt="" height="607" src="https://s3.amazonaws.com/thehenryford/eblast_36828/MKTG_5245_MI_meeting_and_events_06.jpg" style="display:block;" width="436"></td>
    </tr>
</table>
</body>
</html>

Upvotes: 1

Related Questions