Need assistance with an HTML email

I am currently building an HTML email and I inherited some code to work with, my current issue is that there is a section on the email that was built using tags and they are not display correctly on several email services.

What alternatives do I have for blockquote? I have added my code below for your reference, I need to keep the same look but make it work.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Example Title</title>



<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="x-ua-compatible" content="IE=edge"> 

<meta name="x-apple-disable-message-reformatting"> <!-- prevent automatic off-centered scaling in iOS -->



<style type="text/css">



    #outlook a { 

        padding:0; /* trigger read in browser link in Outlook */

    }   



    body, #bodyTable {

        width:100% !important;

        height: 100% !important;

        -webkit-text-size-adjust:100%; /* disable auto-enlarge of text in mobile */

        -ms-text-size-adjust:100%;

        margin:0;

        padding:0;

        background-color:#eeeeee;

    }



    /* Outlook fixes */





    /* Styles */







    img, a img {

        display: block; /* Remove extra space */

        border: 0;

        outline: none;

        text-decoration: none;

        -ms-interpolation-mode:bicubic; /* image resize fix for IE */

    }





    #main td, p, #subs td {

        font-family: Arial,Helvetica,sans-serif;

        font-size: 13px;

        line-height: 22px;

        color: #505050;

    }



    blockquote {

        background:url('https://email.jmls.edu/USnews/2019/lawyering-skills/images/quote.png') left top no-repeat, url('https://email.jmls.edu/USnews/2019/lawyering-skills/images/endquote.png') right bottom no-repeat;

        background-color:#f8f8f8;

        padding: 30px 40px 30px 40px;

        margin: 14px 30px;

    }



    blockquote p {

        margin-top: 2px;

        margin-bottom:2px;

        font-weight:bold;

        font-size:14px;

    }









    /* mobile-specific styles */





</style>



<table width="100%" id="bodyTable" border="0" cellpadding="0" cellspacing="0">

 <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" id="main" style="background-color: #ffffff; border:1px solid #444444;">

     <tbody>

<tr>

    <td>



         <tr>

          <td style="padding: 10px 15px 20px;">

            <blockquote><p>&ldquo;It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.&rdquo; </p>

            <p  style="text-align:right; font-weight:normal;">&mdash;Chicago </p></blockquote>



            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>

            </td>

        </tr>



    </td>



</tr>



     </tbody>

    </table>

    </table>







    </head>

</html>

edited Nov 20 at 17:35

marc_s

569k12811001250

asked Nov 20 at 17:28

Aztlan

1

I would start with replacing <blockquote> with a plain <div>. Then update your CSS selectors from blockquote and blockquote p to div and div p. If you're going to have multiple <div>s, then you will have to add an ID and change your CSS to use the IDs. E-mail systems may ignore inline CSS as well, so the style="..." attributes in the HTML might need to be moved to CSS.
– Cᴏʀʏ
Nov 20 at 17:32

...or just migrate to an e-mail platform like Send in Blue. One of the main draws of such services is to avoid the headaches of display inconsistency associated with HTML e-mail.
– Utkanos
Nov 20 at 17:37

I tried replacing the blockquote for div but I am still having the same issue, everything is being stripped. Any clues of what is going on?
– Aztlan
Nov 20 at 18:27

I noticed that everything is placed within the head tags. Could it be that some email services expect your table to be placed within body tags? <body>...</body>
– MichaelvE
Nov 20 at 19:55

Html emails need to be coded as tables and inline CSS. You can code it as a web page (with tables) and just use an online inliner to make the styles inline.
– Syfer
Nov 20 at 20:46

add a comment |

What alternatives do I have for blockquote? I have added my code below for your reference, I need to keep the same look but make it work.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Example Title</title>



<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="x-ua-compatible" content="IE=edge"> 

<meta name="x-apple-disable-message-reformatting"> <!-- prevent automatic off-centered scaling in iOS -->



<style type="text/css">



    #outlook a { 

        padding:0; /* trigger read in browser link in Outlook */

    }   



    body, #bodyTable {

        width:100% !important;

        height: 100% !important;

        -webkit-text-size-adjust:100%; /* disable auto-enlarge of text in mobile */

        -ms-text-size-adjust:100%;

        margin:0;

        padding:0;

        background-color:#eeeeee;

    }



    /* Outlook fixes */





    /* Styles */







    img, a img {

        display: block; /* Remove extra space */

        border: 0;

        outline: none;

        text-decoration: none;

        -ms-interpolation-mode:bicubic; /* image resize fix for IE */

    }





    #main td, p, #subs td {

        font-family: Arial,Helvetica,sans-serif;

        font-size: 13px;

        line-height: 22px;

        color: #505050;

    }



    blockquote {

        background:url('https://email.jmls.edu/USnews/2019/lawyering-skills/images/quote.png') left top no-repeat, url('https://email.jmls.edu/USnews/2019/lawyering-skills/images/endquote.png') right bottom no-repeat;

        background-color:#f8f8f8;

        padding: 30px 40px 30px 40px;

        margin: 14px 30px;

    }



    blockquote p {

        margin-top: 2px;

        margin-bottom:2px;

        font-weight:bold;

        font-size:14px;

    }









    /* mobile-specific styles */





</style>



<table width="100%" id="bodyTable" border="0" cellpadding="0" cellspacing="0">

 <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" id="main" style="background-color: #ffffff; border:1px solid #444444;">

     <tbody>

<tr>

    <td>



         <tr>

          <td style="padding: 10px 15px 20px;">

            <blockquote><p>&ldquo;It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.&rdquo; </p>

            <p  style="text-align:right; font-weight:normal;">&mdash;Chicago </p></blockquote>



            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>

            </td>

        </tr>



    </td>



</tr>



     </tbody>

    </table>

    </table>







    </head>

</html>

edited Nov 20 at 17:35

marc_s

569k12811001250

asked Nov 20 at 17:28

Aztlan

1

I would start with replacing <blockquote> with a plain <div>. Then update your CSS selectors from blockquote and blockquote p to div and div p. If you're going to have multiple <div>s, then you will have to add an ID and change your CSS to use the IDs. E-mail systems may ignore inline CSS as well, so the style="..." attributes in the HTML might need to be moved to CSS.
– Cᴏʀʏ
Nov 20 at 17:32

...or just migrate to an e-mail platform like Send in Blue. One of the main draws of such services is to avoid the headaches of display inconsistency associated with HTML e-mail.
– Utkanos
Nov 20 at 17:37

I tried replacing the blockquote for div but I am still having the same issue, everything is being stripped. Any clues of what is going on?
– Aztlan
Nov 20 at 18:27

I noticed that everything is placed within the head tags. Could it be that some email services expect your table to be placed within body tags? <body>...</body>
– MichaelvE
Nov 20 at 19:55

Html emails need to be coded as tables and inline CSS. You can code it as a web page (with tables) and just use an online inliner to make the styles inline.
– Syfer
Nov 20 at 20:46

add a comment |

What alternatives do I have for blockquote? I have added my code below for your reference, I need to keep the same look but make it work.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Example Title</title>



<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="x-ua-compatible" content="IE=edge"> 

<meta name="x-apple-disable-message-reformatting"> <!-- prevent automatic off-centered scaling in iOS -->



<style type="text/css">



    #outlook a { 

        padding:0; /* trigger read in browser link in Outlook */

    }   



    body, #bodyTable {

        width:100% !important;

        height: 100% !important;

        -webkit-text-size-adjust:100%; /* disable auto-enlarge of text in mobile */

        -ms-text-size-adjust:100%;

        margin:0;

        padding:0;

        background-color:#eeeeee;

    }



    /* Outlook fixes */





    /* Styles */







    img, a img {

        display: block; /* Remove extra space */

        border: 0;

        outline: none;

        text-decoration: none;

        -ms-interpolation-mode:bicubic; /* image resize fix for IE */

    }





    #main td, p, #subs td {

        font-family: Arial,Helvetica,sans-serif;

        font-size: 13px;

        line-height: 22px;

        color: #505050;

    }



    blockquote {

        background:url('https://email.jmls.edu/USnews/2019/lawyering-skills/images/quote.png') left top no-repeat, url('https://email.jmls.edu/USnews/2019/lawyering-skills/images/endquote.png') right bottom no-repeat;

        background-color:#f8f8f8;

        padding: 30px 40px 30px 40px;

        margin: 14px 30px;

    }



    blockquote p {

        margin-top: 2px;

        margin-bottom:2px;

        font-weight:bold;

        font-size:14px;

    }









    /* mobile-specific styles */





</style>



<table width="100%" id="bodyTable" border="0" cellpadding="0" cellspacing="0">

 <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" id="main" style="background-color: #ffffff; border:1px solid #444444;">

     <tbody>

<tr>

    <td>



         <tr>

          <td style="padding: 10px 15px 20px;">

            <blockquote><p>&ldquo;It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.&rdquo; </p>

            <p  style="text-align:right; font-weight:normal;">&mdash;Chicago </p></blockquote>



            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>

            </td>

        </tr>



    </td>



</tr>



     </tbody>

    </table>

    </table>







    </head>

</html>

edited Nov 20 at 17:35

marc_s

569k12811001250

asked Nov 20 at 17:28

Aztlan

What alternatives do I have for blockquote? I have added my code below for your reference, I need to keep the same look but make it work.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Example Title</title>



<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="x-ua-compatible" content="IE=edge"> 

<meta name="x-apple-disable-message-reformatting"> <!-- prevent automatic off-centered scaling in iOS -->



<style type="text/css">



    #outlook a { 

        padding:0; /* trigger read in browser link in Outlook */

    }   



    body, #bodyTable {

        width:100% !important;

        height: 100% !important;

        -webkit-text-size-adjust:100%; /* disable auto-enlarge of text in mobile */

        -ms-text-size-adjust:100%;

        margin:0;

        padding:0;

        background-color:#eeeeee;

    }



    /* Outlook fixes */





    /* Styles */







    img, a img {

        display: block; /* Remove extra space */

        border: 0;

        outline: none;

        text-decoration: none;

        -ms-interpolation-mode:bicubic; /* image resize fix for IE */

    }





    #main td, p, #subs td {

        font-family: Arial,Helvetica,sans-serif;

        font-size: 13px;

        line-height: 22px;

        color: #505050;

    }



    blockquote {

        background:url('https://email.jmls.edu/USnews/2019/lawyering-skills/images/quote.png') left top no-repeat, url('https://email.jmls.edu/USnews/2019/lawyering-skills/images/endquote.png') right bottom no-repeat;

        background-color:#f8f8f8;

        padding: 30px 40px 30px 40px;

        margin: 14px 30px;

    }



    blockquote p {

        margin-top: 2px;

        margin-bottom:2px;

        font-weight:bold;

        font-size:14px;

    }









    /* mobile-specific styles */





</style>



<table width="100%" id="bodyTable" border="0" cellpadding="0" cellspacing="0">

 <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" id="main" style="background-color: #ffffff; border:1px solid #444444;">

     <tbody>

<tr>

    <td>



         <tr>

          <td style="padding: 10px 15px 20px;">

            <blockquote><p>&ldquo;It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.&rdquo; </p>

            <p  style="text-align:right; font-weight:normal;">&mdash;Chicago </p></blockquote>



            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>

            </td>

        </tr>



    </td>



</tr>



     </tbody>

    </table>

    </table>







    </head>

</html>

html html-email

edited Nov 20 at 17:35

marc_s

569k12811001250

asked Nov 20 at 17:28

Aztlan

edited Nov 20 at 17:35

marc_s

569k12811001250

asked Nov 20 at 17:28

Aztlan

edited Nov 20 at 17:35

marc_s

569k12811001250

edited Nov 20 at 17:35

marc_s

569k12811001250

edited Nov 20 at 17:35

marc_s

569k12811001250

asked Nov 20 at 17:28

Aztlan

asked Nov 20 at 17:28

Aztlan

asked Nov 20 at 17:28

Aztlan

1

I would start with replacing <blockquote> with a plain <div>. Then update your CSS selectors from blockquote and blockquote p to div and div p. If you're going to have multiple <div>s, then you will have to add an ID and change your CSS to use the IDs. E-mail systems may ignore inline CSS as well, so the style="..." attributes in the HTML might need to be moved to CSS.
– Cᴏʀʏ
Nov 20 at 17:32

...or just migrate to an e-mail platform like Send in Blue. One of the main draws of such services is to avoid the headaches of display inconsistency associated with HTML e-mail.
– Utkanos
Nov 20 at 17:37

I tried replacing the blockquote for div but I am still having the same issue, everything is being stripped. Any clues of what is going on?
– Aztlan
Nov 20 at 18:27

I noticed that everything is placed within the head tags. Could it be that some email services expect your table to be placed within body tags? <body>...</body>
– MichaelvE
Nov 20 at 19:55

Html emails need to be coded as tables and inline CSS. You can code it as a web page (with tables) and just use an online inliner to make the styles inline.
– Syfer
Nov 20 at 20:46

add a comment |

1

I would start with replacing <blockquote> with a plain <div>. Then update your CSS selectors from blockquote and blockquote p to div and div p. If you're going to have multiple <div>s, then you will have to add an ID and change your CSS to use the IDs. E-mail systems may ignore inline CSS as well, so the style="..." attributes in the HTML might need to be moved to CSS.
– Cᴏʀʏ
Nov 20 at 17:32

...or just migrate to an e-mail platform like Send in Blue. One of the main draws of such services is to avoid the headaches of display inconsistency associated with HTML e-mail.
– Utkanos
Nov 20 at 17:37

I tried replacing the blockquote for div but I am still having the same issue, everything is being stripped. Any clues of what is going on?
– Aztlan
Nov 20 at 18:27

I noticed that everything is placed within the head tags. Could it be that some email services expect your table to be placed within body tags? <body>...</body>
– MichaelvE
Nov 20 at 19:55

Html emails need to be coded as tables and inline CSS. You can code it as a web page (with tables) and just use an online inliner to make the styles inline.
– Syfer
Nov 20 at 20:46

I would start with replacing <blockquote> with a plain <div>. Then update your CSS selectors from blockquote and blockquote p to div and div p. If you're going to have multiple <div>s, then you will have to add an ID and change your CSS to use the IDs. E-mail systems may ignore inline CSS as well, so the style="..." attributes in the HTML might need to be moved to CSS.
– Cᴏʀʏ
Nov 20 at 17:32

...or just migrate to an e-mail platform like Send in Blue. One of the main draws of such services is to avoid the headaches of display inconsistency associated with HTML e-mail.
– Utkanos
Nov 20 at 17:37

I tried replacing the blockquote for div but I am still having the same issue, everything is being stripped. Any clues of what is going on?
– Aztlan
Nov 20 at 18:27

I noticed that everything is placed within the head tags. Could it be that some email services expect your table to be placed within body tags? <body>...</body>
– MichaelvE
Nov 20 at 19:55

Html emails need to be coded as tables and inline CSS. You can code it as a web page (with tables) and just use an online inliner to make the styles inline.
– Syfer
Nov 20 at 20:46

add a comment |

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53398405%2fneed-assistance-with-an-html-email%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ytukyg