Why is this HTML code not working in Lotus Notes?

0
votes

I have written an e-mail which works fine in every platform except lotus notes. Can anyone help me with any rationale for this e-mail not working properly in Notes? Here is a screenshot:

img http://kimjongeun.org/images/notes.JPG (fake images obviously)

The e-mail is cut in half - it seems the second section is where the error lies - starts where you can find the image:

img src="http://kimjongeun.org/images/body.png" .

There is excess padding to the right and left and the text is not spacing properly. There are TDS on the right and left which act as padding (50px respectively). I have tried to remove these TDs to no avail.

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Derrrrrp!</title>
    </head>
    <body>
    <center>
    <table cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td>
        <table cellpadding="0" cellspacing="0" border="0" style="background: #002b62;" width="600">

            <tr>
                <td colspan="4" height="212"><img src="http://kimjongeun.org/images/thanks.jpg"  border="0" alt="Thank You from your friends at Derp!" title="Thank you from your friends at Derp!"></td>
            </tr>
            <tr>
                <td width="600" colspan="4" valign="top" style="text-align:center; padding-bottom:10px;">
                    <p style="font-size:20px; color: #FFFFFF; font-family: Verdana; line-height:1.286;">We appreciate your interest in<br>Derp's Derp solutions.</p>
                </td>
            </tr>
            <tr>
                <td colspan="4" height="33"><img src="http://kimjongeun.org/images/dot.png"  border="0" alt="Thank You from your friends at Derp!" title="Thank you from your friends at Derp!">
                </td>
            </tr>
            <tr>

                <td colspan="4">
                <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                <td width="50"></td>
                <td>
                <p style="font-size:16px; font-family: Arial; color: #FFFFFF; text-align:left;line-height:1.3;">
                    Dear Attendee,</p>
                    <p style="font-size:16px; font-family: Arial; color: #FFFFFF; text-align:left;line-height:1.3;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius nibh dictum, fringilla massa a, efficitur ex. Nulla malesuada hendrerit varius. Duis quam</p>
                    <p style="font-size:16px; font-family: Arial; color: #FFFFFF; text-align:left;line-height:1.3;">Nullam vel mi dui. Integer ut tempor ante. Aenean efficitur aliquet tempor. Morbi facilisis vestibulum elit porttitor posuere. Nulla id dolor vulputate, cursus ligula eu, maximus augue. Nulla facilisi. Proin ac scelerisque est, Nulla id dolor vulputate, cursus ligula eu, maximus augue. Nulla facilisi.</p>
                    <p style="font-size:16px; font-family: Arial; color: #FFFFFF; text-align:left;line-height:1.3;">Nulla malesuada hendrerit varius. Duis quam lorem, cursus in turpis ac, bibendum cursus dolor.</p>

                 </td>
                 <td width="50"></td>
                 </tr>
                 </table>
            </tr>
        </table>
    </td>
</tr>
<tr>
    <td>

        <table cellpadding="0" cellspacing="0" border="0" style="background:#D0D3E4" width="600">
            <tr>
                <td colspan="4"><img src="http://kimjongeun.org/images/body.png" height="202" border="0" alt="Thank you from your friends at Derp!" title="Thank You from your friends at Derp!"></td>
            </tr>
            <tr>

                <td width="50"></td>
                <td width="500" colspan="2">
         <p style="font-family:Verdana; color:#EC673E; font-size: 20px; line-height:1.177; text-align:center;">NEED MORE INFORMATION?<br>
                <p style="font-family:Arial; color:#0053A1; font-size:16px; line-height:1; text-align:center; margin-top:-10px;">To make a request for derpas or to submit follow-up derpings, please don't hesitate to contact your DerpS DerpA DErps.</p>

                 </td>
                 <td width="50"></td>
                 </tr>

             <tr>
                <td colspan="4" style="background:#D0D3E4;" height="98"><img src="http://kimjongeun.org/images/nss.gif" title="Thank you from your friends at Derp!" alt="Thank You from your friends at Derp!" height="98">
                </td>
            </tr>
              <tr>
                    <td width="50"></td>
                    <td width="500" colspan="2" align="center">
                        <p style="font-family: Verdana; font-size: 9px;">Derp does not participate in unsolicited emails. This was sent to you because you subscribed to receive promotional emails and updates from Derp during a previous program or promotion.</p>

                        <p style="font-family: Verdana; font-size: 9px;"><a style="color:#000; font-family: Verdana; font-size: 9px;"" href="#unsubscribe">Unsubscribe</a> | <a style="font-family: Verdana; font-size: 9px; color:#000;" href="#privacy">Privacy Policy</a></p>

                         <p style="font-family: Verdana; font-size: 9px;">© 2015 Derp Corporation. All Rights Reserved. 4/15 15471</p>&nbsp;&nbsp;</td>


            <td></td>

             </tr>



        </table>
    </td>
</tr>
</table>
</body>
</html>
2
htmlcsshtml-tablehtml-emaillotus-notes
Its because of Lotus-notes....sorry had to say it!... - user3271518
haha, yeah, probably. still, just wondering. - theloneprospector
When your link goes dead and someone is reading your post, you don't explain what's not working so no one will have any idea what your problem was. - Rick S
Well, my link isnt dead, but I will add to the post - theloneprospector
What version(s) of Lotus Notes are you testing against? It's been around forever, and the HTML rendering isn't perfect but it's certainly gotten better over time. - Richard Schwartz

2 Answers

0
votes

Quick googling reveals that Lotus Notes is obviously rather tricky about (some) HTML emails.

My guess: it simply complains about the HTML not being valid (unclosed tags, missing end tags etc).

I did a quick fix of your HTML using foxe XML Editor. Try if the following HTML works. If it does, LN handles HTML emails just fine:

<html>
    <head>
        <meta charset="utf-8"/>
        <title>Derrrrrp!</title>
    </head>
    <body>
        <center>
            <table cellpadding="0" cellspacing="0" border="0" width="600">
                <tr>
                    <td>
                        <table cellpadding="0" cellspacing="0" border="0" style="background: #002b62;" width="600">
                            <tr>
                                <td colspan="4" height="212">
                                    <img src="http://kimjongeun.org/images/thanks.jpg" border="0" alt="Thank You from your friends at Derp!" title="Thank you from your friends at Derp!"/>
                                </td>
                            </tr>
                            <tr>
                                <td width="600" colspan="4" valign="top" style="text-align:center; padding-bottom:10px;">
                                    <p style="font-size:20px; color: #FFFFFF; font-family: Verdana; line-height:1.286;">We appreciate your interest in<br/>Derp's Derp solutions.</p>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="4" height="33">
                                    <img src="http://kimjongeun.org/images/dot.png" border="0" alt="Thank You from your friends at Derp!" title="Thank you from your friends at Derp!"/>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="4">
                                    <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                            <td width="50"></td>
                                            <td>
                                                <p style="font-size:16px; font-family: Arial; color: #FFFFFF; text-align:left;line-height:1.3;">Dear Attendee,</p>
                                                <p style="font-size:16px; font-family: Arial; color: #FFFFFF; text-align:left;line-height:1.3;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius nibh dictum, fringilla massa a, efficitur ex. Nulla malesuada hendrerit varius. Duis quam</p>
                                                <p style="font-size:16px; font-family: Arial; color: #FFFFFF; text-align:left;line-height:1.3;">Nullam vel mi dui. Integer ut tempor ante. Aenean efficitur aliquet tempor. Morbi facilisis vestibulum elit porttitor posuere. Nulla id dolor vulputate, cursus ligula eu, maximus augue. Nulla facilisi. Proin ac scelerisque est, Nulla id dolor vulputate, cursus ligula eu, maximus augue. Nulla facilisi.</p>
                                                <p style="font-size:16px; font-family: Arial; color: #FFFFFF; text-align:left;line-height:1.3;">Nulla malesuada hendrerit varius. Duis quam lorem, cursus in turpis ac, bibendum cursus dolor.</p>
                                            </td>
                                            <td width="50"></td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <tr>
                <td>
                    <table cellpadding="0" cellspacing="0" border="0" style="background:#D0D3E4" width="600">
                        <tr>
                            <td colspan="4">
                                <img src="http://kimjongeun.org/images/body.png" height="202" border="0" alt="Thank you from your friends at Derp!" title="Thank You from your friends at Derp!"/>
                            </td>
                        </tr>
                        <tr>
                            <td width="50"></td>
                            <td width="500" colspan="2">
                                <p style="font-family:Verdana; color:#EC673E; font-size: 20px; line-height:1.177; text-align:center;">NEED MORE INFORMATION?<br/>
                                <p style="font-family:Arial; color:#0053A1; font-size:16px; line-height:1; text-align:center; margin-top:-10px;">To make a request for derpas or to submit follow-up derpings, please don't hesitate to contact your DerpS DerpA DErps.</p></p>
                            </td>
                            <td width="50"></td>
                        </tr>
                        <tr>
                            <td colspan="4" style="background:#D0D3E4;" height="98">
                                <img src="http://kimjongeun.org/images/nss.gif" title="Thank you from your friends at Derp!" alt="Thank You from your friends at Derp!" height="98"/>
                            </td>
                        </tr>
                        <tr>
                            <td width="50"></td>
                            <td width="500" colspan="2" align="center">
                        <p style="font-family: Verdana; font-size: 9px;">Derp does not participate in unsolicited emails. This was sent to you because you subscribed to receive promotional emails and updates from Derp during a previous program or promotion.</p>

                        <p style="font-family: Verdana; font-size: 9px;"><a style="color:#000; font-family: Verdana; font-size: 9px;" href="#unsubscribe">Unsubscribe</a> | <a style="font-family: Verdana; font-size: 9px; color:#000;" href="#privacy">Privacy Policy</a></p>

                         <p style="font-family: Verdana; font-size: 9px;">© 2015 Derp Corporation. All Rights Reserved. 4/15 15471</p>&nbsp;&nbsp;</td>
                            <td></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </center>
    </body>
</html>
0
votes

The issue was the "colspans".

They were not precise.

I also had to take out the TD's which essentially were acting as "padding right" and "padding left" - they were 50 pixels each, beginning on the second table.

All worked out.

Thanks.