Изображение в таблице выравнивается по правому краю в мобильном gmail при удалении нижней таблицы. - PullRequest
0 голосов
/ 17 декабря 2018

Это мой второй пост, поэтому извиняюсь, если я ошибаюсь, задавая правильные вопросы.

Мне нужно, чтобы изображение машины (name = "RE_AUTOSITE_ACCORD_SEDAN_IMAGE") было отцентрировано на мобильном устройстве и на рабочем столе.Тем не менее, когда я удаляю таблицу, содержащую значки социальных сетей (которую необходимо удалить для этого проекта), изображение автомобиля выравнивается по правому краю на мобильной почте Gmail и мобильном Android в соответствии с Litmus.

Я не могу понять, почему это происходит.Любая помощь очень ценится.Код ниже.Спасибо.

    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
    <title>Reach into Our Grab Bag of New Honda Offers</title>
    <!--[if gte mso 9]><xml>
        <o:OfficeDocumentSettings>
        <o:AllowPNG/>
        <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
        </xml><![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body style="margin-left:0; margin-right:0; padding-left:0; padding-right:0; min-width: 100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;">
    <style type="text/css">
    #ForceOutlook2010BrowserLink span {
        padding: 0px;
    }

    .ExternalClass * {
        line-height: 130%;
    }

    /* fixes the Outlook.com line height issue */
    .appleLinks a {
        color: #999999;
        text-decoration: none;
    }

    .appleLinkBody a {
        color: #ffffff;
        text-decoration: none;
    }

    td[id="previewtext"] {
        display: none !important;
    }

    @media screen and (max-width: 480px) {

        /** generic formatting **/
        table {
            width: 100% !important;
        }

        table[id="container"] {
            background-color: #ffffff !important;
        }

        table[id="container"] img {
            width: 100% !important;
            -ms-interpolation-mode: bicubic !important;
        }

        table[id="stackmenot"] {
            width: auto !important;
        }

        img.scaleme {
            height: auto !important;
        }

        table[class="hideme"],
        td[class="hideme"],
        img[class="hideme"],
        div[class="hideme"] {
            display: none !important;
        }

        img[class="mobile"] {
            display: block !important;
            max-height: none !important;
            max-width: none !important;
            line-height: auto !important;
            overflow: visible !important;
        }

        td[class="widenme"] {
            width: 100% !important;
        }

        /** Shopping Tools Top **/
        table[id="honda-logo-table"],
        td[id="honda-top"] {
            width: 30% !important;
        }

        table[id="shop-tools-top-table"] {
            width: 67% !important;
        }

        td[id="shop-tools-top-cell"] {
            height: auto !important;
        }

        /** Module 1 **/
        td[class="mod2-header"] {
            padding-left: 20px !important;
            padding-right: 20px !important;
            text-align: center !important;
            padding-top: 20px !important;
            padding-bottom: 10px !important;
            font-size: 20px !important;
        }

        td[id="headline-cell"] {
            padding: 6% 5% 0 5% !important;
            width: 100% !important;
        }

        div[id="headline"] {
            font-size: 22px !important;
            line-height: 125% !important;
        }

        td[class="td-headline"] {
            padding-bottom: 5px !important;
        }

        td[class="body-copy-cell"] {
            padding: 0 !important;
            width: 100% !important;
        }

        div[class="body-copy"] {
            font-size: 16px !important;
            line-height: 125% !important;
            padding: 4% 4% !important;
        }

        td[id="see-offers-cell"] {
            padding: 10px 0px 20px 0px !important;
            width: 100% !important;
            margin-left: auto !important;
            margin-right: auto !important;
            align: center !important;
            text-align: center !important;
        }

        td[id="see-offers-cell"] img {
            width: 187px !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }

        td[class="mod2_gif"] img {
            height: auto !important;
        }

        td[class="mod2_gif"] {
            width: 100% !important;
        }

        /** Scrape **/
        td[class="vehicle-image-cell"] {
            width: 100% !important;
            padding: 0 !important;
        }

        td[class="vehicle-image-cell"] img {
            width: 90% !important;
            height: auto !important;
        }

        td[class="padmenot"] {
            padding: 0 3% 0 7% !important;
        }

        table[class="offer-space"] {
            margin: 4% 0 4% 0 !important;
        }

        table[class="offer-divider-table"] {
            margin-top: 2% !important;
        }

        td[class="monthly-payment-cell"] {
            width: 5% !important;
            white-space: nowrap !important;
        }

        td[class="offer-spacer"] {
            width: 4% !important;
        }

        td[class="lease-offer-cell"] {
            width: 91% !important;
        }

        span[class="car-model-specific"] {
            font-size: 17px !important;
        }

        td[class="car-disclaimer"] {
            line-height: 130% !important;
            padding: 0 3% 0 7% !important;
        }

        span[class="offers-cta"] {
            display: block !important;
            font-size: 13px !important;
            margin: 6px 0 !important;
        }

        /** Shopping Module Bottom **/
        table[class="shopping-tools-table"] img {
            width: 100% !important;
        }

        td[id="shopping-quote-text"],
        td[id="shopping-dealer-text"],
        td[id="shopping-shophonda-text"] {
            font-size: 16px !important;
            height: 50px !important;
            border-top: 3px solid #ffffff !important;
        }

        td[id="shopping-quote-spacer"],
        td[id="shopping-dealer-spacer"],
        td[id="shopping-shophonda-spacer"] {
            height: 50px !important;
            border-top: 3px solid #ffffff !important;
        }

        td[class="shopping-tools-arrow"] {
            width: 6% !important;
            height: 50px !important;
            border-top: 3px solid #ffffff !important;
        }

        td[id="shopping-quote-text"] {
            width: 62% !important;
        }

        td[id="shopping-quote-spacer"] {
            width: 29% !important;
        }

        td[id="shopping-dealer-text"] {
            width: 66% !important;
        }

        td[id="shopping-dealer-spacer"] {
            width: 25% !important;
        }

        td[id="shopping-shophonda-text"] {
            width: 62% !important;
        }

        td[id="shopping-shophonda-spacer"] {
            width: 29% !important;
        }

        /** Connect Buttons **/
        td[id="connect-with-us-cell"] {
            font-size: 15px !important;
            padding-top: 8% !important;
            padding-bottom: 5% !important;
        }

        table[id="connect-table"] img {
            width: 100% !important;
        }

        td[class="connect-cell"] {
            width: 15% !important;
            border-right: 1px solid #d5d5d5 !important;
        }

        td[id="connect-cell-last"] {
            width: 15% !important;
        }

        td[class="connect-spacer"] {
            width: 3% !important;
        }

        table[id="connect-table"] {
            margin-bottom: 8% !important;
        }

        /** CSS for Social Icons **/
        td[class="social-button-cell"] {
            border-right: 1px solid #d5d5d5 !important;
        }

        /** Footer **/
        table[id="horz-rule-table"] {
            width: 92% !important;
            border-top: 1px solid #e6e6e6 !important;
        }

        td[id="footer-info"] {
            font-size: 12px !important;
            line-height: 120% !important;
            padding: 7% 4% 7% 4% !important;
        }

        body {
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
        }

        /*HERO*/
        td[class="mobile-padding1"] {
            padding-left: 14px !important;
            padding-right: 14px !important;
            padding-top: 14px !important;
            padding-bottom: 14px !important
        }

        td[class="module-copy-cell"] {
            text-align: center !important;
            padding-left: 15px !important;
            padding-right: 15px !important;
            padding-top: 15px !important;
            font-size: 15px !important;
            line-height: 19px !important;
            height: auto !important;
        }

        td[class="button-cell"] img {
            width: 159px !important;
            height: 44px !important;
        }
    }

    /* iPhone 6 and iPhone 6 Plus */
    @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
        td[class="shopping-tools-arrow"] {
            width: 8% !important;
        }

        td[id="shopping-quote-text"] {
            width: 57% !important;
        }

        td[id="shopping-quote-spacer"] {
            width: 35% !important;
        }

        td[id="shopping-dealer-text"] {
            width: 61% !important;
        }

        td[id="shopping-dealer-spacer"] {
            width: 31% !important;
        }

        td[id="shopping-shophonda-text"] {
            width: 57% !important;
        }

        td[id="shopping-shophonda-spacer"] {
            width: 35% !important;
        }
    }

    @media screen yahoo {

        td[id="shopping-quote-text"],
        td[id="shopping-dealer-text"],
        td[id="shopping-shophonda-text"] {
            border-top: none !important;
        }

        td[id="shopping-quote-spacer"],
        td[id="shopping-dealer-spacer"],
        td[id="shopping-shophonda-spacer"] {
            border-top: none !important;
        }

        td[class="shopping-tools-arrow"] {
            border-top: none !important;
        }
    }
    </style>
    <table cellpadding="0" cellspacing="0" width="640" id="container" align="center" border="1" style="border: 1px solid #b8b8b8; border-collapse: collapse;">
        <tr valign="top">
            <td>
                <!-- start of scrape offer -->
                <table width="600" border="0" cellpadding="0" dir="rtl" cellspacing="0" bgcolor="#ffffff" align="center" style="width:600px;">
                    <tr valign="top">
                        <td width="600" style="width:600px;">
                            <table width="256" border="0" dir="ltr" cellpadding="0" cellspacing="0" align="right" style="width:256px;">
                                <tr valign="top">
                                    <td align="center" class="vehicle-image-cell" style="padding-top:24px;"><a href="https://automobiles.honda.com/tools/current-offers?vehiclemodelseries=Accord-Sedan&offer=090111c081c1e47d-CV1F1JEW&SP_RID=%%RECIPIENT_ID%%&SP_MID=%%MAILING_ID%%&PROGRAMID=%%PROGID%%&CAMPAIGNCODE=%%CAMPAIGNCODE%%&OFFERCODE=%%OFFERCODE%%&CELLCODE=%%CELL%%&PID=%%PID%%&FROM=EMAIL&Module=1" name="RE_AUTOSITE_ACCORD_SEDAN_IMAGE" target="_blank"><img src="https://automobiles.honda.com/-/media/Honda-Automobiles/Vehicles/2018/Accord Sedan/AW/carshot/carshot_Accord_front_15TLX_2018_ObsidianBluePearl_CV1F1JEW_B-588P.png" alt="" border="0" width="235" class="car-image" style="display: block;"></a></td>
                                </tr>
                            </table>
                            <!--[if gte mso 9]>
                            </td>
                            <td>
                                <![endif]-->
                            <table width="256" border="0" dir="ltr" cellpadding="0" cellspacing="0" align="right" style="width:256px;">
                                <tr valign="top">
                                    <td width="256" class="padmenot" style="padding-top:24px; padding-left:24px; color: #00324E; font-family: Avenir Next, Helvetica, sans-serif; font-size: 20px; font-weight: bold; width:344px;">
                                        <a href="https://automobiles.honda.com/tools/current-offers?vehiclemodelseries=Accord-Sedan&offer=090111c081c1e47d-CV1F1JEW&SP_RID=%%RECIPIENT_ID%%&SP_MID=%%MAILING_ID%%&PROGRAMID=%%PROGID%%&CAMPAIGNCODE=%%CAMPAIGNCODE%%&OFFERCODE=%%OFFERCODE%%&CELLCODE=%%CELL%%&PID=%%PID%%&FROM=EMAIL&Module=1" name="RE_ACCORD_SEDAN_FEATURED_SPECIAL_LEASE" target="_blank" style="color: #00324E; text-decoration: none;">
                                                <span class="car-model-specific">2018 Accord Sedan Special APR</span>
                                            </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="344" class="padmenot" style="padding-left:24px; padding-top:12px; padding-bottom:12px; width:344px;">
                                        <table width="320" border="0" class="offer-space" cellpadding="0" cellspacing="0" style="width:320px;">
                                            <tr valign="middle">
                                                <td class="monthly-payment-cell" width="32" style="width:32px; white-space: nowrap; color: #00324E; font-family: Avenir Next, Helvetica, sans-serif; font-size: 28px; font-weight: bold;">
                                                    <a href="https://automobiles.honda.com/tools/current-offers?vehiclemodelseries=Accord-Sedan&offer=090111c081c1e47d-CV1F1JEW&SP_RID=%%RECIPIENT_ID%%&SP_MID=%%MAILING_ID%%090111c081c1e47d-CV1F1JEW&PROGRAMID=%%PROGID%%&CAMPAIGNCODE=%%CAMPAIGNCODE%%&OFFERCODE=%%OFFERCODE%%&CELLCODE=%%CELL%%&PID=%%PID%%&FROM=EMAIL&Module=1" name="RE_ACCORD_SEDAN_MONTHLY_PAYMENT" target="_blank" style="color: #1F98DC; text-decoration: none;">1.9%</a>
                                                </td>
                                                <td class="offer-spacer" width="8" style="width:8px;"><img src="http://shophonda.com/images/feeds/current-offers/offers-e-mail-template-2/spacer.gif" alt="" border="0" width="8" height="1" style="display: block;"></td>
                                                <td class="lease-offer-cell" width="280" style="width:280px; color: #00324E; font-family: Arial, Helvetica, sans-serif; font-size: 13px; border-left: 1px solid black; padding-left: 7px;">
                                                    <a href="https://automobiles.honda.com/tools/current-offers?vehiclemodelseries=Accord-Sedan&offer=090111c081c1e47d-CV1F1JEW&SP_RID=%%RECIPIENT_ID%%&SP_MID=%%MAILING_ID%%&PROGRAMID=%%PROGID%%&CAMPAIGNCODE=%%CAMPAIGNCODE%%&OFFERCODE=%%OFFERCODE%%&CELLCODE=%%CELL%%&PID=%%PID%%&FROM=EMAIL&Module=1" name="RE_ACCORD_SEDAN_FEATURED_SPECIAL_LEASE" target="_blank" style="color:  #00324E; text-decoration: none;">
                                                            APR for 24-36 months or<br>
                                                            2.9% APR for 37-60 months.
                                                        </a>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="344" class="car-disclaimer" style="padding-left:24px; padding-bottom:16px; color: #2d2d2d; font-family: Arial, Helvetica, sans-serif; font-size: 11px; width:344px;">
                                        <a href="https://automobiles.honda.com/tools/current-offers?vehiclemodelseries=Accord-Sedan&offer=090111c081c1e47d-CV1F1JEW&SP_RID=%%RECIPIENT_ID%%&SP_MID=%%MAILING_ID%%&PROGRAMID=%%PROGID%%&CAMPAIGNCODE=%%CAMPAIGNCODE%%&OFFERCODE=%%OFFERCODE%%&CELLCODE=%%CELL%%&PID=%%PID%%&FROM=EMAIL&Module=1" name="RE_ACCORD-SEDAN_OFFER_DETAILS" target="_blank" style="color: #2d2d2d; text-decoration: none;">
                                                For well qualified buyers.
                                            </a>
                                        <br>
                                        <span class="offers-cta">
                                                <a href="https://automobiles.honda.com/tools/current-offers?vehiclemodelseries=Accord-Sedan&offer=090111c081c1e47d-CV1F1JEW&SP_RID=%%RECIPIENT_ID%%&SP_MID=%%MAILING_ID%%&PROGRAMID=%%PROGID%%&CAMPAIGNCODE=%%CAMPAIGNCODE%%&OFFERCODE=%%OFFERCODE%%&CELLCODE=%%CELL%%&PID=%%PID%%&FROM=EMAIL&Module=1" name="RE_ACCORD_SEDAN_SEE_OFFER_TERMS_CTA" target="_blank" style="color: #2d2d2d; text-decoration: underline;">See Offer Terms</a>
                                            </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="344" class="padmenot" style="padding-left:24px; padding-bottom:20px; width:344px;">
                                        <table width="320" class="offer-space" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" align="center" style="width:320px;">
                                            <tr valign="middle">
                                                <td width="126" align="center" valign="middle" bgcolor="#ffffff" style="font-family: Avenir Next, Helvetica, sans-serif; font-size: 14px; color: #ffffff; vertical-align: middle; border-radius: 20px;  border-style: solid; border-color: #1F98DC; border-width: 2px; display: inline-block; padding-top: 5px; padding-bottom: 3px; width:126px;">
                                                    <a href="https://automobiles.honda.com/tools/current-offers?vehiclemodelseries=Accord-Sedan&SP_RID=%%RECIPIENT_ID%%&SP_MID=%%MAILING_ID%%&PROGRAMID=%%PROGID%%&CAMPAIGNCODE=%%CAMPAIGNCODE%%&OFFERCODE=%%OFFERCODE%%&CELLCODE=%%CELL%%&PID=%%PID%%&FROM=EMAIL&Module=1" name="RE_ACCORD_SEDAN_SEE_MORE_BTN" target="_blank" style="font-family: Avenir Next, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #1F98DC; text-decoration: none; display:inline-block; width:126px; ">MORE OFFERS</a>
                                                </td>
                                                <td width="14" style="width:14px;"><img src="http://shophonda.com/images/feeds/current-offers/offers-e-mail-template-2/spacer.gif" alt="" width="14" height="39" border="0" style="width:100%; display: block;"></td>
                                                <td width="126" align="center" valign="middle" bgcolor="#007CC3" style="font-family: Avenir Next, Helvetica, sans-serif; font-size: 14px; color: #ffffff; vertical-align: middle; border-radius: 20px;  border-style: solid; border-color: #007CC3; border-width: 2px; display: inline-block; padding-top: 5px; padding-bottom: 3px; width:126px;">
                                                    <a href="https://automobiles.honda.com/tools/build-and-price-result?modelseries=accord-sedan&modelyear=2018&e=%%LinkURL6%%&p=%%LinkURL4%%&b=%%LinkURL5%%&campaignName=%%MAILING_ID%%&SP_RID=%%RECIPIENT_ID%%&SP_MID=%%MAILING_ID%%&PROGRAMID=%%PROGID%%&CAMPAIGNCODE=%%CAMPAIGNCODE%%&OFFERCODE=%%OFFERCODE%%&CELLCODE=%%CELL%%&PID=%%PID%%&FROM=EMAIL" name="RE_ACCORD_SEDAN_BUILD_BTN" target="_blank" style="font-family: Avenir Next, Helvetica, sans-serif; color: #ffffff; font-size: 14px; font-weight: bold; text-decoration: none; display:inline-block; width:126px;">BUILD</a>
                                                </td>
                                                <td width="54" class="hideme" style="width:54px;"><img src="http://shophonda.com/images/feeds/current-offers/offers-e-mail-template-2/spacer.gif" alt="" width="54" height="39" border="0" style="width:100%; display: block;"></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                <!-- Car Offer Divider -->
                <table width="600" border="0" class="offer-divider-table" cellpadding="0" cellspacing="0" bgcolor="#ffffff" align="center" style="width:600px;">
                    <tr valign="top">
                        <td width="600" height="2" class="widenme" style="line-height:2px; width:600px;"><img src="http://shophonda.com/images/feeds/current-offers/offers-e-mail-template-3/offer-divide.gif" alt="" border="0" width="600" height="2" style="width: 100%; display: block;"></td>
                    </tr>
                </table>
                <!-- Connect with us Social Icons -->
                <table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" align="center" style="width:600px; padding-top: 20px;">
                    <tr valign="top">
                        <td>
                            <!--Social Icons-->
                            <table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" align="center" style="width:600px;">
                                <tr valign="top">
                                    <td class="hideme" width="185"><img src="images/spacer.gif" alt="" width="185" height="51" border="0" style="display: block;"></td>
                                    <td width="45" class="social-button-cell"><a href="https://www.facebook.com/Honda" name="I_NON_OTHER_FACEBOOK_ICON" target="_blank"><img src="images/fb_icon.gif" alt="Facebook" class="scaleme" width="45" border="0" style="display: block;color:color:#000000;"></a></td>
                                    <!--social vert rule-->
                                    <td width="1"><img src="images/social-vert-rule.gif" alt="" class="hideme" width="1" height="24" border="0" style="display: block;"></td>
                                    <td width="45" class="social-button-cell"><a href="https://twitter.com/Honda" name="I_NON_OTHER_TWITTER_ICON" target="_blank"><img src="images/tw_icon.gif" alt="Twitter" class="scaleme" width="43" border="0" style="display: block;color:#000000;"></a></td>
                                    <!--social vert rule-->
                                    <td width="1"><img src="images/social-vert-rule.gif" alt="" class="hideme" width="1" height="24" border="0" style="display: block;"></td>
                                    <td width="45" class="social-button-cell"><a href="https://plus.google.com/110355594819754396833" name="I_NON_OTHER_GOOGLE_PLUS_ICON" target="_blank"><img src="images/gplus_icon.gif" alt="Pinterest" class="scaleme" width="45" border="0" style="display: block;color:#000000;"></a></td>
                                    <!--social vert rule-->
                                    <td width="1"><img src="images/social-vert-rule.gif" alt="" class="hideme" width="1" height="24" border="0" style="display: block;"></td>
                                    <td width="45" class="social-button-cell"><a href="http://www.pinterest.com/Honda/" name="I_NON_OTHER_PINTEREST_ICON" target="_blank"><img src="images/pin_icon.gif" alt="Instagram" class="scaleme" width="43" border="0" style="display: block;color:#000000;"></a></td>
                                    <!--social vert rule-->
                                    <td width="1"><img src="images/social-vert-rule.gif" alt="" class="hideme" width="1" height="24" border="0" style="display: block;"></td>
                                    <td width="45"><a href="https://www.youtube.com/Honda" name="I_NON_OTHER_YOUTUBE_ICON" target="_blank"><img src="images/yt_icon.gif" alt="YouTube" class="scaleme" width="45" border="0" style="display: block;color:#000000;"></a></td>
                                    <td class="hideme" width="185"><img src="images/spacer.gif" alt="" width="185" height="51" border="0" style="display: block;"></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    </td>
    </tr>
    </table>
</body>

</html>
...