HTML in e-newsletter not matching preview

Hi - I have been trying to get the email newsletter to send a test that looks like what I see in my preview - But I just can't get it to work. I have separate CSS at the top of my html but that didn't seem to take so I also added it in the html elements...looks fine in preview - but not when sent. Any help is appreciated! It's a gif so you can ignore the images looking different - it's the margin between them that is off. They should "touch"

  • Kasia Swiderska

    Hello Jessica,

    I've looked at your template in browser preview and it also shows gaps - this is because there are paddings in table cells. Please see the screenshot - the violet filed is padding. It is in the both table cells containing images, so you would need to add padding-bottom: 0; to upper one and padding-top: 0; to lower one.

    Please note that mail clients are not interpreting all styles exact same way as browsers - and that is why you are seeing differences.

    Kind regards,
    Kasia

  • Jessica

    I guess i can't add a zip... here is code
    (CSS)
    /*
    Theme Name: Jewelry
    Theme URI: https://premium.wpmudev.org
    Author: Cole (Incsub)
    Author URI: https://premium.wpmudev.org
    Description: Responsive theme with: max width 640px, max content width 600px, header image support
    Version: 1.5
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    */
    body, .body_style, h1, h2, h3, h4, h5, h6, td {
    font-family: Gotham, Helvetica, sans-serif;
    }
    body, .body_style {
    font-size:10px;
    color:#ALTERNATIVE_COLOR;
    }

    .body_style {
    background-color:#BG_COLOR;
    }

    .rightColumnContent {
    padding-top:100px;
    padding-left:40px;
    }

    .leftColumnContent {
    padding-top:130px;
    padding-left:40px;
    }

    .font-intro {
    font-family:Gotham, Helvetica, Sans Serif;
    font-size:10px;
    padding: 50px 0;
    }

    .rightColumnimage {
    width:325px;
    margin-top: -22px;
    padding-bottom:10px;
    padding-top: 18px;
    }

    .leftColumnimage {
    width:325px;
    margin-left: -14px;
    margin-bottom: -18px;
    padding-bottom: 10px;
    padding-left:25px;
    }

    .font-small {
    font-family:Gotham, Helvetica, Sans Serif;
    font-size:8px;
    }

    .space {
    margin-top:-21px;
    }

    .logo {
    padding-top:50px;
    padding-bottom:20px;
    align:center;
    }

    p.footer-left {
    font-size:8px;
    }

    .footer-left a {
    font-size:8px;
    }

    .holder {
    padding:1.5%;
    }
    .width {
    max-width:650px;
    }
    .content_main {
    background-color:#ffffff;
    border-radius: 0px;
    }

    .footer-left, .footer-right {
    padding-top:20px;

    }
    .title {
    font-size: 29px;
    line-height: 29px;
    margin:0px;
    padding:15px 20px 15px 20px;
    font-weight: bold;
    }
    .email_content, .email_content table, .contact_info, .email_content h1, .email_content h2, .email_content h3, .email_content h4, .email_content h5, .email_content h6 {
    color: #BODY_COLOR;
    }
    .email_content {
    padding:5px 20px;
    }
    p {
    font-size:10px;
    line-height:14px;
    font-family:Gotham, Helvetica, sans-serif;
    text-decoration: none;
    }

    a {
    font-size:10px;
    line-height:14px;
    font-family:Gotham, Helvetica, sans-serif;
    text-decoration: none;
    color:#000000;
    }

    .header_image {
    align: center;
    }

    .view_link {
    text-align: center;
    }
    .view_link a {
    line-height: 25px;
    }
    .unsubscribe {
    display:none;
    padding: 10px;
    text-align: center;
    font-size: 11px;
    text-decoration:none;
    }

    .contact_info {
    padding-top: 80px;
    padding-bottom: 50px;
    font-size:10px;

    }
    /* 313158-1447781139 */

    (HTML)
    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <table class="container" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td valign="middle" align="center">
    <div class="width">

    <table class="content content_main" align="center" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td valign="middle" class="branding_html" data-builder="branding_html">

    </td>
    </tr>
    <tr>
    <td valign="middle" class="header_image" data-builder="header_image">
    <p align="center"><img src="https://magdalenafrackowiak.com/wp-content/uploads/2015/10/logo_magdalena_frackowiak.png" class="logo" width="250px;"></p>
    </td>
    </tr>
    <tr>
    <td class="email_content" data-builder="body_color">
    <div data-builder="email_content">
    <p align="center"<span class="font-intro">FIND A NEW SELECTION OF PRODUCTS AVAILABLE ON OUR WEBSITE</span></p>

    <table border="0" cellpadding="0" cellspacing="0" width="650" id="templateColumns">
    <tr>
    <td align="center" valign="top" width="50%" class="templateColumnContainer">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
    <td class="leftColumnImage">
    <span class="left-image"><img src="http://magdalenafrackowiak.com/wp-content/uploads/2015/11/smallhoop_final.gif" class="leftcolumnImage" width:"325px"></span>
    </td>
    </tr>
    </table>
    </td>
    <td align="center" valign="top" width="50%" class="templateColumnContainer">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
    <td class="rightColumnContent">
    <p><span class="right-font">SMALL HOOP EARRINGS</span></p>
    <p><span class="right-font">18K GOLD
    16 MM DIAMETER
    IRREGULAR POLISHED SURFACE</span></p>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>

    <table border="0" cellpadding="0" cellspacing="0" width="650" id="templateColumns" class="space">
    <tr>
    <td align="center" valign="top" width="50%" class="templateColumnContainer">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
    <td class="leftColumnContent" >
    <p><span class="font">LARGE HOOP EARRINGS</span></p>

    <p><span class="font">18K GOLD
    16 MM DIAMETER
    IRREGULAR POLISHED SURFACE</span></p>
    </td>
    </tr>
    <tr>
    <td valign="top" class="leftColumnContent">

    </td>
    </tr>
    </table>
    </td>
    <td align="center" valign="top" width="50%" class="templateColumnContainer">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
    <td class="bottomrightColumnContent">
    </td>
    </tr>
    <tr>
    <td valign="top" class="rightColumnimage";>
    <img src="http://magdalenafrackowiak.com/wp-content/uploads/2015/11/largehoop_final.gif" width:"325px">
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>

    </div>
    </td>
    </tr>

    </table>

    </div>
    </td>
    </tr>
    </table>

    <table class="content content_main" align="center" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td align="center" valign="top" width="75%" class="footer-left">
    <table border="0" cellpadding="10" cellspacing="0" width="464px">
    <tr>
    <td class="footer-left">
    <p class="footer-left">MAGDALENA FRACKOWIAK JEWELRY
    ALEJA RÓ? 6 APT. 5 00-556 WARSAW, POLAND +48668650355
    ©2014-2015 MAGDALENA FRACKOWIAK™ ALL RIGHTS RESERVED
    </p>

    <p class="footer-left">YOU ARE SUBSCRIBED AS {TO_EMAIL}
    IF YOU NO LONGER WISH TO RECEIVE THESE MESSAGES, PLEASE UNSUBSCRIBE HERE</p>
    </td>
    </tr>
    </table>
    </td>
    <td align="center" valign="top" width="25%" class="footer-right">
    <table border="0" cellpadding="10" cellspacing="0" width="173px">
    <tr>
    <td class="footer-right">
    <p class="footer-left">MAGDALENAFRACKOWIAK.COM
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>

  • Jessica

    Ok...guess that doesn't work either. Hope this helps. The code buttons were a little unclear to me

    /*
    Theme Name: Jewelry
    Theme URI: https://premium.wpmudev.org
    Author: Cole (Incsub)
    Author URI: https://premium.wpmudev.org
    Description: Responsive theme with: max width 640px, max content width 600px, header image support
    Version: 1.5
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    */
    body, .body_style, h1, h2, h3, h4, h5, h6, td {
    	font-family: Gotham, Helvetica, sans-serif;
    }
    body, .body_style {
    	font-size:10px;
    	color:#ALTERNATIVE_COLOR;
    }
    
    .body_style {
    	background-color:#BG_COLOR;
    }
    
        .rightColumnContent {
    		padding-top:100px;
            padding-left:40px;
        }
    
        .leftColumnContent {
    		padding-top:130px;
            padding-left:40px;
        }
    
     .font-intro {
            font-family:Gotham, Helvetica, Sans Serif;
            font-size:10px;
            padding: 50px 0;
        }
    
    .rightColumnimage {
    width:325px;
    margin-top: -22px;
    padding-bottom:10px;
    padding-top: 18px;
    }
    
    .leftColumnimage {
    width:325px;
    margin-left: -14px;
    margin-bottom: -18px;
    padding-bottom: 10px;
    padding-left:25px;
    }
    
     .font-small {
            font-family:Gotham, Helvetica, Sans Serif;
            font-size:8px;
        }
    
    .space {
    	margin-top:-21px;
    }
    
    .logo {
    padding-top:50px;
    padding-bottom:20px;
    align:center;
    }
    
    p.footer-left {
    	font-size:8px;
    }
    
    .footer-left a {
    	font-size:8px;
    }
    
    .holder {
    	padding:1.5%;
    }
    .width {
    	max-width:650px;
    }
    .content_main {
    	background-color:#ffffff;
    	border-radius: 0px;
    }
    
    .footer-left, .footer-right {
    padding-top:20px;
    
    }
    .title {
    	font-size: 29px;
    	line-height: 29px;
    	margin:0px;
    	padding:15px 20px 15px 20px;
    	font-weight: bold;
    }
    .email_content, .email_content table, .contact_info, .email_content h1, .email_content h2, .email_content h3, .email_content h4, .email_content h5, .email_content h6 {
    	color: #BODY_COLOR;
    }
    .email_content {
    	padding:5px 20px;
    }
    p {
    	font-size:10px;
    	line-height:14px;
    	font-family:Gotham, Helvetica, sans-serif;
    	text-decoration: none;
    }
    
    a {
    	font-size:10px;
    	line-height:14px;
    	font-family:Gotham, Helvetica, sans-serif;
    	text-decoration: none;
    	color:#000000;
    }
    
    .header_image {
    	align: center;
    }
    
    .view_link {
    	text-align: center;
    }
    .view_link a {
    	line-height: 25px;
    }
    .unsubscribe {
    	display:none;
    	padding: 10px;
    	text-align: center;
    	font-size: 11px;
    	text-decoration:none;
    }
    
    .contact_info {
    	padding-top: 80px;
    	padding-bottom: 50px;
    	font-size:10px;
    
    }
    /* 313158-1447781139 */
    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    
    <table class="container" border="0" align="center" cellpadding="0" cellspacing="0">
    	<tr>
    		<td valign="middle" align="center">
    			<div class="width">
    
    			<table class="content content_main" align="center" border="0" cellspacing="0" cellpadding="0">
    				<tr>
    					<td valign="middle" class="branding_html" data-builder="branding_html">
    
    					</td>
    				</tr>
    				<tr>
    					<td valign="middle" class="header_image" data-builder="header_image">
    						<p align="center"><img src="https://magdalenafrackowiak.com/wp-content/uploads/2015/10/logo_magdalena_frackowiak.png" class="logo" width="250px;"></p>
    					</td>
    				</tr>
    				<tr>
    					<td class="email_content" data-builder="body_color">
    						<div data-builder="email_content">
    							<p align="center"<span class="font-intro">FIND A NEW SELECTION OF PRODUCTS AVAILABLE ON OUR WEBSITE</span></p>
    
    <table border="0" cellpadding="0" cellspacing="0" width="650" id="templateColumns">
        <tr>
            <td align="center" valign="top" width="50%" class="templateColumnContainer">
                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td class="leftColumnImage">
                            <span class="left-image"><img src="http://magdalenafrackowiak.com/wp-content/uploads/2015/11/smallhoop_final.gif" class="leftcolumnImage" width:"325px"></span>
                        </td>
                    </tr>
                </table>
            </td>
            <td align="center" valign="top" width="50%" class="templateColumnContainer">
                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td class="rightColumnContent">
    						<p><span class="right-font">SMALL HOOP EARRINGS</span></p>
    						<p><span class="right-font">18K GOLD<br />
    						16 MM DIAMETER<br />
    						IRREGULAR POLISHED SURFACE</span></p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    
    <table border="0" cellpadding="0" cellspacing="0" width="650" id="templateColumns" class="space">
        <tr>
            <td align="center" valign="top" width="50%" class="templateColumnContainer">
                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td class="leftColumnContent" >
                            <p><span class="font">LARGE HOOP EARRINGS</span></p>
    
    <p><span class="font">18K GOLD<br />
    16 MM DIAMETER<br />
    IRREGULAR POLISHED SURFACE</span></p>
                        </td>
                    </tr>
                    <tr>
                        <td valign="top" class="leftColumnContent">
    
                        </td>
                    </tr>
                </table>
            </td>
            <td align="center" valign="top" width="50%" class="templateColumnContainer">
                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td class="bottomrightColumnContent">
                        </td>
                    </tr>
                    <tr>
                        <td valign="top" class="rightColumnimage";>
                            <img src="http://magdalenafrackowiak.com/wp-content/uploads/2015/11/largehoop_final.gif" width:"325px">
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    
    						</div>
    					</td>
    				</tr>
    
    			</table>
    
    			</div>
    		</td>
    	</tr>
    </table>
    
    <table class="content content_main" align="center" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td align="center" valign="top" width="75%" class="footer-left">
                <table border="0" cellpadding="10" cellspacing="0" width="464px">
                    <tr>
                        <td class="footer-left">
                            <p class="footer-left">MAGDALENA FRACKOWIAK JEWELRY<br>
                                ALEJA RÓ? 6 APT. 5   00-556 WARSAW, POLAND  +48668650355<br>
                                ©2014-2015 MAGDALENA FRACKOWIAK™ ALL RIGHTS RESERVED<br></p>
    
    							<p class="footer-left">YOU ARE SUBSCRIBED AS {TO_EMAIL}<br>
                                IF YOU NO LONGER WISH TO RECEIVE THESE MESSAGES, PLEASE <a href="{UNSUBSCRIBE_URL}">UNSUBSCRIBE HERE</a></p>
                        </td>
                    </tr>
                </table>
            </td>
            <td align="center" valign="top" width="25%" class="footer-right">
                <table border="0" cellpadding="10" cellspacing="0" width="173px">
                    <tr>
                        <td class="footer-right">
                            <p class="footer-left">MAGDALENAFRACKOWIAK.COM
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
  • Jessica

    Hi - yes the squares are fixes because I got a developer to help me. I don't even know what they did - but even they mentioned that everything they fixed broke something else. So - for instance the space that I added in the CSS above and below the opening sentence is now gone and the URL link in my footer is still underlined even though I added no text decoration. Is there a problem with my theme or something? That the HTML doesn't carry over?

  • Kasia Swiderska

    Hello Jessica,

    I've checked your newsletter in email client (Thunderbird) and it looks the same as in preview. It looks like problem with the Gmail - I've done some searching and looks like Gmail will not accept black link color and will remove styles. I found here workaround for this issue:
    https://litmus.com/community/code/47-underlines-appearing-in-gmail-and-on-mac-apple-mail-6-web-based-and-mobile-devices
    https://www.emailonacid.com/blog/article/email-development/12_things_you_must_know_when_developing_for_gmail_and_gmail_mobile_apps

    Kind regards,
    Kasia

  • Rupok

    Hi Jessica

    For testing, I added myself as an user in members and send an email. The email came perfectly, Unsubscribe link was active in the email. So I could not regenerate the issue.

    Can you please try again? And I can see 7 subscribers for the newsletter created on 2015-11-22 12:57:36 . So I think, it should be working. Please let us know if you still don't get emails. We will be glad to help.

    Have a nice day. Cheers!
    Rupok

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.