htmlcssvml

Email template displays VML and HTML code redundantly

I have a simple HTML Email Template with some VML in it (for positioning and rendering on Outlook specifically). Issue is, when viewing the email on Outlook, it shows both the VML items and the regular HTML items. This is my code:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
<title></title>
<!--[if mso]>
<noscript>
    <xml>
    <o:OfficeDocumentSettings>
        <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
    </xml>
</noscript>
<![endif]-->
<style>
    table, td, div, h1, p {font-family: Georgia, sans-serif;}
</style>
</head>
<body style="margin:0;padding:0;">
<table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;background:#ffffff;">
    <tr>
    <td align="center" style="padding:0;">
        <table role="presentation" style="width:602px;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:left;">
        <tr>
            <!--[if mso]>
            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="position: relative; width: 1100px; height: 170px;">
                <v:fill type="tile" src="https://www.google.se/images/srpr/logo4w.png" />
                <v:textbox style="v-text-anchor:bottom" inset="0,0,0,0">
                    <div style="position: relative; text-align: center;">
                        <font color="red">
                            <div style="position: absolute; bottom: 0; left: 0; padding: 20px;font-family: Georgia, serif; font-size: 50px;">
                                <p>&nbsp;My VML Text Here!</p>
                            </div>
                        </font>
                    </div>
                </v:textbox>
            </v:rect>
            <![endif]-->
            <!-- Fallback for non-Microsoft email clients -->
            <td align="center" style="padding:40px 0 30px 0;">
                <div style="position: relative; text-align: center;">      
                    <img src="https://www.google.se/images/srpr/logo4w.png" alt="" width="1100" style="height: 170px;display:block;" />
                    <p style="position: absolute; bottom: 8px; left: 16px; color: red; font-size: 50px">My Regular Text Here!</p>
                </div>
            </td>
        </tr>
        </table>
    </td>
    </tr>
</table>
</body>
</html>

Snap from Outlook:

outlookView

Anybody knows why is it showing both regular HTML and VML text at the same time?

Thanks

Solution

  • "Anybody knows why?"

    <!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
<title></title>
<!--[if mso]>
<noscript>
    <xml>
    <o:OfficeDocumentSettings>
        <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
    </xml>
</noscript>
<![endif]-->
<style>
    table, td, div, h1, p {font-family: Georgia, sans-serif;}
</style>
</head>
<body style="margin:0;padding:0;">
<table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;background:#ffffff;">
    <tr>
    <td align="center" style="padding:0;">
        <table role="presentation" style="width:602px;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:left;">
            <tr>
                <td align="center" style="padding:40px 0 30px 0;">.

<!--[if mso]>
                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="position: relative; width: 1100px; height: 170px;">
                        <v:fill type="tile" src="https://www.google.se/images/srpr/logo4w.png" />
                        <v:textbox style="v-text-anchor:bottom" inset="0,0,0,0">
                            <div style="position: relative; text-align: center; color: red;">
                                <div style="position: absolute; bottom: 0; left: 0; padding: 20px;font-family: Georgia, serif; font-size: 50px;">
                                    <p>&nbsp;My VML Text Here!</p>
                                </div>
                            </div>
                        </v:textbox>
                    </v:rect>
<![endif]-->
<!--[if !mso]><!-->
            
                    <div style="position: relative; text-align: center;">      
                        <img src="https://www.google.se/images/srpr/logo4w.png" alt="" width="1100" style="height: 170px;display:block;" />
                        <p style="position: absolute; bottom: 8px; left: 16px; color: red; font-size: 50px">My Regular Text Here!</p>
                    </div>
<!--<![endif]-->

            </td>
        </tr>
        </table>
    </td>
    </tr>
</table>
</body>
</html>