I can get the rest of my email to work fine however whenever I put in blocks of text it renders them like so… but only in outlook and mac/ios devices?

all help appreciated!

r/webdev - Any idea why my html email is doing this?
r/webdev - Any idea why my html email is doing this?

the issue is specifically happening in .bodyText and .bodyDisclaimer (which are the only blocks of text in the email)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="style.css" rel="stylesheet">
</head>
<body>

	<center class="wrapper">
		<div class="webkit">
			<table class="outer" style="width: 100%; border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: Arial, Helvetica, sans-serif; margin: 0px; padding: 0px;" border="0" cellspacing="0" cellpadding="0"  align="center">


                <tr>
                    <td>
                        <table width="100%" cellspacing="0" cellpadding="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;">
                            <tr>
                                <td style="text-align: center;">
                                    <a href="testwebsite.com"><img src="./img/header.png" width="600" alt=""></a>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <!--Email Template Date-->
                <tr>
                    <td>
                        <table width="100%" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;">
                            <tr>
                                <td>
                                    <p class="bodyDate">22nd October 2020</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <!--Email Template Note-->
                <tr>
                    <td>
                        <table width="100%" max-width="600px" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;">
                            <tr>
                                <td style="border-collapse: collapse; font-size: 10px; font-family: Arial,Helvetica,sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;"> 
                                    <p class="bodyNote">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem at qui minus deserunt dolore aliquam vero doloremque recusandae quibusdam, excepturi libero vitae inventore nihil magni nostrum ex! Natus, temporibus reprehenderit.</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <!--Email Template Heading-->
                <tr>
                    <td>
                        <table width="100%" max-width="600px" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;">
                            <tr>
                                <td>
                                    <p class="bodyHeading">Heading</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <!--Email Template Text-->
                <tr>
                    <td>
                        <table width="100%" max-width="600px" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;">
                            <tr>
                                <td>
                                    <p class="bodyText">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores, ipsum dicta impedit perferendis ab voluptates quia. Nemo excepturi modi iste asperiores! Mollitia ea ratione expedita officiis, aperiam vitae tenetur provident. Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni reprehenderit non rem aperiam, quae, excepturi quidem necessitatibus aliquam minus est recusandae quas enim ratione nulla? Aperiam quod est rem aliquam.</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <!--Email Template Heading-->
                <tr>
                    <td>
                        <table width="100%" max-width="600px" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;">
                            <tr>
                                <td>
                                    <p class="bodyHeading">Heading</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <!--Email Template Text-->
                <tr>
                    <td>
                        <table width="100%" max-width="600px" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;">
                            <tr>
                                <td>
                                    <p class="bodySubheading">Details surrounding research can go here...</p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyBullet">• Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores, ipsum dicta impedit perferendis ab.</p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyBullet">• Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores, ipsum dicta impedit perferendis ab.</p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyBullet">• Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores, ipsum dicta impedit perferendis ab.</p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyBullet">• Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores, ipsum dicta impedit perferendis ab.</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <!--Email Template Image-->
                <tr>
                    <td>
                        <table width="100%" max-width="600px" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;">
                            <tr>
                                <td>
                                    <a href="testwebsite.com"><img width="600" src="./img/placeholder-data.png"></a>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <!--Email Template Text-->
                <tr>
                    <td>
                        <table width="100%" max-width="600px" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;">
                            <tr>
                                <td>
                                    <p class="bodySubheading">Details surrounding research can go here...</p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyBullet">• Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores, ipsum dicta impedit perferendis ab.</p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyBullet">• Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores, ipsum dicta impedit perferendis ab.</p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyBullet">• Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores, ipsum dicta impedit perferendis ab.</p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyBullet">• Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores, ipsum dicta impedit perferendis ab.</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <!--Email Template Text-->
                <tr>
                    <td>
                        <table width="100%" max-width="600px" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;">
                            <tr>
                                <td>
                                    <p class="bodySubheading2">Details surrounding research can go here...</p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyBullet">• Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores, ipsum dicta impedit perferendis ab.</p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyBullet">• Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores, ipsum dicta impedit perferendis ab.</p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyBullet">• Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores, ipsum dicta impedit perferendis ab.</p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyBullet">• Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores, ipsum dicta impedit perferendis ab.</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <!--Email Template Text-->
                <tr>
                    <td>
                        <table width="100%" max-width="600px" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;">
                            <tr>
                                <td>
                                    <p class="bodyContactTitle">Test &amp; Test</p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyContact">Test Name +971 Test tel - <a href="mailto:testemail@email.com">testemail@test.com</a>
                                    </p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyContact">Test Name +971 Test tel - <a href="mailto:testemail@email.com">testemail@test.com</a>
                                    </p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyContact">Test Name +971 Test tel - <a href="mailto:testemail@email.com">testemail@test.com</a>
                                    </p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyContact">Test Name +971 Test tel - <a href="mailto:testemail@email.com">testemail@test.com</a>
                                    </p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table width="100%" max-width="600px" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;">
                            <tr>
                                <td>
                                    <p class="bodyContactTitle">Test Test</p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyContact">Test Name +971 Test tel - <a href="mailto:testemail@email.com">testemail@test.com</a>
                                    </p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyContact">Test Name +971 Test tel - <a href="mailto:testemail@email.com">testemail@test.com</a>
                                    </p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyContact">Test Name +971 Test tel - <a href="mailto:testemail@email.com">testemail@test.com</a>
                                    </p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyContact">Test Name +971 Test tel - <a href="mailto:testemail@email.com">testemail@test.com</a>
                                    </p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyContact">Test Name +971 Test tel - <a href="mailto:testemail@email.com">testemail@test.com</a>
                                    </p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyContact">Test Name +971 Test tel - <a href="mailto:testemail@email.com">testemail@test.com</a>
                                    </p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyContact">Test Name +971 Test tel - <a href="mailto:testemail@email.com">testemail@test.com</a>
                                    </p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <!--Disclaimer-->
                <tr>
                    <td>
                        <table width="100%" max-width="600px" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;">
                            <tr>
                                <td>
                                    <p class="bodyDisclaimerTitle">Disclaimer</p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyDisclaimer">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis, suscipit. Ea consectetur quae quisquam veniam illo expedita, fuga at aliquam maxime facere id vero, suscipit laboriosam sequi eligendi, optio obcaecati!</p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyDisclaimer">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis, suscipit. Ea consectetur quae quisquam veniam illo expedita, fuga at aliquam maxime facere id vero, suscipit laboriosam sequi eligendi, optio obcaecati!</p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyDisclaimer">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis, suscipit. Ea consectetur quae quisquam veniam illo expedita, fuga at aliquam maxime facere id vero, suscipit laboriosam sequi eligendi, optio obcaecati!</p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyDisclaimer">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis, suscipit. Ea consectetur quae quisquam veniam illo expedita, fuga at aliquam maxime facere id vero, suscipit laboriosam sequi eligendi, optio obcaecati!</p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyDisclaimer">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis, suscipit. Ea consectetur quae quisquam veniam illo expedita, fuga at aliquam maxime facere id vero, suscipit laboriosam sequi eligendi, optio obcaecati!</p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyDisclaimer">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis, suscipit. Ea consectetur quae quisquam veniam illo expedita, fuga at aliquam maxime facere id vero, suscipit laboriosam sequi eligendi, optio obcaecati!</p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyDisclaimer">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis, suscipit. Ea consectetur quae quisquam veniam illo expedita, fuga at aliquam maxime facere id vero, suscipit laboriosam sequi eligendi, optio obcaecati!</p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyDisclaimer">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis, suscipit. Ea consectetur quae quisquam veniam illo expedita, fuga at aliquam maxime facere id vero, suscipit laboriosam sequi eligendi, optio obcaecati!</p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyDisclaimer">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis, suscipit. Ea consectetur quae quisquam veniam illo expedita, fuga at aliquam maxime facere id vero, suscipit laboriosam sequi eligendi, optio obcaecati!</p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyDisclaimer">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis, suscipit. Ea consectetur quae quisquam veniam illo expedita, fuga at aliquam maxime facere id vero, suscipit laboriosam sequi eligendi, optio obcaecati!</p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyDisclaimer">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis, suscipit. Ea consectetur quae quisquam veniam illo expedita, fuga at aliquam maxime facere id vero, suscipit laboriosam sequi eligendi, optio obcaecati!</p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="bodyDisclaimer">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis, suscipit. Ea consectetur quae quisquam veniam illo expedita, fuga at aliquam maxime facere id vero, suscipit laboriosam sequi eligendi, optio obcaecati!</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

<!---end disclaimer-->

			</table>
		</div>
	</center>

</body>
</html>



Source link

Write A Comment